图表入门--echarts篇

1. 图表(echarts)--数据可视化

与传统形式中用表格或文档展现数据的方式相比,可视化能将数据以更加直观的方式展现出来,使数据更加客观、更具说服力。

下面是最常见的一种形式:


股票市场

数据可视化并不是简单的把数据变成图表。而是以数据为视角,看待世界。换句话说,数据可视化的客体是数据,但我们想要的其实是——数据视觉,以数据为工具,以可视化为手段,目的是描述真实情况,发现规律。

可视化定义:数据可视化,是关于数据视觉表现形式的科学技术研究。其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来的信息,包括相应信息单位的各种属性和变量。 它是一个处于不断演变之中的概念,其边界在不断地扩大。主要指的是技术上较为高级的技术方法,而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面,通过表达、建模以及对立体、表面、属性以及动画的显示,对数据加以可视化解释。

2. echarts介绍

ECharts是由百度团队开发的,可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender,是一个纯JavaScript的图表库,兼容(IE8/9/10/11,Chrome,Firefox,Safari等)主流浏览器,可以运行在PC和移动设备上。

3. 能实现哪些图表

雷达图
饼图
柱状图
折线图
k线图

http://echarts.baidu.com/examples/

4. 在 webpack 中使用 ECharts

Webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts

你可以使用如下命令通过 npm 安装 ECharts:
npm install echarts --save

5. 引入 ECharts

通过 npm 上安装的 ECharts会放在node_modules目录下。
// 使用 require('echarts') 得到的是已经加载了所有图表和组件的 ECharts 包
var echarts = require('echarts');

我们可以按需引入:

var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});
5. 绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init方法初始化一个 echarts实例并通过 setOption方法生成一个简单的柱状图。

6.组件

除了图表外 ECharts 中,提供了很多交互组件。例如:

图例组件legend、标题组件 title、视觉映射组件visualMap、数据区域缩放组件dataZoom、时间线组件timeline等

// echarts的核心部分几乎都在这个option配置中
// 来个例子:
var option = {
            color: ['#90ed7d','#7cb5ec'],  // 色系
            tooltip: { //提示框组件
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: { // 图例组件
                orient: 'horizontal',
                icon: "circle",
                itemWidth: 10,
                itemHeight: 10,
                data: data.legend
            },
            barGap: '0%',
            grid: { //直角坐标系网格
                left: '3%',
                right: '6%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: { //直角坐标系 grid 中的 x 轴
                type: 'value',
                position: 'top',
                boundaryGap: [0, 0.01],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                minInterval: 1
            },
            yAxis: { // 直角坐标系 grid 中的 y 轴
                type: 'category',
                data: data.names,
                axisLine: {
                    lineStyle: {
                        color: '#ccd6eb',
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#ccd6eb',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#000'
                    },
                    interval: data.names.length > 20 ? 1 : 0,
                    formatter: function (value) { // 对y轴上的刻度值的显示进行处理
                        var max_num = value.match(/[^\x00-\xff]/) == null ? 8 : 4
                        if (value.length > max_num){
                            return value.substr(0,max_num-1) + '...'
                        }
                        else {
                            return value
                        }
                    },
                },
                inverse: true //数据排序反转
            },
            series: [ //每个系列通过 type 决定自己的图表类型
                {
                    name: '安排记录数',
                    type: 'bar', // 图表类型
                    data: data.plan,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: (params)=>{
                                    if (params.value == 0) return ''
                                    return params.value
                                },
                                position: 'right',
                                textStyle: {
                                    color: 'black',
                                    fontSize: 10
                                }
                            },
                            shadowBlur: {
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                shadowBlur: 20
                            }
                        }
                    }
                },
                {
                    name: '已完成记录数',
                    type: 'bar',
                    data: data.complete,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: (params)=>{
                                    if (params.value == 0) return ''
                                    return params.value
                                },
                                position: 'right',
                                textStyle: {
                                    color: 'black',
                                    fontSize: 10
                                }
                            },
                            shadowBlur: {
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                shadowBlur: 20
                            }
                        }
                    }
                }
            ]
        };
7.事件

在 ECharts 中主要通过 on 方法添加事件处理函数
示例:

myChart.on('click', function (params) {
    console.log(params);
});

鼠标事件包括: click,dblclickmousedownmouseupmouseovermouseoutglobaloutcontextmenu
所有的鼠标事件包含参数 params,这是一个包含点击图形的数据信息的对象。(移动端不支持双击事件dblclick,自己写方法代替)

8.echarts的vue插件 v-charts的优缺点

正如v-charts的官方介绍:

在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。

v-charts在方便地生成图表的同时,限制了图表的结构。对series部分尤其是data数据支持的不好,导致生成的图表僵化,很难进行扩展。 app报表第一版使用了这个组件,但后来的版本不再使用它。

9.highcharts

特点:是个付费的工具,色系看上去更协调,个人或公司内部使用倒可以,个人认为highcharts看上去更舒服吧。


部分柱状图
其他图表
echarts柱状图

其他工具:比如D3,连色盲图都可以生成的,但功能越多一般也越复杂https://beta.observablehq.com/@mbostock/exoplanets
官网:https://d3js.org/

推荐阅读更多精彩内容