Echarts 配置、用法及注意事项

官方文档

引入 echarts

npm install echarts --save

项目使用

可在官网示例中进行编辑，查看完整代码选择按需加载；也可在控制台查看相关警告进行追加。
注意：MarkLineComponent 未加载不会有出错提示

初始化

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 绘制图表 更新数据也 用此方法
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});
// 第二个参数设 true 时，则不进行差异更新

// 摧毁实例
myChart.dispose()

// 当容器大小改变时，需调用
myChart.resize()
myChart.showLoading() // 显示加载
myChart.showLoading() // 隐藏加载
myChart.dispatchAction() // 触发图表行为可做一些动画

myChart.on('事件', 'mainType.subType'|{}, params => {}//处理函数)

导入依赖

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import { use } from 'echarts/core';

// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';

// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

在组件中调用 echarts

// echarts/index.js
import * as echarts from 'echarts/core'
···
echarts.use([···])
export default echarts

父级整体注册 避免多个实例的依赖注册导致bug

// setup script
import echarts from './echarts/index'
provide('echarts', echarts)

子组件中调用

const echarts = inject('echarts')
onMounted(function () {
  myChart.value = echarts.init(document.getElementById('echarts-dom'));
  myChart.value.setOption(options.value, true)
})

echarts实例 不能使用 ref，应使用 shallowRef

---

echarts 配置项

xAxis / yAxis 坐标轴

// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: {},

type:

• value 数值轴，适用于连续数据。
• category 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
• time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
• log 对数轴。适用于对数数据。

max 刻度最大值 最大展示数据项下标到哪
min 刻度最大值

• name 坐标轴名

• axisLine 轴线

• axisTick 刻度

• axisLabel 坐标轴标签

  margin 轴线标签与轴线距离

• splitLine 分割线 网格线

splitNumber 可以控制显示的 label 数量

grid

调整图表与容器四边的距离
客观上影响了图表的大小

grid、axis、series 通过数组配置多个图表
axis 的 gridIndex 确定对应于哪个网格
series 的 xAxisIndex、yAxisIndex 确定应用哪个 xy轴 （扇形图不涉及xy轴）

color 调色板

渐变色

color: {
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [
    {
      offset: 0,
      color: color1
    },
    {
      offset: 1,
      color: color2 // 100% 处的颜色
    }
  ],
  global: false // 缺省为 false
}

官方可拖拽案例

动画

animationDuration 动画时长
在设置时间较长时，可以用于多组折线数据，只管比较高低变化的过程

animationEasing 过渡函数
官方示例

animationDelayUpdate 延迟播放

放置自定义图形 graphic

series 系列

一个系列代表一组数据

series.seriesLayoutBy: column/row, 选择列或是行映射到系列 默认列

也就是各个项是按列依次取值，还是按行依次取值 取出的一组数据就对应一个维度 dimension
与维度相交方向的每一组称为 数据项 item
每个系列 展示一个数据项

series.encode 数据集映射规则
series.datasetIndex 当 dataset 存在多个时，指定选用的dataset

symbol 设置点（图案）样式

zoom: 图表缩放

showBackground: true, 显示背景颜色
backgroundStyle: {
color: ‘rgba(180, 180, 180, 0.2)’
}

coordinateSystem: ‘polar’ 圆形坐标轴
realtimeSort: true,

label.valueAnimation: true

visualMap 视觉映射 -样式

不同数值映射不同样式
一个数据项包含内容：

{
  // 这里每一个项就是数据项（dataItem）
  name: 'xxx', // 扇形图会用到
  value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value）
  itemStyle: {}
}

type: continuous / piecewise
连续型视觉映射通过指定max最大值、min最小值，就可以确定视觉映射的范围。
dimension value[n]
seriesIndex
visualMap.inRange 表示在数据映射范围内的数据采用的样式；
visualMap.outOfRange 则指定了超出映射范围外的数据的样式。
visualMap.dimension 则指定了将数据的哪个维度做视觉映射。

visualMap: [
  {
    type: 'continuous',
    min: 0,
    max: 5000,
    dimension: 3, // series.data 的第四个维度（即 value[3]）被映射
    seriesIndex: 4, // 对第四个系列进行映射。
    inRange: {
      // 选中范围中的视觉配置
      color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，
      // 数据最小值映射到'blue'上，
      // 最大值映射到'red'上，
      // 其余自动线性计算。
      symbolSize: [30, 100] // 定义了图形尺寸的映射范围，
      // 数据最小值映射到30上，
      // 最大值映射到100上，
      // 其余自动线性计算。
    },
    outOfRange: {
      // 选中范围外的视觉配置
      symbolSize: [30, 100]
    }
  }
  //    ...
]

dataset 数据集

数据集 dataset 进行数据同一管理

• dataset 可以被多个部件复用data
• 数据与样式分离。数据常变，其他配置常不变。
• 支持更多的数据的常用格式，减少格式转化的需求

二维数组

dataset: {
  // 提供一份数据。
  source: [
    ['product',      '2015', '2016', '2017'], // 每个系列会自动对应到 dataset 的每一列
    ['Matcha Latte',  43.3,   85.8,   93.7],
    ['Milk Tea',      83.1,   73.4,   55.1]
  ]
},

“对象数组”的格式，但需要配合维度 dimensions:

dimensions: ['product', '2015', '2016', '2017'],
source: [
  { 
    product: 'Matcha Latte', 
    '2015': 43.3, 
    '2016': 85.8, 
    '2017': 93.7 
  },
  ···
]

series.seriesLayoutBy 可以设置 系列通过 row 或者 column 取 data；默认通过列。
维度 dimensions 未设置时，系列默认取 第一列（上column默认时） 设置维度名 name，type 类型自动推断
_{维度即代表了x轴的类目，即选用的维度名会作为x轴}

二维数组 第一行数据会作为图例名，不会表现在图表；同理，若取行作为维度时，第一列数据会作为图例名。

dataset.sourceHeader: false 声明第一行（列）开始就直接是数据

通过 series.encode 可以配置 数据集的映射关系，而不使用默认的依次获取

encode: {
  x: '维度名',
  y: '维度名',
  seriesName: [1, 3], // 维度1、3 的维度名 构成 系列名
}

当 dataset 为 数组时，调用的地方需要指定 datasetIndex。

注意：使用 dataset 时要将 series 中的 data 删除
对于巨大数据量的渲染（如百万以上的数据量），需要使用 appendData 进行增量加载，这种情况不支持使用 dataset。

transform 数据转换

可以转换出新的 dataset
体验上有点像excel提供的功能
filter {dimension: 'Year', value: 2011}、sort { dimension: 'Year', order: 'desc' }、···

{ type , config , print: true }

dataset: [
  {
    // 这个 dataset 的 index 是 `0`。
    source: [
      ['Product', 'Sales', 'Price', 'Year'],
      ['Cake', 123, 32, 2011],
      ['Cereal', 231, 14, 2011],
      ['Tofu', 345, 3, 2014],
      ['Dumpling', 211, 35, 2014],
      ['Biscuit', 72, 24, 2014]
    ]
    // id: 'a'
  },
  {
    // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。
    transform: {
      // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
      type: 'filter',
      // `config` 用于指定筛选条件。
      // 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有数据项。
      config: { dimension: 'Year', value: 2011 }
    }
    // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，
    // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
    // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。
  }
]

语法糖-链式声明

{
  source: [
    // 原始 dataset 数据
  ]
},
{
  // 几个 transform 被声明成 array ，他们构成了一个链，
  // 前一个 transform 的输出是后一个 transform 的输入。
  transform: [
    {
      type: 'filter',
      config: { dimension: 'Product', value: 'Tofu' }
    },
    {
      type: 'sort',
      config: { dimension: 'Year', order: 'desc' }
    }
  ]
}

dataset.fromTransformResult 可进行多个输出

如果一个 transform 被链式声明，它只能获取前一个 transform 的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）

echarts-stat 第三方 transform 库

主要样式

主要对象

label 标签

formatter

\n 换行

模板字符串：

1. 针对系列：

• {a}：系列名。
• {b}：数据名。
• {c}：数据值。
• {d}：百分比。
• {@xxx}：数据中名为 ‘xxx’ 的维度的值，如 {@product} 表示名为 ‘product’ 的维度的值。
• {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。

2. 针对坐标轴：
   '{value} kg'

回调函数
4. 针对系列
(params) => {}

// params
{
    componentType: 'series',
    seriesType: string, // series.type
    seriesIndex: number, // series[index]
    seriesName: string, // series.name
    name: string, // 数据名，类目名
    dataIndex: number, // 数据在传入的 data 数组中的 index
    data: Object,
    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 坐标轴 encode 映射信息，
    // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然为数组，不会为 null/undefied，表示 dimension index 。 
    // x: [1]
    encode: Object,
    dimensionNames: Array<String>, // 维度名列表
    // 仅在雷达图中使用。
    dimensionIndex: number,
    color: string, // 数据图形的颜色
    percent: number // 百分比
}

5. 针对坐标轴：
   (value, index) => {}

textSyle 文本

itemStyle 点 图像

lineStyle 线

areaStyle 面

xxxLine
nameTextStyle

主要属性：

• color 文本颜色
• xxxColor 对应颜色
• opacity 不透明度
• shadowXxx 阴影相关项 _{shadowOffsetX/Y、shadowBlur、shadowColor}
• textBorderXxxx _{Color、Width、Type、DashOffset、Radius}
• textShadowXxx _{Blur、OffsetX/Y、Color}
• borderXxx 边框相关项
• type 线条类型
• align: 文本对齐方式

---

• width / height
• top / bottom / left / right

---

分类

charts 图表

series.type: bar，line，map 等

bar 柱状

barWidth 柱宽度 （barMaxWidth，barMinWidth）
barMinHeight 最小高度 用于数值过小时看不出来

barGap 不同系列的柱间距离
barCategoryGap 同一系列的柱间距离

pie 扇形

• 注意 radius 默认 [0, "70%"]
• 圆心位置 center 默认 [“50%”, “50%”]

components 组件

title 标题

text 主标题文本
x 水平位置

当有多系列时，title可以设置数组

legend 图例

orient ‘horizontal’ | ‘vertical’
icon 切换图标样式

图例等间距换行对齐：

legend: {
  itemGap: 0,
  width: 442,
  formatter: '{a|{name}}',
  textStyle: {
    fontSize: 14,
    padding: [0, 0, 0, 0],
    backgroundColor: "transparent"， // 必须否则不生效
    rich: {
      a: {
        height: 22,
        width: 442/5, // 分四份
      }
    },
  }
}

感谢老哥分享正确文章，但这个方法有点hack，反逻辑

pie饼图的图例可以根据数据项的name属性获取。样式可以写个名称的映射表来弄吧？
line折线 bar柱状图的图例通过系列 series 的 name 属性获取

tooltip 提示框

trigger 触发对象 item 图形 axis 坐标轴
当 line 的 showSymbol 为 false 时，也就是没有图形，也就无法触发 trigger:'item'

formatter：字符串模板/回调函数 官网配置
valueFormatter：(value: number | string) => string

axisPointer 坐标指示器

注意默认 show: false
这个组件坑很多！！！
如果 tooltip.trigger 设置为 ‘axis’ 会出现 指示器，但并不会响应鼠标移动，也不显示坐标值；
此时设置 tooltip.axisPointer.type=‘cross’，也只是会显示，并不会响应移动。

只有以下配置可以生效

{
  axisPointer: {
    show: true,
  }
  tooltip: {
    ···
    axisPointer: {
      type: 'cross',
    }
}

toolbox 工具栏

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具

markPoint / markLine / markArea

data动态更新时，其label和lineStyle样式要重新附上

---

一种新的 option 写法，提取了公共的部分：