柱状折线图2-双柱状重合堆积折线-重写图例点击事件
生活随笔
收集整理的這篇文章主要介紹了
柱状折线图2-双柱状重合堆积折线-重写图例点击事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本例子：
使用了formatter方法重寫了提示層的展示數據
使用了雙x軸實現重合
使用了stack實現堆積
使用了legendselectchanged和dispatchAction重寫了圖例點擊事件
?
使用bar和line在一個圖里就可實現柱狀折線圖
事件：傳送門1? 傳送門2
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="echarts.min.js"></script> </head> <body><div id="main" style="width: 900px;height:400px;"></div><button id="btn">clcik</button><script> let num = 0;/*toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},*/var option = {tooltip : {trigger: 'axis',formatter:function(params,b,c){var reVal = params[0].name + "<br/>";params.forEach(function(v){reVal += v.marker + v.seriesName + ":" + v.value +"<br/>";});return reVal;}},grid:{x: 50,x2: 100},calculable : true,legend: {selectedMode:"multiple",data:["總水量",'蒸發量','降水量',"總水量2",'蒸發量2','降水量2','平均溫度','平均溫度2']},xAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']},{show : false,type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis : [{boundaryGap:[0,'10%'],position:"left",type : 'value',name : '水量',splitLine:{show:false},axisLabel : {formatter: '{value} ml'},axisTick:{inside:true}},{boundaryGap:[0,'10%'],position:"right",offset:0,type : 'value',name : '溫度',splitLine:{show:false},axisLabel : {formatter: '{value} °C'}},{boundaryGap:[0,'10%'],position:"right",offset:50,type: 'value',name : '溫度2',splitLine:{show:false},axisLabel:{formatter: '{value} °C'}}],series : [{name:'總水量',type:'bar',/*barGap -100% 就可以當成背景 可以使用在堆積柱狀圖里的總數里*//*barGap:"-100%",*/yAxisIndex: 0,xAxisIndex: 1,data:[4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 231.2, 344.4, 81.3, 48.8, 12.4, 5.6]},{name:'蒸發量',type:'bar',stack:"總水量",yAxisIndex: 0,xAxisIndex: 0,data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name:'降水量',type:'bar',stack:"總水量",yAxisIndex: 0,xAxisIndex: 0,data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 100.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name:'總水量2',type:'bar',/*barGap -100% 就可以當成背景 可以使用在堆積柱狀圖里的總數里*//*barGap:"-100%",*/yAxisIndex: 0,xAxisIndex: 1,data:[4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 241.2, 344.4, 81.3, 48.8, 12.4, 5.6]},{name:'蒸發量2',type:'bar',stack:"總水量2",yAxisIndex: 0,xAxisIndex: 0,data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name:'降水量2',type:'bar',stack:"總水量2",yAxisIndex: 0,xAxisIndex: 0,data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 105.6, 182.2, 48.7, 18.8, 6.0, 2.3]},/*{name:'平均溫度',type:'line',yAxisIndex: 1,data:[2.0, 3.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 25.0, 16.5, 10.0, 9.2]},,{name:'平均溫度2',type:'line',yAxisIndex: 2,data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]} */ ] };var option2 = {tooltip : {trigger: 'axis'},grid:{x: 0,x2: 150},calculable : true,legend: {data:['降水量','平均溫度']},xAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis : [{boundaryGap:[0,'10%'],position:"right",offset:0,type : 'value',name : '水量',splitLine:{show:false},axisLabel : {formatter: '{value} ml'},axisTick:{inside:true}},{boundaryGap:[0,'10%'],position:"right",offset:50,type : 'value',name : '溫度',splitLine:{show:false},axisLabel : {formatter: '{value} °C'}}],series : [{name:'降水量',type:'bar',yAxisIndex: 0,data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name:'平均溫度',type:'line',yAxisIndex: 1,data:[2.0, 3.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 25.0, 16.5, 10.0, 9.2]}] };// 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option,true); var offOn=true; document.querySelector("#btn").onclick=function(){if(offOn){myChart.setOption(option2,true); }else{myChart.setOption(option,true); }offOn=!offOn;} /*echarts 可以在選中圖例后進行一些操作， 使用dispatchAction 觸發圖形里的一些方法，比如圖例的legendSelect選中事件batch 是批發對象API鏈接：http://echarts.baidu.com/api.html#echartsInstance.dispatchAction這樣就可以覆蓋某些本有方法，比如點擊圖例切換選中事件，本例子就取消了legendSelect是選中，把圖例選中 */ var triggerAction = function(action, selected) {legend = [];for ( name in selected) {if (selected.hasOwnProperty(name)) {legend.push({name: name});}}myChart.dispatchAction({type: action,batch: legend});}; myChart.on('legendselectchanged', function(obj) {var selected = obj.selected;var legend = obj.name;// 使用 legendToggleSelect Action 會重新觸發 legendselectchanged Event，導致本函數重復運行// 使得 無 selected 對象if (selected != undefined) {triggerAction('legendSelect', selected);}});</script> </body> </html>?
轉載于:https://www.cnblogs.com/zhangzhicheng/p/7906659.html
總結
以上是生活随笔為你收集整理的柱状折线图2-双柱状重合堆积折线-重写图例点击事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 获取request header的值
- 下一篇： Eclipse 使用maven管理发布w