【js】echarts常用配置

自定义提示框

如果是使用 dataset 模式，则需要根据 params 修改下显示值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const option = {
  tooltip: {
    formatter(params) {
      // 标题
      const titleText = `${params[0].axisValue}`;
      // 根据 params 生成常规数据内容
      let content = "<div>";
      params.forEach((item) => {
        content += `<div style="display: flex; align-items: center; line-height: 1.7">
              <div style="width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}"></div>
              <div style="margin: 0 0 0 5px;">${item.seriesName}：</div>
              <div>${item.value}</div>
            </div>`;
      });
      content += "</div>";
      // 将标题与数据内容拼接成完整的 HTML 返回
      return titleText + "<br />" + content;
    },
  },
};

dataset 数据集 多数据源模式

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
const option = {
  dataset: [
    {
      // dimensions 与 series[0].encode 任选其一
      // ["x轴key", "y轴key1", "y轴key2", "......"]
      dimensions: ["age", "name"]
      source: [
        { id: 1, name: "张三", age: 18 },
        { id: 2, name: "李四", age: 20 },
        { id: 3, name: "王五", age: 15 },
        { id: 4, name: "李六", age: 17 },
      ],
    },
    {
      // dimensions 与 series[0].encode 任选其一
      // ["x轴key", "y轴key1", "y轴key2", "......"]
      dimensions: ["age", "name"]
      source: [
        { id: 1, name: "张三", age: 18 },
        { id: 2, name: "李四", age: 20 },
        { id: 3, name: "王五", age: 15 },
        { id: 4, name: "李六", age: 17 },
      ],
    },
  ],
  series: [
    {
      type: "line",
      name: "xxxxxx",
      datasetIndex: 1, // 使用第1个数据源
      encode: { x: "age", y: "name" },
    },
    {
      type: "bar",
      name: "xxxxxx",
      datasetIndex: 2, // 使用第2个数据源
      encode: { x: "age", y: "name" },
    },
  ],
};

y 轴数据-数字转汉字

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
const option = {
  yAxis: {
    axisLabel: {
      textStyle: {
        color: (value, index) => {
          if (parseInt(value) === 1) {
            return "#0f0";
          } else if (parseInt(value) === 2) {
            return "#f00";
          } else {
            return "#00f";
          }
        },
      },
      formatter: (value, index) => {
        if (parseInt(value) === 1) {
          return "开";
        } else if (parseInt(value) === 2) {
          return "关";
        } else {
          return "未知";
        }
      },
    },
  },
};

渐变色(线性，径向)

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
const option = {
  series: [
    {
      name: "线性渐变",
      data: [],
      smooth: true,
      areaStyle: {
        // 线性渐变（常用），前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(58,132,255, 0.5)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(58,132,255, 0)", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
    {
      name: "径向渐变",
      data: [],
      smooth: true,
      areaStyle: {
        // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
        color: {
          type: "radial",
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [
            {
              offset: 0,
              color: "rgba(58,132,255, 0.5)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(58,132,255, 0)", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
  ],
};