1.在ECharts官網(wǎng)，下載ECharts的源碼和示例文件。

2.解壓縮下載下來的Echars壓縮包，找到doc\example\www\echartsjs目錄，將里面的js文件全部取出來，放到項(xiàng)目js目錄文件夾下。

3.在頁面的頂端引入模塊加載器esl.js。

<script src="js/esl.js"></script>

4.為ECharts準(zhǔn)備一個(gè)具備大小的Dom。

<div id="chartArea" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

5.為模塊加載器配置echarts的路徑，從當(dāng)前頁面鏈接到echarts.js，定義所需圖表路徑。

require.config({paths:{echarts:'./js/echarts','echarts/chart/bar' : './js/echarts','echarts/chart/line': './js/echarts'}});

6.動(dòng)態(tài)加載echarts然后在回調(diào)函數(shù)中開始使用，注意保持按需加載結(jié)構(gòu)定義圖表路徑

require(['echarts','echarts/chart/bar','echarts/chart/line'],function(ec) {var myChart = ec.init(document.getElementById('main'));var option = {tooltip : {trigger: 'axis'},legend: {data:['蒸發(fā)量','降水量']},toolbox: {show : true,feature : {mark : true,dataView : {readOnly: false},magicType:['line', 'bar'],restore : true,saveAsImage : true}},calculable : true,xAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis : [{type : 'value',splitArea : {show : true}}],series : [{name:'蒸發(fā)量',type:'bar',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:'降水量',type:'bar',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]}]};myChart.setOption(option);});

7.效果圖

8.注意事項(xiàng)

　　在實(shí)際項(xiàng)目中，ECharts圖標(biāo)的橫坐標(biāo)和縱坐標(biāo)，均是在后臺返回的數(shù)據(jù)中的得到的。在前端動(dòng)態(tài)設(shè)置data數(shù)值時(shí)，data的類型必須是數(shù)組，EChars才能展現(xiàn)出圖標(biāo)的效果來。

轉(zhuǎn)載于:https://blog.51cto.com/favccxx/1294417

總結(jié)

以上是生活随笔為你收集整理的手把手教你使用ECharts绘制可视化图表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。