网页中经常要使用图表，以前使用的是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
仅供参考，不足之处还请见谅，欢迎指正！转载请标明出处。如有疑问，欢迎评论或者联系我邮箱1034570286@qq.com