ECharts 图表配置

发表于 分类于 阅读次数： 本文字数： 582 阅读时长 ≈ 2 分钟

折线图配置详解

下面配置的是大数量多条折线图。

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// 后端返回的数据格式

const list = [
  ["时间", "回风温度", "回风湿度"],
  ["2023-09-20 10:32:20", 26.7, 61],
  ["2023-09-20 10:32:23", 26.7, 61],
  ["2023-09-20 10:32:26", 26.7, 61],
  ["2023-09-20 10:32:29", 26.7, 61],
  ["2023-09-20 10:32:32", 26.7, 61],
  ["2023-09-20 10:32:35", 26.7, 61],
  ["2023-09-20 10:32:38", 26.7, 61],
  ["2023-09-20 10:32:41", 26.7, 61],
  ["2023-09-20 10:32:44", 26.7, 61],
  ["2023-09-20 10:32:47", 26.7, 61],
  ["2023-09-20 10:32:50", 26.7, 61],
];

// 配置 series，注意 series 的长度和上面 list 每一行的长度相等

const series = [
  {
    type: "line",
    seriesLayoutBy: "column",
    smooth: true,
    axisLabel: {
      rotate: 90,
      interval: 0,
    },
  },
  {
    type: "line",
    seriesLayoutBy: "column",
    smooth: true,
    axisLabel: {
      rotate: 90,
      interval: 0,
    },
  },
];

// 折线图配置
const option = {
  legend: {},
  tooltip: {
    trigger: "axis",
    order: "valueDesc",
  },
  // 当已经设置了图表容器为 100%宽度，但是图表宽度还是比容器小，需要设置这个属性
  grid: {
    top: 30,
    left: "2%",
    right: "2%",
    bottom: "12%",
    containLabel: true,
  },
  dataset: [
    {
      dimensions: list[0],
      source: list,
    },
  ],
  xAxis: {
    type: "category",
    nameLocation: "middle",
  },
  yAxis: {},
  dataZoom: [
    {
      type: "inside",
      start: 0,
      end: 20,
    },
    {
      start: 0,
      end: 20,
    },
  ],
  series: series,
};

监听图表容器的大小并改变图表大小

1
2
3
4
5
6
7
8
9
10
// 在 Vue 中监听图表容器的大小并改变图表大小
activated() {
  // 页面宽度改变重绘表格
  window.onresize = () => {
    if (this.statusChart) {
      this.statusChart.resize();
    }
  };
  this.getWebIdNames();
},

销毁容器节点

假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。

本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。

正确的做法是，在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，在图表容器重新被添加后再次调用 echarts.init 初始化。

小贴士：在容器节点被销毁时，总是应调用 echartsInstance.dispose 以销毁实例释放资源，避免内存泄漏。

1
2
3
4
5
6
7
8
// 在 Vue 中容器节点被销毁以及被重建时
deactivated() {
  if (!this.statusChart) {
    return;
  }
  this.statusChart.dispose();
  this.statusChart = null;
}

References

Apache ECharts
监听图表容器的大小并改变图表大小
容器节点被销毁以及被重建时
Echarts 折线图超详细超细节配置