網頁中經常要使用圖表，以前使用的是highcharts插件，現在發現echarts使用起來和highcharts差不多，但是個人感覺echarts更酷炫，以下是echarts的使用過程，其實highcharts使用方法也跟這個差不多，幾乎一樣。 1、使用基礎圖形引入js <script type="text/javascript" src="/js/jBox/jquery-1.4.2.min.js"></script> 引入<script type="text/javascript" src="/js/echarts.min.js"></script> 2、需要顯示組件，如圖例，引入組件 還需要引入<script type="text/javascript" src="/js/echarts-all.js"></script> 3、畫布：必須指定高度，否則不會顯示 <div class="Chart" id="Chart" style="height: 500px;"></div> 4、使用，定義、顯示 var cjhq_chart ; var option = {title: {text: '均價（元/平米）'},tooltip : {trigger: 'axis'},legend: {data: legendData//數組 },grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type: 'category',boundaryGap : false,data : xAxisData//數組 }],yAxis : [{type : 'value'}],series : ySeries//數組 }; cjhq_chart = echarts.init(document.getElementById('Chart')); cjhq_chart.setOption(option, true);

?

5、動態創建 option.title.text = obj.busName; option.xAxis[0].data = xAxisDataSingle; option.series = ySeriesSingle; option.legend.data = []; 重新賦值option里面的屬性的值，再創建面板顯示 var div = $('<div class="ChartSingle" id="'+obj.busCode+'" style="height: 300px;"></div>'); div.appendTo($('#single')); cjhq_chart = echarts.init(document.getElementById(obj.busCode)); cjhq_chart.setOption(option, true); 6、更多功能參考echarts api 示例http://echarts.baidu.com/examples.html 首頁http://echarts.baidu.com/
from:?http://www.cnblogs.com/itechpark/p/yinzei_js_echarts.html 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的ECharts的简单使用过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。