本例子：
使用了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链接：/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>
