前言
官网:https://echarts.apache.org/handbook/zh/get-started
配置项:https://echarts.apache.org/zh/option.html#title
官方示例:https://echarts.apache.org/examples/zh/index.html
第三方示例平台:https://www.makeapie.cn/echarts
主题:https://echarts.apache.org/zh/theme-builder.html
从 ECharts4 支持数据集开始,更推荐使用数据集来管理数据。
https://echarts.apache.org/handbook/zh/concepts/dataset
数据集最大的特点就是数据和数据展示配置的分离。
ECharts的数据集(dataset)是一个用于管理数据的组件,可以方便地进行“数据和其他配置”分离的配置风格。虽然每个系列都可以在 series.data
中设置数据,但是从 ECharts4 支持数据集开始,更推荐使用数据集来管理数据。因为这样,数据可以被多个组件复用。同时,使用数据集还能支持更多的数据格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。
在 ECharts 中,大部分图形都可以使用数据集来管理数据。
但是,有一些图形不支持使用数据集来管理数据,例如:map
、graph
、sankey
、funnel
、gauge
、wordCloud
等。
以前我们都是在系列(series)
中设置数据。
如下
1 | option = { |
使用数据集后,序列中只需要设置x,y展示的列即可。
1 | { |
不同图encode的参数
目前测试的雷达图不能使用数据集的方式。
可以使用的
1 | // 在任何坐标系和系列中,都支持: |
基本
1 | <template> |
数据分组
如果我们想把数据按科目进行分组
1 | <template> |
tooltip
优先级
series.tooltip > tooltip
注意:
series.tooltip
仅在 tooltip.trigger 为'item'
时有效。
方式
方式1 字符串模板
1 | tooltip: { formatter: "{a}:{b}:{c}" }, |
模板变量有 {a}
, {b}
,{c}
,{d}
,{e}
,分别表示系列名,数据名,数据值等。
在 trigger 为 'axis'
的时候,会有多个系列的数据,此时可以通过 {a0}
, {a1}
, {a2}
这种后面加索引的方式表示系列的索引。
不同图表类型下的 {a}
,{b}
,{c}
,{d}
含义不一样。
其中变量{a}
, {b}
, {c}
, {d}
在不同图表类型下代表数据含义为:
- 折线(区域)图、柱状(条形)图、K线图 :
{a}
(系列名称),{b}
(类目值),{c}
(数值),{d}
(无) - 散点图(气泡)图 :
{a}
(系列名称),{b}
(数据名称),{c}
(数值数组),{d}
(无) - 地图 :
{a}
(系列名称),{b}
(区域名称),{c}
(合并数值),{d}
(无) - 饼图、仪表盘、漏斗图:
{a}
(系列名称),{b}
(数据项名称),{c}
(数值),{d}
(百分比)
方式2 回调函数
1 | tooltip: { |
回调函数格式:
1 | (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[] |
支持返回 HTML 字符串或者创建的 DOM 实例。
第一个参数 params
是 formatter 需要的数据集。
格式如下:
1 | { |
data方式
1 | tooltip: { |
数据集方式
注:encode 和 dimensionNames 的使用方式,
例如:
如果数据为:
1 | dataset: { |
则可这样得到 y 轴对应的 value:
1 | params.value[params.encode.y[0]] |
如果数据为:
1 | dataset: { |
则可这样得到 y 轴对应的 value:
1 | params.value[params.dimensionNames[params.encode.y[0]]] |
完整示例
1 | tooltip: { |
对于极坐标系
1 | tooltip: { |
在 trigger 为 'axis'
的时候,或者 tooltip 被 axisPointer 触发的时候,params
是多个系列的数据数组。
其中每项内容格式同上,并且,
1 | { |
注:encode 和 dimensionNames 的使用方式,例如:
如果数据为:
1 | dataset: { |
则可这样得到 y 轴对应的 value:
1 | params.value[params.encode.y[0]] |
如果数据为:
1 | dataset: { |
则可这样得到 y 轴对应的 value:
1 | params.value[params.dimensionNames[params.encode.y[0]]] |
ticket和callback
第二个参数 ticket
是异步回调标识,配合第三个参数 callback
使用。
第三个参数 callback
是异步回调,在提示框浮层内容是异步获取的时候,可以通过 callback 传入上述的 ticket
和 html
更新提示框浮层内容。
示例:
1 | formatter: function (params, ticket, callback) { |