2021-04-19

前端

Echarts总结

文章目录

1. echarts与react开发要点
2. Component
1. 2.1. tooltip
  1. 2.1.0.1. tooltip. trigger = ‘item’
2.2. dataZoom数据缩放
2.3. legend 图例
2.4. grid 网格
2.5. visualMap
1. 2.5.1. inRange
2.6. axisPointer

3. 绘图举例

3.0.0.0.0.1. echarts自定义X/Y轴区间
3.0.0.0.0.2. echarts隐藏坐标轴轴线、刻度（axisTick）、标签
3.0.0.0.0.3. echarts如何展示无数据情况
3.0.0.0.0.4. 地图
3.0.0.0.0.5. 折线图(line)
3.0.0.0.0.6. 面积图
3.0.0.0.0.7. 折线图堆叠
3.0.0.0.0.8. 堆叠面积图
3.0.0.0.0.9. 渐变堆叠面积图
3.0.0.0.0.10. 折线区域高亮
3.0.0.0.0.11. 折线图渐变
3.0.0.0.0.12. 多X轴
3.0.0.0.0.13. 联动和共享数据集

echarts是百度开发的一款使用 JavaScript 实现的开源可视化库。

echarts与react开发要点

echarts 不是react组件，因此组件的生命周期概念不适用于echarts组件。如何处理echarts部分？

在获取历史曲线的时候，根据模型id获取历史曲线数据。这里可能存在两次setState(id & 曲线数据)。这种处理方式不对：应该根据id去获取历史曲线数据之后，再统一setState，以免引发render的两次调用。实际上，这种调用在render中很容易出问题，因为render可能没有考虑到id和曲线数据是异步的（它认为有id就必有历史曲线，可是实际上setState(id)之后进入render时是没有曲线数据的）。

在获取“历史曲线”这一步时，需要一些辅助函数来实现获取曲线数据这一步。

state中应该存储两部分状态

渲染组件用到的数据
UI展示时的判断依据

React复用组件如何实现“历史曲线展示”

频繁调用的组件会不断update, 因此需要重写shouldComponentUpdate函数来控制这方面。一个组件会在两种情况下进入shouldUpdate函数：1）自身state发生改变和2）props发生改变。因此，shouldComponentUpdate函数可以判断这两方面的特定属性是否发生改变，来决定是否重新render页面。
react应用组件的一般思路：

Component

`tooltip`

提示框组件。

提示框组件的通用介绍：

提示框组件可以设置在多种地方：

可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中，即 series.tooltip
可以设置在系列的每个数据项中，即 series.data.tooltip

tooltip. trigger = ‘item’

触发类型。

可选：

'item'

数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
'axis'

坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
'none'

什么都不触发。

dataZoom数据缩放

dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

现在支持这几种类型的 dataZoom 组件：

内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。

✦ dataZoom 和数轴的关系 ✦

dataZoom 主要是对 数轴（axis） 进行操作（控制数轴的显示范围，或称窗口（window））。

可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 或 dataZoom.radiusAxisIndex 或 dataZoom.angleAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。

dataZoom 组件可 同时存在多个，起到共同控制的作用。如果多个 dataZoom 组件共同控制同一个数轴，他们会自动联动。

✦ dataZoom 组件如何影响轴和数据 ✦

dataZoom 的运行原理是通过 数据过滤 以及在内部设置轴的显示窗口来达到 数据窗口缩放 的效果。

数据过滤模式（dataZoom.filterMode）的设置不同，效果也不同。

可选值为：

‘filter’：当前数据窗口外的数据，被 过滤掉。即会影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
‘weakFilter’：当前数据窗口外的数据，被 过滤掉。即会影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
‘empty’：当前数据窗口外的数据，被 设置为空。即不会影响其他轴的数据范围。
‘none’: 不过滤数据，只改变数轴范围。

如何设置，由用户根据场景和需求自己决定。经验来说：

当『只有 X 轴或只有 Y 轴受 dataZoom 组件控制』时，常使用 filterMode: 'filter'，这样能使另一个轴自适应过滤后的数值范围。
当『X 轴 Y 轴分别受 dataZoom 组件控制』时：
- 如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』，比如在『双数值轴散点图』中，那么两个轴可都设为 fiterMode: 'empty'。
- 如果 X 轴为主，Y 轴为辅，比如在『柱状图』中，需要『拖动 dataZoomX 改变 X 轴过滤柱子时，Y 轴的范围也自适应剩余柱子的高度』，『拖动 dataZoomY 改变 Y 轴过滤柱子时，X 轴范围不受影响』，那么就 X轴设为 fiterMode: 'filter'，Y 轴设为 fiterMode: 'empty'，即主轴 'filter'，辅轴 'empty'。

✦ 数据窗口的设置 ✦

dataZoom 的数据窗口范围的设置，目前支持两种形式：

百分比形式：即设置 dataZoom.start 和 dataZoom.end。
绝对数值形式：即设置 dataZoom.startValue 和 dataZoom.endValue。

注意：当使用百分比形式指定 dataZoom 范围时，且处于如下场景（或类似场景）中，dataZoom 的结果是和 dataZoom 组件的定义顺序相关的。

option = {
    dataZoom: [
        {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
            start: 30,
            end: 70
        },
        {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty',
            start: 20,
            end: 80
        }
    ],
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
        // yAxis 中并没有使用 min、max 来显示限定轴的显示范围。
    },
    series{
        type: 'bar',
        data: [
            // 第一列对应 X 轴，第二列对应 Y 轴。
            [12, 24, 36],
            [90, 80, 70],
            [3, 9, 27],
            [1, 11, 111]
        ]
    }
}

在上例中，dataZoomY 的 start: 20, end: 80 到底表示什么意思？

如果 yAxis.min、yAxis.max 进行了直接设置：

那么 dataZoomY 的 start: 20, end: 80 表示 yAxis.min ~ yAxis.max 的 20% 到 80%。
如果 yAxis.min、yAxis.max 没有设置：
- 如果 dataZoomX 设置为 filterMode: 'empty'：
  
  那么 dataZoomY 的 start: 20, end: 80 表示 series.data 中 dataMinY ~ dataMaxY（即上例中的 9 ~ 80）的 20% 到 80%。
- 如果 dataZoomX 设置为 filterMode: 'filter'：
  
  那么，因为 dataZoomX 定义 dataZoomY 组件之前，所以 dataZoomX 的 start: 30, end: 70 表示全部数据的 30% 到 70%，而 dataZoomY 组件的 start: 20, end: 80 表示经过 dataZoomX 过滤处理后，所得数据集的 20% 到 80%。
  
  如果需要改变这种处理顺序，那么改变 dataZoomX 和 dataZoomY 在 option 中的出现顺序即可。

legend 图例

图例组件。

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。

当图例数量过多时，可以使用滚动图例（垂直）或滚动图例（水平），参见：legend.type

legend.data = [
    {
        name: '人口变化', //图例项的名称，应等于某系列的name值（如果是饼图，也可以是饼图单个数据的 name）
        icon: 'circle',
        textStyle: {
            color: 'red',
        }
    }
]

legend.data

图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ''（空字符串）或者 '\n'（换行字符串）用于图例的换行。

如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如饼图 and 漏斗图等会取自 series.data 中的 name。

如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name。

grid 网格

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格内绘制折线图，柱状图，散点图（气泡图）。

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。

option = {
	grid: {
        top: 60,
        right: '10%',
        width: 'auto',
        containLabel: false, //grid 区域是否包含坐标轴的刻度标签。
    }   
}

containLabel: grid 区域是否包含坐标轴的刻度标签。

containLabel 为 false的时候：
- grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
- 这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。
containLabel 为true 的时候：
- grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
- 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。

visualMap

visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。

视觉元素可以是：

symbol: 图元的图形类别。
symbolSize: 图元的大小。
color: 图元的颜色。
colorAlpha: 图元的颜色的透明度。
opacity: 图元以及其附属物（如文字标签）的透明度。
colorLightness: 颜色的明暗度，参见 HSL。
colorSaturation: 颜色的饱和度，参见 HSL。
colorHue: 颜色的色调，参见 HSL。

visualMap 组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。

visualMap 组件可以定义为分段型（visualMapPiecewise）或连续型（visualMapContinuous），通过 type 来区分。例如：

option = {
    visualMap: [
        { // 第一个 visualMap 组件
            type: 'continuous', // 定义为连续型 visualMap
            ...
        },
        { // 第二个 visualMap 组件
            type: 'piecewise', // 定义为分段型 visualMap
            ...
        }
    ],
    ...
};

✦ 视觉映射方式的配置 ✦

既然是『数据』到『视觉元素』的映射，visualMap 中可以指定数据的『哪个维度』（参见visualMap.dimension）映射到哪些『视觉元素』（参见visualMap.inRange 和 visualMap.outOfRange）中。

在 visualMap 组件所控制的 series 中，如果 series 中某个数据项需要避开 visualMap 映射，可以这么配置：

series: {
    type: '...',
    data: [
        {name: 'Shanghai', value: 251},
        {name: 'Haikou', value: 21},
        // 设置 `visualMap: false` 则 visualMap 不对此项进行控制，此时系列
        // 可使用自身的视觉参数（color/symbol/ ...控制此项的显示。
        {name: 'Beijing', value: 821, visualMap: false},
        ...
    ]
}

✦ 与 ECharts2 中 dataRange 的关系 ✦

visualMap 是由 ECharts2 中的 dataRange 组件改名以及扩展而来。ECharts3里 option 中的 dataRange 配置项仍然被兼容，会自动转换成 visualMap 配置项。在option中推荐写 visualMap 而非 dataRange。

`inRange`

定义 在选中范围中 的视觉元素。（用户可以和 visualMap 组件交互，用鼠标或触摸选择范围）

可选的视觉元素有：

symbol: 图元的图形类别。
symbolSize: 图元的大小。
color: 图元的颜色。
colorAlpha: 图元的颜色的透明度。
opacity: 图元以及其附属物（如文字标签）的透明度。
colorLightness: 颜色的明暗度，参见 HSL。
colorSaturation: 颜色的饱和度，参见 HSL。
colorHue: 颜色的色调，参见 HSL。

inRange 能定义目标系列（参见 visualMap-continuous.seriesIndex）视觉形式，也同时定义了 visualMap-continuous 本身的视觉样式。通俗来讲就是，假如 visualMap-continuous控制的是散点图，那么 inRange 同时定义了散点图的 颜色、尺寸 等，也定义了 visualMap-continuous 本身的 颜色、尺寸 等。这二者能对应上。

定义方式，例如：

visualMap: [
    {
        ...,
        inRange: {
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        }
    }
]

如果想分别定义 visualMap-continuous 本身的视觉样式和 目标系列 的视觉样式，则这样定义：

visualMap: [
    {
        ...,
        // 表示 目标系列 的视觉样式。
        target: {
            inRange: {
                color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
                symbolSize: [60, 200]
            }
        },
        // 表示 visualMap-continuous 本身的视觉样式。
        controller: {
            inRange: {
                symbolSize: [30, 100]
            }
        }
    }
]

或者这样定义：

visualMap: [
    {
        ...,
        // 表示 目标系列 的视觉样式 和 visualMap-continuous 共有的视觉样式。
        inRange: {
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [60, 200]
        },
        // 表示 visualMap-continuous 本身的视觉样式，会覆盖共有的视觉样式。比如，symbolSize 覆盖成为 [30, 100]，而 color 不变。
        controller: {
            inRange: {
                symbolSize: [30, 100]
            }
        }
    }
]

✦ 关于视觉通道 ✦

inRange 中，可以有任意几个的『视觉通道』定义（如 color、symbolSize 等）。这些视觉通道，会被同时采用。
一般来说，建议使用 透明度（opacity） ，而非 颜色透明度（colorAlpha） （他们细微的差异在于，前者能也同时控制图元中的附属物（如 label）的透明度，而后者只能控制图元本身颜色的透明度）。
视觉映射的方式：支持两种方式：线性映射、查表映射。

✦ 视觉通道 — 线性映射 ✦

线性映射 表示 series.data 中的每一个值（dataValue）会经过线性映射计算，从 [visualMap.min, visualMap.max] 映射到设定的 [visual value 1, visual value 2] 区间中的某一个视觉的值（下称 visual value）。

例如，我们设置了 [visualMap.min, visualMap.max] 为 [0, 100]，并且我们有 series.data: [50, 10, 100]。我们想将其映射到范围为 [0.4, 1] 的 opacity 上，从而达到用透明度表达数值大小的目的。那么 visualMap 组件会对 series.data 中的每一个 dataValue 做线性映射计算，得到一个 opacityValue。最终得到的 opacityValues 为 [0.7, 0.44, 1]。

visual 范围也可以反向，例如上例，可以设定 opacity 范围为 [1, 0.4]，则上例得到的 opacityValues 为 [0.7, 0.96, 0.4]。

注意，[visualMap.min, visualMap.max] 须手动设置，不设置则默认取 [0, 100]，而非 series.data 中的 dataMin 和 dataMax。

如何设定为线性映射？以下情况时，会设定为 线性映射：

当 visualMap 为 visualMap-continuous 时，或者
当 visualMap 为 visualMap-piecewise 且未设置 visualMap-piecewise.categories 时。

视觉通道的值（visual value）：

视觉通道的值一般都以 Array 形式表示，例如：color: ['#333', '#777']。
如果写成 number 或 string，会转成 Array。例如，写成 opacity: 0.4 会转成 opacity: [0.4, 0.4]，color: '#333' 会转成 color: ['#333', '#333']。
对于 图形大小（symbolSize）、透明度（opacity）、颜色透明度（colorAlpha）、颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）：形如Array 的视觉范围总是表示：[最小数据值对应的视觉值, 最大数据值对应的视觉值]。比如：colorLightness: [0.8, 0.2]，表示 series.data 中，和 visualMap.min 相等的值（如果有的话）映射到 颜色明暗 的 0.8，和 visualMap.max 相等的值（如果有的话）映射到 颜色明暗 的 0.2，中间其他数据值，按照线性计算出映射结果。
对于 颜色（color），使用数组表示例如：['#333', '#78ab23', 'blue']。意思就是以这三个点作为基准，形成一种『渐变』的色带，数据映射到这个色带上。也就是说，与 visualMap.min 相等的值会映射到 '#333'，与 visualMap.max 相等的值会映射到 'blue'。对于 visualMap.min 和 visualMap.max 中间的其他点，以所给定的 '#333', '#78ab23', 'blue' 这三个颜色作为基准点进行分段线性插值，得到映射结果。
对于 图形类别（symbol）：使用数据表示例如：['circle', 'rect', 'diamond']。与 visualMap.min 相等的值会映射到 'circle'，与 visualMap.max 相等的值会映射到 'diamond'。对于中间的其他点，会根据他们和 visualMap.min 和 visualMap.max 的数值距离，映射到 'circle', 'rect', 'diamond' 中某个值上。

visual value 的取值范围：

透明度（opacity）、颜色透明度（colorAlpha）、颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、visual value

取值范围是 [0, 1]。
色调（colorHue）：

取值范围是 [0, 360]。
颜色（color）：

颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 ‘#ccc’。
图形类别（symbol）：

ECharts 提供的标记类型包括

1	'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`, `'none'

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接例如：

1	'image://http://xxx.xxx.xxx/a/b.png'

URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如：

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'

✦ 视觉通道 — 查表映射 ✦

查表映射 表示 series.data 中的所有值（dataValue）是可枚举的，会根据给定的映射表查表得到映射结果。

例如，在 visualMap-piecewise 中，我们设定了 visualMap-piecewise.categories 为 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']。我们有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']。然后我们可以定立查表映射规则：color: {'Warden': 'red', 'Demon Hunter': 'black'}，于是 visualMap 组件会按照表来将 dataValue 映射到 color。

如何设定为查表映射？当 visualMap 为 visualMap-piecewise 且设置了 visualMap-piecewise.categories 时，会进行查表映射。

视觉通道的值（visual value）：一般使用 Object 或 Array 来表示，例如：

visualMap: {
    type: 'piecewise',
    // categories 定义了 visualMap-piecewise 组件显示出来的项。
    categories: [
        'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
    ],
    inRange: {
        // visual value 可以配成 Object：
        color: {
            'Warden': 'red',
            'Demon Hunter': 'black',
            '': 'green' // 空字串，表示除了'Warden'、'Demon Hunter'外，都对应到 'green'。
        }
        // visual value 也可以只配一个单值，表示所有都映射到一个值，如：
        color: 'green',
        // visual value 也可以配成数组，这个数组须和 categories 数组等长，
        // 每个数组项和 categories 数组项一一对应：
        color: ['red', 'black', 'green', 'yellow', 'white']
    }
}

参见示例

✦ 修改视觉编码 ✦

如果在图表被渲染后（即已经使用 setOption 设置了初始 option 之后），想修改 visualMap 的各种 视觉编码，按照惯例，再次使用 setOption 即可。例如：

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

但请注意：

visualMap option 中的这几个属性，inRange, outOfRange, target, controller，在 setOption 时不支持 merge。否则会带来过于复杂的 merge 逻辑。也就是说，setOption 时，一旦修改了以上几个属性中的一项，其他项也会被清空，而非保留当前状态。所以，设置 visual 值时，请一次性全部设置，而非只设置一部分。
不推荐使用 getOption -> 修改option -> setOption 的方式：

// 不推荐这样做（尽管也能达到和上面的例子相同的结果）：
var option = chart.getOption(); // 获取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改动color（我想要改变 color）。

// 如下两处也要进行同步改动，否则可能达不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];

chart.setOption(option); // option设置回 visualMap

注意，inRange 没有指定，则会默认会设置 color: ['#f6efa6', '#d88273', '#bf444c']，如果你不想要这个color，可以 inRange: {color: null} 来去除。

`axisPointer`

这是坐标轴指示器（axisPointer）的全局公用设置。

坐标轴指示器是指示坐标轴当前刻度的工具。

xAxis: {
  type: "time",
  axisPointer: {
    value: "2016-10-7",
    snap: true,
    label: {
      show: true,
      formatter: function(params) {
        return echarts.format.formatTime('yyyy-MM-dd', params.value);
      }
    },
    handle: {
      show: true
    }
  },
  splitLine: {
    show: false
  }
},

如何显示 axisPointer：

直角坐标系 grid、极坐标系 polar、单轴坐标系 single 中的每个轴都自己的 axisPointer。

他们的 axisPointer 默认不显示。有两种方法可以让他们显示：

设置轴上的 axisPointer.show（例如 xAxis.axisPointer.show）为 true，则显示此轴的 axisPointer。
设置 tooltip.trigger 设置为 'axis' 或者 tooltip.axisPointer.type 设置为 'cross'，则此时坐标系会自动选择显示哪个轴的 axisPointer，也可以使用 tooltip.axisPointer.axis 改变这种选择。注意，轴上如果设置了 axisPointer，会覆盖此设置。

如何显示 axisPointer 的 label：

axisPointer 的 label 默认不显示（也就是默认只显示指示线），除非：

设置轴上的 axisPointer.label.show（例如 xAxis.axisPointer.label.show）为 true，则显示此轴的 axisPointer 的 label。
设置 tooltip.axisPointer.type 为 'cross' 时会自动显示 axisPointer 的 label。

关于触屏的 axisPointer 的设置

设置轴上的 axisPointer.handle.show（例如 xAxis.axisPointer.handle.show 为 true 则会显示出此 axisPointer 的拖拽按钮。（polar 坐标系暂不支持此功能）。

注意： 如果发现此时 tooltip 效果不良好，可设置 tooltip.triggerOn 为 'none'（于是效果为：手指按住按钮则显示 tooltip，松开按钮则隐藏 tooltip），或者 tooltip.alwaysShowContent 为 true（效果为 tooltip 一直显示）。

参见例子。

自动吸附到数据（snap）

对于数值轴、时间轴，如果开启了 snap，则 axisPointer 会自动吸附到最近的点上。

{
    emphasis: {
        focus: 'series'
    }
}

https://go.neo4j.com/rs/710-RRC-335/images/Neo4j_Graph_Algorithms.pdf

绘图举例

[x] echarts自定义X/Y轴区间

[x] echarts隐藏坐标轴轴线、刻度（axisTick）、标签
[x] echarts如何展示无数据情况
[ ] echarts柱状图与中国地图联动
[ ] echarts geo背景响应
[ ] echarts 地图区域处理时间
[ ] echarts xAxis 配置/坐标轴
[ ] echarts radialGradient/linearGradient
[ ] 绘制折现图

`echarts`自定义X/Y轴区间

option = {
    xAxis: {
        min: 20, 
        max: 80,
    },
    yAxis: {
        min: function(value) {
            return value.min - 20;
        },
    }
}

echarts隐藏坐标轴轴线、刻度（axisTick）、标签

options = {
    xAxis: {
        show: false,
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
    }
}

echarts如何展示无数据情况

option = {
    title: {
        text: '暂无数据',
        x: 'center',
        y: 'center',
        textStyle: {
            color: '#65ABE7',
            fontWeight: 'normal', 
            fontSize: 16
        }
    },
    series: [
        {
            type: 'line',
            data: [],
        }
    ]
}

绘制折线图

option = {
    series:[
        {
            type: 'line',
            data: [],
            symbolSize: 10,
            itemStyle: {
                normal: {
                    label:
                }
                emphasis:{
                    
                }

            }
        }
    ]
}

timePicker怎么和历史曲线重合？

1
2
3

position: absolute,
z-index: 1000,
right: 80px,

series data怎么准备以保证有足够的数据做tooltip

dataZoom在无数据时隐藏

option = {
    dataZoom: [
    {
    show: false,
    realtime: true,
    start:0, 
    end: 100,
    }
    ],
}

1
2

地图

地图主要用于地理区域数据的可视化，配合 visualMap 组件用于展示不同区域的人口分布密度等数据。

多个地图类型相同的系列会在同一地图上显示，这时候使用第一个系列的配置项作为地图绘制的配置。

// 地图注册之后才能使用
$.getJSON(fileName, function(geoJson){
	myChart.hideLoading();
    echarts.registerMap('HK', geoJson);
})

option = {
    geo:{
        map: 'china',
        label:{ show: true},
        emphasis: {
            show: true,
            itemStyle: {
                areaColor: red,
            }
        },
        itemStyle: {
            areaColor: 'red',
            borderColor: 'green',
        },
        aspectScale: 0.5,
        layoutCenter: ['50%', '50%'],
        layoutSize: 10
    },
    grid: {
        top: 1,
        right: 10,
        bottom: 20,
        left: 10,
        containLabel: true,
    },
    legend: {
        data:['normal', 'abnormal', 'unkonwn']
    },
    
    visualMap: {
        min: 300,
        max: 5000,
        realtime: false, //拖拽时，是否实时更新。
        calculable: true,// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
        
    },
    series: [
        {
            name: 'china'
            type: 'map',
            mapType: 'HK', // 自定义扩展图表类型
            data:  [
                    {name: '中西区', value: 20057.34},
                    {name: '湾仔', value: 15477.48},
                    {name: '东区', value: 31686.1}
    		],// geo map所需数据
            // 自定义名称映射
    		nameMap: {
                    'Central and Western': '中西区',
                    'Eastern': '东区',
                    'Islands': '离岛',
            }
        }，
        {
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: [], //value格式是什么？(lat, log, value)
			label: {
            },
            emphasis: {},    
            rippleEffect: {},//涟漪效果
            hoverAnimation: true,
            itemStyle: {},
            zlevel: 1,
        }
    ]
}

geo组件和geoIndex关系

geo组件可能有多个，可以通过geoIndex（索引，即下标）的方式进行指定。

series.scatter如何展示到地理坐标系上面？

{
    coordinateSystem: 'geo',
    geoIndex: 0,//使用地理坐标系的index索引，单个图标实例存在多个地理坐标系时有用
}

geo组件与series.map的关系

series.map指定map可以展示data，实现地图区域可视化，配合visualMap组件用于展示不同区域的人口分布、密度数据。对于地理坐标系上面的点、线数据可视化，使用基于geo组件的散点图和线图。

多个地图类型series-map.map相同的系列图，会在同一个地图上显示，使用第一个系列图的地图设置。

geo组件和series.map的关系

series-map既可以直接指定地图类型map: 'china'，也可以使用geo地理坐标系组件。（通过geoIndex指定坐标系）

当地图不需要和其他系列图共享坐标系时，两者都是ok的。但是当需要和其他系列图共享坐标系时（比如在地理坐标系上面的散点图），使用基于geo组件的方式更为简单。

同时，geo组件无tooltip功能（类似于只提供一个展示白板），它内部需要指定地图类型map: 'china' ，以提供用到的坐标系。

折线图(line)

基本折线图、平滑图

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        smooth: false/true,
    }]
};

面积图

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {},
    }]
};

折线图堆叠

数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

堆叠面积图

和堆叠图相比，多了areaStyle: {}

option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series' // 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。'none' 不淡出其它图形，默认使用该配置。'series' 聚焦当前高亮的数据所在的系列的所有图形。

            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            label: {
                show: true,
                position: 'top'
            },
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

渐变堆叠面积图

修改了areaStyle: {}里面的内容

option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
        text: '渐变堆叠面积图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Line 1',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(128, 255, 165)'
                }, {
                    offset: 1,
                    color: 'rgba(1, 191, 236)'
                }])
            },
            emphasis: {
                focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
        },
        {
            name: 'Line 2',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 221, 255)'
                }, {
                    offset: 1,
                    color: 'rgba(77, 119, 255)'
                }])
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
        },
        {
            name: 'Line 3',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(55, 162, 255)'
                }, {
                    offset: 1,
                    color: 'rgba(116, 21, 219)'
                }])
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 132, 201, 334, 190, 130, 220]
        },
        {
            name: 'Line 4',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255, 0, 135)'
                }, {
                    offset: 1,
                    color: 'rgba(135, 0, 157)'
                }])
            },
            emphasis: {
                focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230, 120]
        },
        {
            name: 'Line 5',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            label: {
                show: true,
                position: 'top'
            },
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255, 191, 0)'
                }, {
                    offset: 1,
                    color: 'rgba(224, 62, 76)'
                }])
            },
            emphasis: {
                focus: 'series'
            },
            data: [220, 302, 181, 234, 210, 290, 150]
        }
    ]
};

未来一周气温变化

option = {
    title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['最高气温', '最低气温']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name: '最高气温',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
                data: [ //标注的数据数组。每个数组项是一个对象，有下面几种方式指定标注的位置:直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '最低气温',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            position: 'start',
                            formatter: '最大值'
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
};

折线区域高亮

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '30%']
    },
    visualMap: {
        type: 'piecewise',
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [{
            gt: 1,
            lt: 3,
            color: 'rgba(0, 0, 180, 0.4)'
        }, {
            gt: 5,
            lt: 7,
            color: 'rgba(0, 0, 180, 0.4)'
        }]
    },
    series: [
        {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
                color: '#5470C6',
                width: 5
            },
            markLine: {
                symbol: ['none', 'none'],
                label: {show: false},
                data: [
                    {xAxis: 1},
                    {xAxis: 3},
                    {xAxis: 5},
                    {xAxis: 7}
                ]
            },
            areaStyle: {},
            data: [
                ['2019-10-10', 200],
                ['2019-10-11', 560],
                ['2019-10-12', 750],
                ['2019-10-13', 580],
                ['2019-10-14', 250],
                ['2019-10-15', 300],
                ['2019-10-16', 450],
                ['2019-10-17', 300],
                ['2019-10-18', 100]
            ]
        }
    ]
};

数据过滤

$.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (_rawData) {
    run(_rawData);
});

function run(_rawData) {

    option = {
        dataset: [{
            id: 'dataset_raw',
            source: _rawData
        }, {
            id: 'dataset_since_1950_of_germany',
            fromDatasetId: 'dataset_raw',
            transform: {
                type: 'filter',
                config: {
                    and: [
                        { dimension: 'Year', gte: 1950 },
                        { dimension: 'Country', '=': 'Germany' }
                    ]
                }
            }
        }, {
            id: 'dataset_since_1950_of_france',
            fromDatasetId: 'dataset_raw',
            transform: {
                type: 'filter',
                config: {
                    and: [
                        { dimension: 'Year', gte: 1950 },
                        { dimension: 'Country', '=': 'France' }
                    ]
                }
            }
        }],
        title: {
            text: 'Income of Germany and France since 1950'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            nameLocation: 'middle'
        },
        yAxis: {
            name: 'Income'
        },
        series: [{
            type: 'line',
            datasetId: 'dataset_since_1950_of_germany',
            showSymbol: false,
            encode: {
                x: 'Year',
                y: 'Income',
                itemName: 'Year',
                tooltip: ['Income'],
            }
        }, {
            type: 'line',
            datasetId: 'dataset_since_1950_of_france',
            showSymbol: false,
            encode: {
                x: 'Year',
                y: 'Income',
                itemName: 'Year',
                tooltip: ['Income'],
            }
        }]
    };

    myChart.setOption(option);

}

折线图渐变

var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];

var dateList = data.map(function (item) {
    return item[0];
});
var valueList = data.map(function (item) {
    return item[1];
});

option = {

    // Make gradient line here
    visualMap: [{
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 400
    }, {
        show: false,
        type: 'continuous',
        seriesIndex: 1,
        dimension: 0,
        min: 0,
        max: dateList.length - 1
    }],


    title: [{
        left: 'center',
        text: 'Gradient along the y axis'
    }, {
        top: '55%',
        left: 'center',
        text: 'Gradient along the x axis'
    }],
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
        data: dateList
    }, {
        data: dateList,
        gridIndex: 1
    }],
    yAxis: [{
    }, {
        gridIndex: 1
    }],
    grid: [{
        bottom: '60%'
    }, {
        top: '60%'
    }],
    series: [{
        type: 'line',
        showSymbol: false,
        data: valueList
    }, {
        type: 'line',
        showSymbol: false,
        data: valueList,
        xAxisIndex: 1,
        yAxisIndex: 1
    }]
};

一天用电量分布

option = {
    title: {
        text: '一天用电量分布',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} W'
        },
        axisPointer: {
            snap: true
        }
    },
    visualMap: {
        show: false,
        dimension: 0,
        pieces: [{
            lte: 6,
            color: 'green'
        }, {
            gt: 6,
            lte: 8,
            color: 'red'
        }, {
            gt: 8,
            lte: 14,
            color: 'green'
        }, {
            gt: 14,
            lte: 17,
            color: 'red'
        }, {
            gt: 17,
            color: 'green'
        }]
    },
    series: [
        {
            name: '用电量',
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
            markArea: {
                itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                },
                data: [ [{
                    name: '早高峰',
                    xAxis: '07:30'
                }, {
                    xAxis: '10:00'
                }], [{
                    name: '晚高峰',
                    xAxis: '17:30'
                }, {
                    xAxis: '21:15'
                }] ]
            }
        }
    ]
};

多X轴

var colors = ['#5470C6', '#EE6666'];

option = {
    color: colors,

    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['2015 降水量', '2016 降水量']
    },
    grid: {
        top: 70,
        bottom: 300
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '降水量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
        },
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[0]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '降水量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '2015 降水量',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
                focus: 'series'
            },
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name: '2016 降水量',
            type: 'line',
            smooth: true,
            emphasis: {
                focus: 'series'
            },
            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
        }
    ]
};

联动和共享数据集

setTimeout(function () {

    option = {
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                emphasis: {focus: 'data'},
                label: {
                    formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                    itemName: 'product',
                    value: '2012',
                    tooltip: '2012'
                }
            }
        ]
    };

    myChart.on('updateAxisPointer', function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });

    myChart.setOption(option);

});

1
2
3

option = {
    
}

1
2
3

option = {
    
}

1
2
3

option = {
    
}

野生芦苇

价值、合作、方法

Echarts总结

echarts与react开发要点

Component

`tooltip`

tooltip. trigger = ‘item’

dataZoom数据缩放

legend 图例

grid 网格

visualMap

`inRange`

`axisPointer`

绘图举例

`echarts`自定义X/Y轴区间

echarts隐藏坐标轴轴线、刻度（axisTick）、标签

echarts如何展示无数据情况

地图

折线图(line)

面积图

折线图堆叠

堆叠面积图

渐变堆叠面积图

折线区域高亮

折线图渐变

多X轴

联动和共享数据集

echarts与react开发要点

Component

tooltip

tooltip. trigger = ‘item’

dataZoom数据缩放

legend 图例

grid 网格

visualMap

inRange

axisPointer

绘图举例

echarts自定义X/Y轴区间

echarts隐藏坐标轴轴线、刻度（axisTick）、标签

echarts如何展示无数据情况

地图

折线图(line)

面积图

折线图堆叠

堆叠面积图

渐变堆叠面积图

折线区域高亮

折线图渐变

多X轴

联动和共享数据集

`tooltip`

`inRange`

`axisPointer`

`echarts`自定义X/Y轴区间