摘要:最近的項目中用到了的雙軸和雙軸的設(shè)置,特此記錄一下鼠標(biāo)懸停提示內(nèi)容坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效十字線顯示標(biāo)準(zhǔn)保費增長軸軸顯示兩組數(shù)據(jù)第個軸兩個軸左邊軸金額元右邊軸增長用于指定圖標(biāo)顯示類型第一個柱狀圖的數(shù)據(jù)標(biāo)準(zhǔn)保費第一個柱狀圖的數(shù)據(jù)第二個柱狀
最近的項目中用到了echarts的雙x軸和雙y軸的設(shè)置,特此記錄一下;
option = { tooltip: { //鼠標(biāo)懸停提示內(nèi)容 trigger: "axis", axisPointer: { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效 type: "cross" // 十字線顯示 } }, legend: { y: "20px", data: ["標(biāo)準(zhǔn)保費", "增長"], selectedMode: false, }, xAxis: [ //X軸 { type: "category", data: [1, 2, 3, 4, 5, 6], axisLabel: {interval: 0}, }, //x軸顯示兩組數(shù)據(jù) 第2個X軸 { type: "category", axisLine: {show: false}, axisTick: {show: false}, axisLabel: {show: false, interval: 0}, splitArea: {show: false}, splitLine: {show: false}, data: [1, 2, 3, 4, 5, 6], } ], yAxis: [ //兩個y軸 左邊y軸 { type: "value", name: "金額(元)", axisLabel: { show: true, interval: "auto", formatter: "{value} " }, splitNumber: 10, splitLine: { show: true, lineStyle: { type: "dashed" } }, // splitArea: { // show: false // }, // max: 100, // interval: 10, }, //右邊y軸 { type: "value", name: "增長", axisLabel: { show: true, interval: "auto", formatter: "{value} %" }, splitNumber: 10, splitLine: { show: true, lineStyle: { type: "dashed" } }, splitArea: { show: false }, // max: 100, // interval: 10, } ], series: [ //用于指定圖標(biāo)顯示類型 //第一個柱狀圖的數(shù)據(jù) { name: "標(biāo)準(zhǔn)保費", type: "bar", yAxisIndex: "0",// 第一個柱狀圖的數(shù)據(jù) itemStyle: {normal: {color: "#2d91ff", label: {show: true}}}, data: [100,200, 30, 90,210,110] }, //第二個柱狀圖的數(shù)據(jù) { name: "承保", type: "bar", xAxisIndex: 1, //第二個柱狀圖的數(shù)據(jù) itemStyle: { normal: { color: "#d5e9ff", label: { show: true, formatter: function (p) { return p.value > 0 ? (p.value + " ") : ""; } } } }, data: [120, 300, 100, 170, 300,200] }, /右邊Y軸的數(shù)據(jù) { name: "增長", type: "line", symbol: "emptyCircle", showAllSymbol: true, //動畫效果 symbolSize: 3, smooth: true, //光滑的曲線 yAxisIndex: "1", itemStyle: { normal: { color: "#ffb348", label: { show: true, formatter: "{c}%", textStyle: { color: "#000000" } } } }, data: [3, 9, 2, 5, 7, 10] }, ] };
效果圖如下
重點在設(shè)置參數(shù)如下
xAxisIndex: 1,
yAxisIndex: "1",
數(shù)據(jù)我是隨便寫的,大家僅供參考,詳細(xì)設(shè)置請查看官方文檔
完結(jié)!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/106003.html
摘要:我們在開發(fā)應(yīng)用的時候經(jīng)常美工會設(shè)計一些樣式比較特殊的圖表,這對于前端開發(fā)人員來說會增加開發(fā)量,如下圖就是筆者開發(fā)過程中要求制作的帶漸變色效果的柱狀圖今天在這里教大家如何用原生和如何用圖表開發(fā)工具來實現(xiàn)。 我們在開發(fā)web應(yīng)用的時候經(jīng)常美工會設(shè)計一些樣式比較特殊的圖表,這對于前端開發(fā)人員來說會...
摘要:如圖下面的四個點其實橫坐標(biāo)和縱坐標(biāo)都是一樣的,即個點的軸和軸的值是一樣的,這樣的畫點就會重合無法去分辨解決思路保留一個在正確點顯示其他重復(fù)的點依據(jù)這個點環(huán)繞顯示確定半徑,和角度下面是代碼圖片描述去重 showImg(https://segmentfault.com/img/bVbvJD0?w=954&h=569); 如圖:下面的四個點其實橫坐標(biāo)和縱坐標(biāo)都是一樣的,(即4個點的x軸和y軸...
摘要:問題一個折線圖中有多條折線。通過設(shè)置為與后,對軸進(jìn)行復(fù)用,并每次只展示一條折線,這樣能夠較好的展示每個折線的變化趨勢與大致范圍,不過一次看不了多個折線的參考文章文檔配置項文檔折線圖多條折線的時候怎么控制每次只能限制條 問題 一個折線圖中有多條折線。由于折線之間數(shù)值范圍相差較大(折線A范圍[0-50],折線B范圍[10000-20000]……),如果用單Y軸來表示,折線的變化趨勢不明顯。...
摘要:背景在項目中使用是很容易的,移動端也適配的不錯,按照官網(wǎng)教程即可。修改完成后,發(fā)現(xiàn)的表現(xiàn)符合預(yù)期了。經(jīng)過測試圖表的其他基本功能正常。由于的功能太多,這樣的源碼修改功能對其他的功能有無影響,還不能完全確定。 背景 在項目中使用highcharts是很容易的,移動端也適配的不錯,按照官網(wǎng)教程即可。但是在移動端,由于手機端屏幕太小,需求方希望可以弄一個全屏圖,把手機橫過來觀察曲線。 正常:s...
摘要:給軸設(shè)置滾動條默認(rèn)為默認(rèn)為滑動條的左右個滑動條的大小組件高度左邊的距離右邊的距離右邊的距離兩邊未選中的滑動條區(qū)域的顏色是否顯示數(shù)據(jù)陰影默認(rèn)即拖拽時候是否顯示詳細(xì)數(shù)值信息默認(rèn)是否實時更新下面這個屬性是里面拖到默認(rèn)為默認(rèn)為 showImg(https://segmentfault.com/img/bVbuOaQ?w=1172&h=513); dataZoom: [//給x軸設(shè)置滾動條 ...
閱讀 3033·2021-10-13 09:39
閱讀 1879·2021-09-02 15:15
閱讀 2438·2019-08-30 15:54
閱讀 1803·2019-08-30 14:01
閱讀 2602·2019-08-29 14:13
閱讀 1411·2019-08-29 13:10
閱讀 2731·2019-08-28 18:15
閱讀 3870·2019-08-26 10:20