ECharts 在同一个页面添加多个图表 并 给图表绑定事件

 

"utf-8" >
ECharts



"barMain" style= "height:400px" >
"lineMain" style= "height:400px" >

<code class="javascript string">"http://echarts.baidu.com/build/dist/echarts.js"</code> <code class="javascript plain">>
<code class="javascript string">"text/javascript"</code> <code class="javascript plain">></code> </div> <div class="line number13 index12 alt2"> <code class="javascript comments">// 路径配置</code> </div> <div class="line number14 index13 alt1"> <code class="javascript plain">require.config({</code> </div> <div class="line number15 index14 alt2"> <code class="javascript plain">　　paths: {</code> </div> <div class="line number16 index15 alt1"> <code class="javascript plain">　　　　echarts: </code> <code class="javascript string">'http://echarts.baidu.com/build/dist'</code> </div> <div class="line number17 index16 alt2"> <code class="javascript plain">　　}</code> </div> <div class="line number18 index17 alt1"> <code class="javascript plain">});</code> </div> <div class="line number19 index18 alt2"> <code class="javascript comments">// 使用</code> </div> <div class="line number20 index19 alt1"> <code class="javascript plain">require(</code> </div> <div class="line number21 index20 alt2"> <code class="javascript plain">　　　　　　[</code> </div> <div class="line number22 index21 alt1"> <code class="javascript plain">　　　　　　　　</code> <code class="javascript string">'echarts'</code> <code class="javascript plain">,</code> </div> <div class="line number23 index22 alt2"> <code class="javascript plain">　　　　　　　　</code> <code class="javascript string">'echarts/chart/bar'</code> <code class="javascript plain">, </code> </div> <div class="line number24 index23 alt1"> <code class="javascript plain">　　　　　　　　</code> <code class="javascript string">'echarts/chart/line'</code> </div> <div class="line number25 index24 alt2"> <code class="javascript plain">　　　　　　],</code> </div> <div class="line number26 index25 alt1"> <code class="javascript plain">　　　　　　drawEcharts</code> </div> <div class="line number27 index26 alt2"> <code class="javascript plain">);</code> </div> <div class="line number28 index27 alt1">   </div> <div class="line number29 index28 alt2"> <code class="javascript keyword">function</code> <code class="javascript plain">drawEcharts(ec){</code> </div> <div class="line number30 index29 alt1"> <code class="javascript plain">　　drawBar(ec);</code> </div> <div class="line number31 index30 alt2"> <code class="javascript plain">　　drawLine(ec);</code> </div> <div class="line number32 index31 alt1"> <code class="javascript plain">}</code> </div> <div class="line number33 index32 alt2"> <code class="javascript keyword">function</code> <code class="javascript plain">drawBar(ec){</code> </div> <div class="line number34 index33 alt1"> <code class="javascript plain">　　</code> <code class="javascript keyword">var</code> <code class="javascript plain">myBarChart = ec.init(document.getElementById(</code> <code class="javascript string">'barMain'</code> <code class="javascript plain">)); </code> </div> <div class="line number35 index34 alt2"> <code class="javascript plain">　　</code> <code class="javascript keyword">var</code> <code class="javascript plain">option = {</code> </div> <div class="line number36 index35 alt1"> <code class="javascript plain">　　　　tooltip: {</code> </div> <div class="line number37 index36 alt2"> <code class="javascript plain">　　　　show: </code> <code class="javascript keyword">true</code> </div> <div class="line number38 index37 alt1"> <code class="javascript plain">　　},</code> </div> <div class="line number39 index38 alt2"> <code class="javascript plain">　　legend: {</code> </div> <div class="line number40 index39 alt1"> <code class="javascript plain">　　　　data:[</code> <code class="javascript string">'销量'</code> <code class="javascript plain">]</code> </div> <div class="line number41 index40 alt2"> <code class="javascript plain">　　},</code> </div> <div class="line number42 index41 alt1"> <code class="javascript plain">　　xAxis : [</code> </div> <div class="line number43 index42 alt2"> <code class="javascript plain">　　　　{</code> </div> <div class="line number44 index43 alt1"> <code class="javascript plain">　　　　　　type : </code> <code class="javascript string">'category'</code> <code class="javascript plain">,</code> </div> <div class="line number45 index44 alt2"> <code class="javascript plain">　　　　　　data : [</code> <code class="javascript string">"衬衫"</code> <code class="javascript plain">,</code> <code class="javascript string">"羊毛衫"</code> <code class="javascript plain">,</code> <code class="javascript string">"雪纺衫"</code> <code class="javascript plain">,</code> <code class="javascript string">"裤子"</code> <code class="javascript plain">,</code> <code class="javascript string">"高跟鞋"</code> <code class="javascript plain">,</code> <code class="javascript string">"袜子"</code> <code class="javascript plain">]</code> </div> <div class="line number46 index45 alt1"> <code class="javascript plain">　　　　}</code> </div> <div class="line number47 index46 alt2"> <code class="javascript plain">　　],</code> </div> <div class="line number48 index47 alt1"> <code class="javascript plain">　　yAxis : [</code> </div> <div class="line number49 index48 alt2"> <code class="javascript plain">　　　　{</code> </div> <div class="line number50 index49 alt1"> <code class="javascript plain">　　　　　　type : </code> <code class="javascript string">'value'</code> </div> <div class="line number51 index50 alt2"> <code class="javascript plain">　　　　}</code> </div> <div class="line number52 index51 alt1"> <code class="javascript plain">　　],</code> </div> <div class="line number53 index52 alt2"> <code class="javascript plain">　　series : [</code> </div> <div class="line number54 index53 alt1"> <code class="javascript plain">　　　　{</code> </div> <div class="line number55 index54 alt2"> <code class="javascript plain">　　　　　　</code> <code class="javascript string">"name"</code> <code class="javascript plain">:</code> <code class="javascript string">"销量"</code> <code class="javascript plain">,</code> </div> <div class="line number56 index55 alt1"> <code class="javascript plain">　　　　　　</code> <code class="javascript string">"type"</code> <code class="javascript plain">:</code> <code class="javascript string">"bar"</code> <code class="javascript plain">,</code> </div> <div class="line number57 index56 alt2"> <code class="javascript plain">　　　　　　</code> <code class="javascript string">"data"</code> <code class="javascript plain">:[5, 20, 40, 10, 10, 20]</code> </div> <div class="line number58 index57 alt1"> <code class="javascript plain">　　　　}</code> </div> <div class="line number59 index58 alt2"> <code class="javascript plain">　　]</code> </div> <div class="line number60 index59 alt1"> <code class="javascript plain">};</code> </div> <div class="line number61 index60 alt2"> <code class="javascript plain">myBarChart.setOption(option,</code> <code class="javascript keyword">true</code> <code class="javascript plain">); </code> <code class="javascript comments">//当setOption第二个参数为true时，会阻止数据合并</code> </div> <div class="line number62 index61 alt1"> <code class="javascript plain">}</code> </div> <div class="line number63 index62 alt2">   </div> <div class="line number64 index63 alt1">   </div> <div class="line number65 index64 alt2"> <code class="javascript keyword">function</code> <code class="javascript plain">drawLine(ec){</code> </div> <div class="line number66 index65 alt1"> <code class="javascript plain">　　</code> <code class="javascript keyword">var</code> <code class="javascript plain">myLineChart = ec.init(document.getElementById(</code> <code class="javascript string">'lineMain'</code> <code class="javascript plain">)); </code> </div> <div class="line number67 index66 alt2"> <code class="javascript plain">　　</code> <code class="javascript keyword">var</code> <code class="javascript plain">option2 = {</code> </div> <div class="line number68 index67 alt1"> <code class="javascript plain">　　　　title : {</code> </div> <div class="line number69 index68 alt2"> <code class="javascript plain">　　　　text: </code> <code class="javascript string">'未来一周气温变化'</code> <code class="javascript plain">,</code> </div> <div class="line number70 index69 alt1"> <code class="javascript plain">　　　　subtext: </code> <code class="javascript string">'纯属虚构'</code> </div> <div class="line number71 index70 alt2"> <code class="javascript plain">　　},</code> </div> <div class="line number72 index71 alt1"> <code class="javascript plain">　　tooltip : {</code> </div> <div class="line number73 index72 alt2"> <code class="javascript plain">　　　　trigger: </code> <code class="javascript string">'axis'</code> </div> <div class="line number74 index73 alt1"> <code class="javascript plain">　　},</code> </div> <div class="line number75 index74 alt2"> <code class="javascript plain">　　legend: {</code> </div> <div class="line number76 index75 alt1"> <code class="javascript plain">　　　　data:[</code> <code class="javascript string">'最高气温'</code> <code class="javascript plain">,</code> <code class="javascript string">'最低气温'</code> <code class="javascript plain">]</code> </div> <div class="line number77 index76 alt2"> <code class="javascript plain">　　},</code> </div> <div class="line number78 index77 alt1"> <code class="javascript plain">　　toolbox: {</code> </div> <div class="line number79 index78 alt2"> <code class="javascript plain">　　　　show : </code> <code class="javascript keyword">true</code> <code class="javascript plain">,</code> </div> <div class="line number80 index79 alt1"> <code class="javascript plain">　　　　feature : {</code> </div> <div class="line number81 index80 alt2"> <code class="javascript plain">　　　　　　mark : {show: </code> <code class="javascript keyword">true</code> <code class="javascript plain">},</code> </div> <div class="line number82 index81 alt1"> <code class="javascript plain">　　　　　　dataView : {show: </code> <code class="javascript keyword">true</code> <code class="javascript plain">, readOnly: </code> <code class="javascript keyword">false</code> <code class="javascript plain">},</code> </div> <div class="line number83 index82 alt2"> <code class="javascript plain">　　　　　　magicType : {show: </code> <code class="javascript keyword">true</code> <code class="javascript plain">, type: [</code> <code class="javascript string">'line'</code> <code class="javascript plain">, </code> <code class="javascript string">'bar'</code> <code class="javascript plain">]},</code> </div> <div class="line number84 index83 alt1"> <code class="javascript plain">　　　　　　restore : {show: </code> <code class="javascript keyword">true</code> <code class="javascript plain">},</code> </div> <div class="line number85 index84 alt2"> <code class="javascript plain">　　　　　　saveAsImage : {show: </code> <code class="javascript keyword">true</code> <code class="javascript plain">}</code> </div> <div class="line number86 index85 alt1"> <code class="javascript plain">　　　　}</code> </div> <div class="line number87 index86 alt2"> <code class="javascript plain">　　},</code> </div> <div class="line number88 index87 alt1"> <code class="javascript plain">　　calculable : </code> <code class="javascript keyword">true</code> <code class="javascript plain">,</code> </div> <div class="line number89 index88 alt2"> <code class="javascript plain">　　xAxis : [</code> </div> <div class="line number90 index89 alt1"> <code class="javascript plain">　　　　{</code> </div> <div class="line number91 index90 alt2"> <code class="javascript plain">　　　　　　type : </code> <code class="javascript string">'category'</code> <code class="javascript plain">,</code> </div> <div class="line number92 index91 alt1"> <code class="javascript plain">　　　　　　boundaryGap : </code> <code class="javascript keyword">false</code> <code class="javascript plain">,</code> </div> <div class="line number93 index92 alt2"> <code class="javascript plain">　　　　　　data : [</code> <code class="javascript string">'周一'</code> <code class="javascript plain">,</code> <code class="javascript string">'周二'</code> <code class="javascript plain">,</code> <code class="javascript string">'周三'</code> <code class="javascript plain">,</code> <code class="javascript string">'周四'</code> <code class="javascript plain">,</code> <code class="javascript string">'周五'</code> <code class="javascript plain">,</code> <code class="javascript string">'周六'</code> <code class="javascript plain">,</code> <code class="javascript string">'周日'</code> <code class="javascript plain">]</code> </div> <div class="line number94 index93 alt1"> <code class="javascript plain">　　　　}</code> </div> <div class="line number95 index94 alt2"> <code class="javascript plain">　　],</code> </div> <div class="line number96 index95 alt1"> <code class="javascript plain">　　yAxis : [</code> </div> <div class="line number97 index96 alt2"> <code class="javascript plain">　　　　{</code> </div> <div class="line number98 index97 alt1"> <code class="javascript plain">　　　　　　type : </code> <code class="javascript string">'value'</code> <code class="javascript plain">,</code> </div> <div class="line number99 index98 alt2"> <code class="javascript plain">　　　　　　axisLabel : {</code> </div> <div class="line number100 index99 alt1"> <code class="javascript plain">　　　　　　　　formatter: </code> <code class="javascript string">'{value} °C'</code> </div> <div class="line number101 index100 alt2"> <code class="javascript plain">　　　　　　}</code> </div> <div class="line number102 index101 alt1"> <code class="javascript plain">　　　　}</code> </div> <div class="line number103 index102 alt2"> <code class="javascript plain">　　],</code> </div> <div class="line number104 index103 alt1"> <code class="javascript plain">　　series : [</code> </div> <div class="line number105 index104 alt2"> <code class="javascript plain">　　　　{</code> </div> <div class="line number106 index105 alt1"> <code class="javascript plain">　　　　　　name:</code> <code class="javascript string">'最高气温'</code> <code class="javascript plain">,</code> </div> <div class="line number107 index106 alt2"> <code class="javascript plain">　　　　　　type:</code> <code class="javascript string">'line'</code> <code class="javascript plain">,</code> </div> <div class="line number108 index107 alt1"> <code class="javascript plain">　　　　　　data:[11, 11, 15, 13, 12, 13, 10],</code> </div> <div class="line number109 index108 alt2"> <code class="javascript plain">　　　　　　markPoint : {</code> </div> <div class="line number110 index109 alt1"> <code class="javascript plain">　　　　　　　　data : [</code> </div> <div class="line number111 index110 alt2"> <code class="javascript plain">　　　　　　　　　　{type : </code> <code class="javascript string">'max'</code> <code class="javascript plain">, name: </code> <code class="javascript string">'最大值'</code> <code class="javascript plain">},</code> </div> <div class="line number112 index111 alt1"> <code class="javascript plain">　　　　　　　　　　{type : </code> <code class="javascript string">'min'</code> <code class="javascript plain">, name: </code> <code class="javascript string">'最小值'</code> <code class="javascript plain">}</code> </div> <div class="line number113 index112 alt2"> <code class="javascript plain">　　　　　　　　]</code> </div> <div class="line number114 index113 alt1"> <code class="javascript plain">　　　　　　},</code> </div> <div class="line number115 index114 alt2"> <code class="javascript plain">　　　　　　markLine : {</code> </div> <div class="line number116 index115 alt1"> <code class="javascript plain">　　　　　　　　data : [</code> </div> <div class="line number117 index116 alt2"> <code class="javascript plain">　　　　　　　　　　{type : </code> <code class="javascript string">'average'</code> <code class="javascript plain">, name: </code> <code class="javascript string">'平均值'</code> <code class="javascript plain">}</code> </div> <div class="line number118 index117 alt1"> <code class="javascript plain">　　　　　　　　]</code> </div> <div class="line number119 index118 alt2"> <code class="javascript plain">　　　　　　}</code> </div> <div class="line number120 index119 alt1"> <code class="javascript plain">　　　　},</code> </div> <div class="line number121 index120 alt2"> <code class="javascript plain">　　　　{</code> </div> <div class="line number122 index121 alt1"> <code class="javascript plain">　　　　　　name:</code> <code class="javascript string">'最低气温'</code> <code class="javascript plain">,</code> </div> <div class="line number123 index122 alt2"> <code class="javascript plain">　　　　　　type:</code> <code class="javascript string">'line'</code> <code class="javascript plain">,</code> </div> <div class="line number124 index123 alt1"> <code class="javascript plain">　　　　　　data:[1, -2, 2, 5, 3, 2, 0],</code> </div> <div class="line number125 index124 alt2"> <code class="javascript plain">　　　　　　markPoint : {</code> </div> <div class="line number126 index125 alt1"> <code class="javascript plain">　　　　　　　　data : [</code> </div> <div class="line number127 index126 alt2"> <code class="javascript plain">　　　　　　　　　　{name : </code> <code class="javascript string">'周最低'</code> <code class="javascript plain">, value : -2, xAxis: 1, yAxis: -1.5}</code> </div> <div class="line number128 index127 alt1"> <code class="javascript plain">　　　　　　　　]</code> </div> <div class="line number129 index128 alt2"> <code class="javascript plain">　　　　　　},</code> </div> <div class="line number130 index129 alt1"> <code class="javascript plain">　　　　　　markLine : {</code> </div> <div class="line number131 index130 alt2"> <code class="javascript plain">　　　　　　　　data : [</code> </div> <div class="line number132 index131 alt1"> <code class="javascript plain">　　　　　　　　　　{type : </code> <code class="javascript string">'average'</code> <code class="javascript plain">, name : </code> <code class="javascript string">'平均值'</code> <code class="javascript plain">}</code> </div> <div class="line number133 index132 alt2"> <code class="javascript plain">　　　　　　　　]</code> </div> <div class="line number134 index133 alt1"> <code class="javascript plain">　　　　　　}</code> </div> <div class="line number135 index134 alt2"> <code class="javascript plain">　　　　}</code> </div> <div class="line number136 index135 alt1"> <code class="javascript plain">　　] </code> </div> <div class="line number137 index136 alt2"> <code class="javascript plain">};</code> </div> <div class="line number138 index137 alt1"> <code class="javascript plain">myLineChart.setOption(option2,</code> <code class="javascript keyword">true</code> <code class="javascript plain">); </code> </div> <div class="line number139 index138 alt2"> <code class="javascript plain">}</code> </div> <div class="line number140 index139 alt1"> <code class="javascript plain">

 

补充：给图表绑定事件（以上面柱状图为例，绑定click事件）

/* 给柱状图绑定click事件 */
　 var ecConfig = require( 'echarts/config' );
　 function eConsole(param) {
　　　alert(param.value); 　　 // 弹出当前柱子的数值
　}
　myBarChart.on(ecConfig.EVENT.CLICK, eConsole);

这段代码加在 myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并，这行代码上面。

-----------------------------------------------------------------------------------------------------------------------------------------------

如下：

　　

　

转载于:https://www.cnblogs.com/hellman/p/8135071.html