你的位置:首页 > Java教程

[Java教程]ECharts的简单使用过程


网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highcharts使用方法也跟这个差不多,几乎一样。
 
1、使用基础图形引入js
<script type="text/javascript" src="http://www.cnblogs.com//js/jBox/jquery-1.4.2.min.js"></script>
引入<script type="text/javascript" src="http://www.cnblogs.com//js/echarts.min.js"></script>
 
2、需要显示组件,如图例,引入组件
还需要引入<script type="text/javascript" src="http://www.cnblogs.com//js/echarts-all.js"></script>
 
3、画布:必须指定高度,否则不会显示
<div id="Chart" ></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 id="'+obj.busCode+'" ></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/
 
仅供参考,不足之处还请见谅,欢迎指正!转载请标明出处。如有疑问,欢迎评论或者联系我邮箱1034570286@qq.com