基本使用

安装

1
npm install echarts --save

使用

1
<div class="char-item" ref="pieChartDom"></div>
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
const pieChartDom = ref(null)
let chartInstancePie = null

const initPieChart = async () => {
  chartInstancePie = echarts.init(pieChartDom.value)
  const option = {
    title: {
      text: '数据总量',
      subtext: '按类型统计',
      left: 'left',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      type: 'scroll',
      padding: [0, 100, 0, 100],
      // orient: 'vertical',
      align: 'left',
      x: 'right',
      y: 'center',
      top: 'bottom',
      appendToBody: true,
    },
    series: [
      {
        name: '数据总量',
        type: 'pie',
        radius: '50%',
        center: ['50%', '50%'],
        data: [
          { value: 1048, name: 'GF-3系列数据/产品（A03）' },
          { value: 735, name: 'Sentinel-2系列数据/产品（B02）' },
          { value: 580, name: 'Modis系列数据/产品（D01）' },
          { value: 484, name: 'GF-1/6系列数据/产品（A01）' },
          { value: 300, name: 'Sentinel-1系列数据/产品（B01）' },
          { value: 484, name: 'Landsat-8/9系列数据/产品（C01）' },
          { value: 300, name: 'GF-2/7系列数据/产品（A02）' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  chartInstancePie.setOption(option)
}

onMounted(async () => {
  await nextTick()
  await initPieChart()
})

window.onresize = function () {
  chartInstancePie.resize()
}

常用配置

图例组件（legend）

提示框组件（tooltip）

格式化数据

自定义组件：formatter

  1. 字符串模板，官网示例

模板变量有 {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}（百分比）

对于有多个系列的且动态变换的系列时，则需要采用回调函数形式，自动生成各个系列的模板

示例：

1
2
3
4
tooltip: {
  trigger: 'axis',
  formatter: '{b0}: {c0}<br />{b1}: {c1}'
},
  1. 回调函数
1
2
3
4
5
6
7
tooltip: {
  trigger: 'axis',
  formatter: function (params) {
      // ...若干处理
     return `html模板或字符串`
  }
},

回调函数格式：

1
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]

支持返回 HTML 字符串或者创建的 DOM 实例。

第一个参数 params 是 formatter 需要的数据集。格式如下：

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
27
28
29
30
31
32
33
34
35
36
37
38
39
{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 坐标轴 encode 映射信息，
    // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然为数组，不会为 null/undefined，表示 dimension index 。
    // 其内容如：
    // {
    //     x: [2] // dimension index 为 2 的数据映射到 x 轴
    //     y: [0] // dimension index 为 0 的数据映射到 y 轴
    // }
    encode: Object,
    // 维度名列表
    dimensionNames: Array<String>,
    // 数据的维度 index，如 0 或 1 或 2 ...
    // 仅在雷达图中使用。
    dimensionIndex: number,
    // 数据图形的颜色
    color: string,
    // 饼图/漏斗图的百分比
    percent: number,
    // 旭日图中当前节点的祖先节点（包括自身）
    treePathInfo: Array,
    // 树图/矩形树图中当前节点的祖先节点（包括自身）
    treeAncestors: Array
}

数值格式化：valueFormatter

从 v5.3.0 开始支持

官网示例

堆叠效果图也适用

1
2
3
4
tooltip: {
  trigger: 'axis',
  valueFormatter: (value) => value + ' 条',
},

常见问题

  • 异步加载数据时，出现上次加载数据依旧停留在图表

解决办法：应该设置mychart.setoption({},true);

原因：setOption可以有三个参数：chart.setOption(option,notMerge,lazyUpdate);

option:图表的配置项和数据

notMerge:可选，是否不跟之前设置的option进行合并，默认为false，即合并。（这里是导致二次渲染不成功的根本）

lazyUpdate:可选，在设置完option后是否不立即更新图表，默认为false，即立即更新。