Echarts

Posted by wantu on October 29, 2018

前言

  Echarts是我真正意义上接触最早的一种数据可视化工具。它是由百度开源出来的,是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖另一个也是该团队自主研发的轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表,它对许多图表提供了封装好的组件。用户可以很轻松的使用它们。但是正是由于它封装程度比较高,所以很多个性化的设置是很难做到的。如果你想要有一些自己的封装,那么请尝试使用D3.js,D3的API比较底层,学习成本比较高,望君留意。 ECharts
D3js

正文

我要怎么开始呢?

因为是国人开发的所以开发文档必须有中文格式的。这点对于英文差的小伙伴那是大大的好啊(本人英文很不好)。Echarts在其官网提供了大量的实例。新手可以通过实例很快的上手。那么传送门

使用

样例展示 查询执行路径图 引入相关的js文件

1
 <script src="/lib/echarts/echarts.min.js"></script>

在前端页面上预留一个div用以展示相关的图表

1
<div id="chart" style="height: 400px;width: 100%;padding: 5px;"></div>

初始化

1
2
 var c1 = echarts.init(document.getElementById('chart1'));
 var c1_option;

获取数据来源并设置option 这一步数据获取是通过ajax来获取的。原则上后段要进行相关的数据的组装工作。前端拿到相关的series属性值直接放上去就能使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
//这是一个较全的例子
var month_legend = ['上年同期','上期数据','当期数据'];
$.ajax({
    url: "/xxxx",
    type: "post",
    data: {
        //请求参数
    },
    success: function (data) {
        //初始化echarts
        var c1 = echarts.init(document.getElementById('chart1'));
        var c1_option;

        if (data.tag == 'success') {
            //渲染Echarts
            function draw_echar1(data) {
                //单个柱状图中间字体的设置
                var seriesLabel = {
                        normal: {
                            show: true,
                            textBorderColor: '#33',
                            textBorderWidth: 2
                        }
                    }
                //图表的设置
                c1_option = {
                        title: {
                            text: '天气统计'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['北京', '上海', '深圳']
                        },
                        grid: {
                            left: 100
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '天数',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            inverse: true,
                            data: ['晴天', '多云', '下雨']
                        },
                        //一般来说series属性直接拿后台组装的数据前端不负责数据的组装
                        series: [
                            {
                                name: '北京',
                                type: 'bar',
                                data: [165, 170, 30],
                                label: seriesLabel
                            },
                            {
                                name: '上海',
                                type: 'bar',
                                label: seriesLabel,
                                data: [150, 105, 110]
                            },
                            {
                                name: '深圳',
                                type: 'bar',
                                label: seriesLabel,
                                data: [220, 82, 63]
                            }
                        ]
                };
                //渲染Echarts
                c1.setOption(c1_option);
}}}});

后端数据格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[
    {
        name: '北京',
        type: 'bar',
        data: [165, 170, 30],
        label: seriesLabel
    },
    {
        name: '上海',
        type: 'bar',
        label: seriesLabel,
        data: [150, 105, 110]
    },
    {
        name: '深圳',
        type: 'bar',
        label: seriesLabel,
        data: [220, 82, 63]
    }
]

渲染Echarts

1
draw_echar1(data)

小结

1、echarts封装的很不错,所以很多设置可能只是一个属性的设置,请多在官方实例中进行尝试修改,并记住常用的属性设置。

常用属性

后续继续补充

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
一些常用的属性设置:
xAxis//x轴设置
yAxis//y轴设置 
    type:类型
    min:最小值
    axisLabel:对y轴的单位进行设置 (例子中将单位元设置为单位为万元)
        eg:formatter: function (value) {
                        return Math.round(value/10000)+'万';
                    }
toolbox//工具设置其中支持将展示的图表保存成图片
title//图表标题
legend//图表头部索引
series//展示设置
    type//图表类型 常见pie饼图bar柱状图
    lable//图内显示设置
    data//实际数据

2、option中的设置就是对图表的一些属性的设置。请多关注option。
对这echats的实例多多练习几次你就会很快掌握它。
我个人觉得一些图标的数据组装过程还是比较复杂的。因为前端一般会让后端把series组装好。多看多练。如果条形图,饼图,柱状图都联系过了感觉很轻松。那么请尝试实现这个图表,可以考虑把x,y轴进行转一下。 所有的数据要写活来哦。
demo