ECharts的简单使用过程

来源：互联网发布：windows无法停止dhcp 编辑：程序博客网时间：2024/05/16 17:42

网页中经常要使用图表，以前使用的是highcharts插件，现在发现echarts使用起来和highcharts差不多，但是个人感觉echarts更酷炫，以下是echarts的使用过程，其实highcharts使用方法也跟这个差不多，几乎一样。

1、使用基础图形引入js

引入<script type="text/javascript" src="/js/echarts.min.js"></script>

2、需要显示组件，如图例，引入组件

还需要引入<script type="text/javascript" src="/js/echarts-all.js"></script>

3、画布：必须指定高度，否则不会显示

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

示例http://echarts.baidu.com/examples.html

首页http://echarts.baidu.com/

from: http://www.cnblogs.com/itechpark/p/yinzei_js_echarts.html

0 0