echarts | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

什么是echarts

echarts.js是百度团队推出的一款用于图表可视化的插件，用于以图表的形式展现数据，功能强大，上手简单，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

echarts配置步骤

1.创建页面，引入echarts.js

<!DOCTYPE html>
<html lang="en">

<head>
    
    <title>echarts</title>
    <script src="./script/echart.js"></script>
    <script src="./script/script.js"></script>
</head>

<body>
</body>

</html>

2.为echarts准备容器

<style>
        .container {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            padding: 20px;
        }
</style>
<body>
	<div class = "container">
		
	</div>
</body>

3.设置配置信息

let options = {
        title: {
            text: '第一个 ECharts 实例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    }

4.将配置信息设置到echarts实例中

let myChart = echarts.init(document.querySeletor('.container'))
myChart.setOpiton(options)

配置信息的层级

在echarts的自定义配置信息中，设置图形信息的样式分为三个层级，全局、系列和数据。例如上述代码中，options就是位于全局层级下，series就是位于系列层级下，series中的data位于数据层级下

绘制饼图

和刚才绘制的柱状图相比，饼图的数据格式更加简单，它的数值是一维的，所以不需要给出类目，饼图不在直角坐标系上实现，自然也不需要 xAxis 和 yAxis。

关于data

ECharts 中的数据项既可以只设成数值，也可以设为一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见 data 文档。比如上述代码中的 data 属性值是一个包含 name 和 value 属性的对象，而不像第一节里那样每一项都是单个数值。 ECharts 中的饼图也支持通过设置 roseType 显示成南丁格尔图，操作如下：

roseType: 'angle'

在南丁格尔图中，通过半径表示数据的大小

配置阴影

我们可以为图表其添加一些通用的样式，例如阴影、透明度、颜色、边框颜色、边框宽度等。 Echarts 的这些样式通常都是在系列的 itemStyle 中设置的。下面来看看 Echarts 中阴影样式的配置：

itemStyle: {
    normal: {
        // 阴影的大小
        shadowBlur: 200,
        // 阴影水平方向上的偏移
        shadowOffsetX: 0,
        // 阴影垂直方向上的偏移
        shadowOffsetY: 0,
        // 阴影颜色
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

在 itemStyle 中有 normal 和 emphasis 两个选项，normal 选项显示的是正常展示下的样式，emphasis 是当鼠标 hover 时候的高亮样式。

设置深色背景和浅色标签

接下来我们通过修改背景颜色和文本颜色来把上述实例的主题变为深色主题。

因为背景色是全局的，所以直接在 option 下设置 backgroundColor 就可以了，具体操作如下：

setOption({
    backgroundColor: '#2c343c'
})

背景色设置完成后，同样将文本的样式设置为全局的 textStyle，具体操作如下：

setOption({
    textStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    }
})

如果不想设置全局的文本样式，也可以分别对每个系列进行设置，每个系列的文本设置在 label.normal.textStyle，操作如下：

label: {
    normal: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}

echarts实现异步数据加载和更新

在上面的例子中是在初始化后的 setOption 中直接填入数据的，但大部分的时候我们需要将数据异步加载后再填入。那么怎么实现？

ECharts 中实现异步数据的更新的操作不难，在初始化图表后的任何时间可以异步获取数据后通过 setOption 填入数据和配置项即可，操作如下：

function addDataToChart(options) {
        $.ajax({
            type: 'GET',
            url: './script/data.json',
            success: function (res) {
                options.title.text = res.title;
                options.series.data = res.value;
                options.xAxis.data = res.xAxis;
                barChart.setOption(options);
            }
        })
    }

Echarts 设置 loading 动画

有时候由于各种原因，数据的加载会需要较多的时间，这样一个空白的直角坐标系会让用户认为出现 bug 了，为了避免这种错觉，我们需要使用 loading 动画给用户一些提示。

利用 Echarts 提供的加载动画，我们通过调用 showLoading 方法显示加载动画，当数据加载完成后再调用 hideLoading 方法将加载动画隐藏。

ECharts在图表中加入交互组件

ECharts 有很多的交互组件，例如：

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

这里我们不一一讲解每个组件的加入，只通过介绍加入数据区域缩放组件 dataZoom 就可以掌握 Echarts 交互组件的加入操作。

介绍 Echarts 数据区域缩放组件（dataZoom）

数据可视化的基本交互需求是：概览数据整体，按照需要关注数据细节。 dataZoom 组件完美的在直角坐标系（grid）、极坐标系（polar）中实现了这一功能。

接下来我们来实现在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，方法很简单：再加上一个 inside 型的 dataZoom 组件即可。具体的实现是直接在上面的 option.dataZoom 中增加：

option = {
    ...,
    dataZoom: [
        {   // 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        },
        {   // 这个dataZoom组件，也控制x轴。
            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        }
    ],
    ...
}

如果想 y 轴也能够缩放，那么只需要在y轴也加上组件

ECharts中的事件和行为

用户在操作 Echarts 的图表时会触发相应的事件，这些事件由开发者监听，然后回调函数做出相应的处理，可以弹出一个对话框、跳转到一个地址或者做数据下钻等等。

ECharts 3 中绑定事件跟 Echarts 2 一样都是通过 on 方法，不同的是事件名称更加简单。

ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例：

myChart.on('click', function (params) {
    // 控制台打印数据的名称
    console.log(params.name);
});

在 ECharts 中有两种事件类型：

一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件；
还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 'legendselectchanged' 事件

Echarts 鼠标事件的处理

ECharts 支持常规的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。

所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，格式如下：

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

Echarts 组件交互的行为事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件。

常用的事件和事件对应参数在event 文档中有列出。

下面是监听一个图例开关的示例：