ECharts的简单使用过程

Posted 2020-08-11 Ryan

网页中经常要使用图表，以前使用的是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

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

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

 

仅供参考，不足之处还请见谅，欢迎指正！转载请标明出处。如有疑问，欢迎评论或者联系我邮箱[email protected]