数据可视化-Echarts入门

2021-05-16

数据可视化

Word count: 1.8k | Reading time≈ 7 min

学习Echarts来制作数据可视化要用的图表

介绍

Echarts是百度开源的基于JavaScript的可视化图表库，里面有很多很好看的图表可以用来可视化使用，学会一个，其他的触类旁通

下载

https://echarts.apache.org/zh/download.html，从Github下载编译产物

可以看到里面有很多版本的js，入门的话最小版(echarts.min.js)够用了

或者根据需要定制下载，这样可以最小化JS，以加快网页加载速度

快速上手-参考官方文档

引入js文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

绘制图表

绘制图表四步走

DOM

绘图前要准备一个具备高宽的DOM容器来存放图表

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

instance

基于准备好的dom，通过echarts.init方法初始化一个echarts实例

1	var myChart = echarts.init(document.getElementById('main'));

option

指定图表的配置项和数据

var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

setOption

最后通过setOption方法生成图表

1	myChart.setOption(option);

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

应用实例

我下载了echarts.min.js到本地，然后放到douban_flask项目的/static/assets/js文件夹下，然后在templates文件夹下新建了test文件夹，在test中把上面的代码复制到testEcharts.html，最后在app.py里写一个路由

成功显示图表：

ECharts基础概念-参考官方文档

echarts实例

一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。

系列(series)

系列是指一组数值以及他们映射成的图，一个系列包含的要素有：一组数值、图表类型(series.type)、以及其他的关于这些数据如何映射成图的参数

系列类型(series.type)有line(折线图)、bar(柱状图)、pie(饼图)等等

如图所示，option里声明了三个系列：pie、line、bar，每个系列都有各自的数据(series.data)

组件(component)

echarts中各种内容被抽象为组件，比如：xAxis(直角坐标系X轴)、yAxis(直角坐标系Y轴)、dataZoom(数据缩放组件)、series(系列)等等。系列也是一种组件，系列是专门绘制”图”的组件

用option描述图表

option 表述了：数据、数据如何映射成图形、交互行为。

// 创建 echarts 实例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);

// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
var option = {
    // option 每个属性是一类组件。
    legend: {...},
    grid: {...},
    tooltip: {...},
    toolbox: {...},
    dataZoom: {...},
    visualMap: {...},
    // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
    xAxis: [
        // 数组每项表示一个组件实例，用 type 描述“子类型”。
        {type: 'category', ...},
        {type: 'category', ...},
        {type: 'value', ...}
    ],
    yAxis: [{...}, {...}],
    // 这里有多个系列，也是构成一个数组。
    series: [
        // 每个系列，也有 type 描述“子类型”，即“图表类型”。
        {type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
        {type: 'line', data: [2231, 1234, 552, ... ]},
        {type: 'line', data: [[4, 51], [8, 12], ... ]}
    }]
};

// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
chart.setOption(option);

组件定位

不同的组件、系列，常有不同的定位

类CSS的绝对定位

多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。他们的值可以是绝对数值(像素)或者是基于容器高宽的百分比

如下图的例子，对 grid 组件（也就是直角坐标系的底板）设置 left、right、height、bottom 达到的效果。

left right width 是一组（横向）、top bottom height 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。

中心半径定位

少数圆形的组件或系列，可以使用“中心半径定位”，例如，pie（饼图）、sunburst（旭日图）、polar（极坐标系）。

中心半径定位，往往依据 center（中心）、radius（半径）来决定位置。

其他定位

少数组件和系列可能有自己的特殊的定位方式。在他们的文档中会有说明。

坐标系

很多系列需要运行在坐标系上，坐标系用于布局这些图，以及显示数据的刻度等等。echarts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系等

一个坐标系，可能由多个组件协作而成。比如直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。

参考

https://www.bilibili.com/video/BV12E411A7ZQ?p=34

https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

https://echarts.apache.org/zh/tutorial.html#ECharts%20%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E6%A6%82%E8%A7%88

https://www.bilibili.com/video/BV12E411A7ZQ?p=35

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.