本例子：
使用了formatter方法重写了提示层的展示数据
使用了双x轴实现重合
使用了stack实现堆积
使用了legendselectchanged和dispatchAction重写了图例点击事件
使用bar和line在一个图里就可实现柱状折线图
<!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=" 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>