eCharts

在线使用

  1. 导入echarts.min.js

    1
    2
    3
    4
    5
    6
    7
    8
    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8">
        <!-- 引入 ECharts 文件 -->
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
    </head>
    </html>

  2. 定义容器

    ECharts需要指定画板的大小，不然会出现错误，且无法呈现效果。

    这是与G2Plot不同之处，G2Plot是在图表参数内部进行定义的。

    1
    2
    3
    4
    <body>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 100%;height:360px;"></div>
    </body>

  3. 绘图

    ECharts需要自己对元素进行初始化处理echarts.init()，图表参数基本和G2Plot一样，这使得我更加容易上手。

    • 初始化echarts实例 echarts.init()
      • 网页可以创建多个 echarts实例
      • echarts实例可以创建多个图表和坐标系等
      • 每个 echarts实例独占一个 DOM 节点
    • 创建图表参数（图表类型在里面声明）var option = {}
      • 数据
      • 数据如何映射成图形
      • 交互行为
    • 图表参数载入echarts实例 myChart.setOption(option)
    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
    <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]
            }]
        };
        // 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
        myChart.setOption(option);
    </script>

效果显示

特性

  • 动态叙事
    • 动态排序图 bar-racing line-recing
    • 自定义系列动画 morph separate combine
  • 交互能力
    • 状态管理 blur selectchanged()
  • 开发体验
    • 国际化

详情请看官网

不再推荐使用的API

  • 图形元素transform

    原先利用数组进行参数声明，现在变成了单个参数。

    position: [number, number] 改为 x: number / y: number。

    scale: [number, number] 改为 scaleX: number / scaleY: number。

  • Text 相关属性

    原先一些图形元素文本变成了textConfig的属性。

    textPosition => textConfig.position。

    原先style|style.rich.?的属性去掉了text前缀。

    textFill => fill 。

详情请看官网

基础概念

series

一组数值以及他们映射成的图。

  • 一组数值 series.data
  • 图表类型 series.type

通过数据集获取数据

组件

组件的定位

  • 类css 的绝对定位 left right width top bottom height
  • 中心半径定位 center
  • 其他定位（少数组件）

坐标系

一个 echarts 实例中，可以有多个 grid，每个 grid 分别有 xAxis、yAxis，他们使用 xAxisIndex、yAxisIndex、gridIndex 来指定引用关系。

详情请看官网

样式与主题简介

ECharts 中有些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，还可以设置鼠标 hover 时候的样式以及一些全局样式itemStyle，series 也可以进行单个图表样式设置。

关于颜色主题，可以通过【主题编辑器】编辑自己的主题，并下载配置好的主题文件JSON JS。

1
2
3
4
5
6
7
8
9
10
11
// 内置 ECharts 的主题导入
var echart = echarts.ini(dom, 'dark');
// 自己配置的主题 json
$.getJSON('xxx/xxx/vintage.json', function (themeJSON){
    echarts.registerTheme('vintage', JSON.parse(themeJSON))
    var echart = echarts.ini(dom, 'vintage');
})
// 自己配置的主题 js
// 先从 HTML 引入 vintage.js 文件后
var chart = echarts.init(dom, 'vintage');
// 特别说明 vintage 为你的主题文件名

通过 visualMap 组件指定数据到颜色、图形尺寸的映射规则，详见 数据的视觉映射。

详情请看官网

异步数据加载和更新

通过jQuery等工具异步获取数据后，通过 setOption 填入数据和配置项，这和G2一样。

1
2
3
4
5
$.get('data.json').done(function (data) {
    myChart.setOption({
        // 配置图表信息
    });
});

还有一种方法，先设置完其他的样式，显示一个空的直角坐标轴，然后获取数据后填入数据，而我比较喜欢这种方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
myChart.setOption({
    // data 为空数组
});
$.get('data.json').done(function (data) {
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

1
2
3
4
5
myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});
  • 支持数据加载动画
  • 支持数据动态更新

详情前看官网

事件和行为

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

通过 on() 绑定触发事件，事件名称对应 DOM 事件名称，均为小写的字符串。

1
2
3
4
myChart.on('click', function (params) {
    // 控制台打印数据的名称
    console.log(params.name);
});
  • 鼠标事件的处理
  • 组件交互的行为事件
  • 代码触发ECharts中组件的行为
  • 监听“空白处”的事件

2D图表

类型 描述 图例
line 用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。 【折线图】
bar 一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。 【柱状图】
pie 用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。 【饼图】
scatter 可以用来展现数据的 x，y 之间的关系，如果数据项有多个维度，其它维度的值可以通过不同大小的 symbol 展现成气泡图，也可以用颜色来表现。这些可以配合 visualMap 组件完成。可以应用在直角坐标系，极坐标系，地理坐标系上。 【散点图】
effectScatter 带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。 【气泡图】
radar 主要用于表现多变量的数据。 【雷达图】
tree 主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树，和右子树。 【树图】
treemap 一种常见的表达『层级数据』『树状数据』的可视化形式。它主要用面积的方式，便于突出展现出『树』的各层级中重要的节点。 【矩阵树图】
sunburst 由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。 【旭日图】
boxplot 一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。 【盒须图】
candlestick K线图。 【K线图】
heatmap 主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用。可以应用在直角坐标系以及地理坐标系上，这两个坐标系上的表现形式相差很大，直角坐标系上必须要使用两个类目轴。 【热力图】
map 主要用于地理区域数据的可视化，配合 visualMap 组件用于展示不同区域的人口分布密度等数据。 【地图】
parallel 一种常用的可视化高维数据的图表。 【平行坐标系】
lines 用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。 【路径图】
graph 用于展现节点以及节点之间的关系数据。 【关系图】
sankey 用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。 【桑基图】
funnel 用于展现数据经过筛选、过滤等流程处理后发生的数据变化 【漏斗图】
gauge 用于展现关键指标数据 【仪表图】
pictorialBar 可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。 【象形柱图】
themeRiver 一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。 【主题河流】
custom 自定义系列可以自定义系列中的图形元素渲染。从而能扩展出不同的图表。同时，echarts 会统一管理图形的创建删除、动画、与其他组件（如 dataZoom、visualMap）的联动，使开发者不必纠结这些细节。 【自定义系列】

简单来说，ECharts可以监听事件和统一处理数据的个性化样式图表。当然，他还开放了3D图表。

基本参数

参数 描述
title 标题组件
legend 图例组件
xAxis 直角坐标系 grid 中的 x 轴
yAxis 直角坐标系 grid 中的 y 轴
dataZoom 用于区域缩放
tooltip 提示框组件
toolbox 工具栏
brush 区域选择组件
dataset 数据集
series 图例系列
color 调色盘颜色列表
textStyle 全局字体样式

image-20210506144158982