ECharts的简单使用过程
生活随笔
收集整理的這篇文章主要介紹了
ECharts的简单使用过程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
網頁中經常要使用圖表,以前使用的是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);
from:?http://www.cnblogs.com/itechpark/p/yinzei_js_echarts.html 《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀
?
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的简单使用过程的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Spring的AOP原理
- 下一篇: javascript时间格式format