首页 > 代码库 > ECharts的简单使用过程
ECharts的简单使用过程
网页中经常要使用图表，以前使用的是highcharts插件，现在发现echarts使用起来和highcharts差不多，但是个人感觉echarts更酷炫，以下是echarts的使用过程，其实highcharts使用方法也跟这个差不多，几乎一样。
1、使用基础图形引入js
<script type="text/javascript" src="http://www.mamicode.com/js/jBox/jquery-1.4.2.min.js"></script>
引入<script type="text/javascript" src="http://www.mamicode.com/js/echarts.min.js"></script>
2、需要显示组件，如图例，引入组件
还需要引入<script type="text/javascript" src="http://www.mamicode.com/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 = http://www.mamicode.com/xAxisDataSingle;
option.series = ySeriesSingle;
option.legend.data = http://www.mamicode.com/[];
重新赋值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/
仅供参考，不足之处还请见谅，欢迎指正！转载请标明出处。如有疑问，欢迎评论或者联系我邮箱1034570286@qq.com
ECharts的简单使用过程
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。