網(wǎng)頁中經(jīng)常要使用圖表，以前使用的是highcharts插件，現(xiàn)在發(fā)現(xiàn)echarts使用起來和highcharts差不多，但是個(gè)人感覺echarts更酷炫，以下是echarts的使用過程，其實(shí)highcharts使用方法也跟這個(gè)差不多，幾乎一樣。 1、使用基礎(chǔ)圖形引入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、畫布：必須指定高度，否則不會(huì)顯示 <div class="Chart" id="Chart" style="height: 500px;"></div> 4、使用，定義、顯示 var cjhq_chart ; var option = {title: {text: '均價(jià)（元/平米）'},tooltip : {trigger: 'axis'},legend: {data: legendData//數(shù)組 },grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type: 'category',boundaryGap : false,data : xAxisData//數(shù)組 }],yAxis : [{type : 'value'}],series : ySeries//數(shù)組 }; cjhq_chart = echarts.init(document.getElementById('Chart')); cjhq_chart.setOption(option, true);

?

5、動(dòng)態(tài)創(chuàng)建 option.title.text = obj.busName; option.xAxis[0].data = xAxisDataSingle; option.series = ySeriesSingle; option.legend.data = []; 重新賦值option里面的屬性的值，再創(chuàng)建面板顯示 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 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

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

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