第一步:使用基础图形引入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>
第二步:需要显示组件，如图例，引入组件
还需要引入<script type=”text/javascript” src=”/js/echarts-all.js”></script>
第三步:画布：必须指定高度，否则不会显示
<div class=”Chart” id=”Chart” style=”height: 500px;”></div>
第四步:使用，定义、显示
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);
第五步:动态创建
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);
官方api
示例：http://echarts.baidu.com/examples.html
首页：http://echarts.baidu.com/
转载请注明来源网站:blog.ytso.com谢谢！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/15009.html