【ECharts】3.基本图表绘制

发表于 更新于 分类于 ，

1.柱状图

ECharts 的优点之一就是：我们不用从 0 开始写代码，只需要在官方文档中找到相似度高的示例，然后在示例代码的基础上进行修改即可。

比如我们在官网找到带背景色的柱状图： ::: center 20250304213540 :::

这里就不扯那么多了,直接来讲讲代码中的陌生配置项目:

color是绘制图表的调色盘的颜色列表，如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 默认为： 

1
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

也就是多个系列时依次显示的颜色: ::: demo-wrapper no-padding 20250304214726 :::

  • backgroundStyle 用于设置每一个柱条的背景样式，需要将 showBackground 设置为 true 时才会生效。

1.1 多列柱状图

有时候我们需要在同一个轴点上进行多列数据的对比，比如下图不同国家男女人口的数量统计。

20250304215255

我们可以试着在官网中找找对应的模板：发现可以用折柱混合图为模版。

20250306115651

将代码修改为：

:collapsed-lines
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
option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器配置项
      type: "cross",
      crossStyle: {
        color: "red",
      },
    },
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      saveAsImage: { show: true }, // 保存图片
    },
  },
  legend: {
    data: ["男", "女"], // 图例的数据数组
  },
  xAxis: [
    {
      type: "category",
      data: ["中国", "美国", "古巴", "印度", "巴西", "不丹", "德国"],
      axisPointer: {
        type: "shadow",
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "人口数量",
      min: 0,
      max: 8000,
      interval: 1000,
      axisLabel: {
        formatter: "{value} 万",
      },
    },
  ],
  series: [
    {
      name: "男",
      type: "bar",
      data: [7113, 1619, 2340, 6987, 1046, 3783, 4145],
    },
    {
      name: "女",
      type: "bar",
      data: [6787, 1660, 2049, 6545, 1080, 4260, 3989],
    },
  ],
};

修改的配置项说明如下： - tooltip.axisPointer是配置坐标轴指示器的全局共用设置，也就是说里面包含的属性都是和坐标轴相关的设置。 - tooltip.axisPointer.type是指示器类型，包含 line（直线指示器）、shadow（阴影指示器）、none（无指示器）、cross（十字准星指示器）这四种类型。 - tooltip.axisPointer.crossStyle.color用于设置线的颜色 - legend.data是图例的数据数组 - xAxis.axisPointer.type是指示器类型，包含 line（直线指示器）、shadow（阴影指示器）、none（无指示器）这三种类型。 - yAxis.min 用于设置 y 轴的最小值。 - yAxis.max 用于设置 y 轴的最大值。 - yAxis.axisLabel.formatter 是刻度标签的内容格式器。

1.2 堆积条形图

有时候，我们想要在某些大类中将它们各自包含的小类也突出显示出来，这时候就可以使用堆积柱状图来表现。

堆积柱状图就是一个系列的数值“堆积”在另一个系列上，而从表达总量的变化。

分析好效果图的结构，我们在官网上，找到堆叠条形图，拷贝代码到 index2.html 文件中，对代码进行修改。

20250306130144

修改代码：

:collapsed-lines
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
option = {
  title: {
    text: "男女就业比",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {},
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true, // grid 区域是否包含坐标轴的刻度标签
  },
  xAxis: {
    type: "value",
    min: 0,
    max: 100,
    splitLine: {
      show: false, // 是否显示分隔线
    },
    axisLabel: {
      formatter: "{value} %",
      show: false, // 不显示刻度标签
    },
  },
  yAxis: {
    type: "category",
    axisLine: false, // 是否显示刻度线
    inverse: true, // 是否反向坐标轴
    data: ["前端", "后端", "运维", "测试", "UI", "AI"],
  },
  series: [
    {
      barWidth: 30, // 设置柱子的宽度
      name: "男",
      type: "bar",
      stack: "total",
      label: {
        show: true,
      },
      emphasis: {
        focus: "series", // 高亮的图表样式和标签样式
      },
      itemStyle: {
        color: "#a2d2ff", // 设置柱子的颜色
        borderRadius: [6, 0, 0, 6], // 设置圆角边框
      },
      data: [30, 65, 60, 25, 20, 35],
    },
    {
      name: "女",
      type: "bar",
      stack: "total",
      label: {
        show: true,
      },
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        color: "#b1e693",
        borderRadius: [0, 6, 6, 0],
      },
      data: [60, 25, 20, 75, 70, 15],
    },
  ],
};

  • grid.containLabel 设置 grid 区域是否包含坐标轴的刻度标签，默认为 false。
  • xAxis.splitLine.show 设置是否显示分隔线。
  • xAxis.axisLabel.show 设置是否显示刻度。
  • yAxis.axisLine.show 设置是否显示坐标轴线。
  • yAxis.inverse 设置是否反向坐标轴。
  • series-bar.barWidth 设置条柱的宽度。
  • series-bar.emphasis.focus 设置高亮的图表样式和标签样式，在高亮图表时，它支持三种配置：none 不- 淡出其它图表，默认使用该配置；self 只聚焦（不淡出）当前高亮的数据的图表；series 聚焦当前高亮的- 数据所在的系列的所有图表。
  • series-bar.itemStyle.color 设置图表的颜色，如果不设置颜色，就默认从调色盘依次取色。
  • series-bar.itemStyle.borderRadius 设置圆角半径

2.折线图

::: demo-wrapper no-padding 20250306131933 :::

我们先分析一下效果图的样式和结构，到官网示例中找一个类似的线图，通过比较，发现堆叠面积图比较接近。

修改代码：

:collapsed-lines
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
option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  legend: {
    data: ["播放量", "转发量"],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
      ],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      name: "播放量",
      type: "line",
      stack: "Total",
      areaStyle: {},
      emphasis: {
        focus: "series",
      },
      data: [30, 40, 30, 40, 30, 40, 10, 60, 35, 24, 55, 40, 30, 40, 50],
    },
    {
      name: "转发量",
      type: "line",
      stack: "Total",
      areaStyle: {},
      emphasis: {
        focus: "series",
      },
      data: [50, 30, 55, 40, 15, 60, 30, 70, 20, 10, 50, 60, 50, 30, 20],
    },
  ],
};

2.1 定制线图

将上面代码的文字颜色进行更改： 

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
var option = {
  // 这不是完整代码，只给出了代码的修改部分
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        color: '#dddc6b',
      },
    },
  },
  legend: {
    top: '0%',
    textStyle: {
      color: 'rgba(255,255,255,.5)',
      fontSize: '12',
    },
  },
  grid: {
    left: '10',
    top: '30',
    right: '10',
    bottom: '10',
    containLabel: true,
  },
};

2.2 X轴相关设置

修改代码：

:collapsed-lines
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
<script>
  var option = {
    // 只给出修改部分的代码
    xAxis: [
      {
        type: 'category',
        boundaryGap: false, // 去除轴内间距
        axisLabel: {
          textStyle: {
            color: 'rgba(255,255,255,.6)', // 文本颜色
            fontSize: 12,
          },
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)', // X 轴线颜色
          },
        },
        data: [
        '01', '02', '03',
        '04', '05', '06',
        '07', '08', '09',
        '10', '11', '12',
        '13', '14', '15',
        ]
      },
    ],
  };
</script>

在上面代码中，xAxis.boundaryGap 是坐标轴两边留白策略，在类目轴和非类目轴的设置和表现是不一样的。

  • 在类目轴中，boundaryGap 配置为布尔类型，当设置为 true 时，坐标轴上的刻度只会作为分隔线，标签和数据会处于两个刻度之间的中间。
  • 在非类目轴中，boundaryGap 配置为具有两个值的数组，这两个值代表数据的最大值和最小值的延伸范围。

2.3 Y 轴相关设置

:collapsed-lines
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
<script>
  var option = {
    // 只给出修改部分代码
    yAxis: [
      {
        type: 'value',
        axisTick: { show: false }, // 去除刻度
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)', // Y 轴线颜色
          },
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(255,255,255,.6)', // 文字颜色
            fontSize: 12, // 文字大小
          },
        },

        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)', // 分割线颜色
          },
        },
      },
    ],
  };
</script>

修改后效果如下： ::: demo-wrapper no-padding 20250306140225 :::

2.4 修改两个线模块配置

最终效果： ::: demo-wrapper no-padding 20250306143415 :::

根据需求我们去官方文档查找相应的配置。

  • series-line.smooth 设置是否平滑曲线显示。

  • series-line.areaStyle 设置区域填充样式。

  • series-line.areaStyle.color 设置填充的颜色，包括不同的渐变。

  • series-line.showSymbol 是否显示 symbol，也就是图上的数据点，默认为 true。

修改后代码如下：

:collapsed-lines
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<script>
  var option = {
    // 你给出修改部分代码
    series: [
      {
        name: '播放量',
        type: 'line',
        smooth: true, // 线是圆滑
        symbol: 'circle', // 设置拐点为小圆点
        symbolSize: 5, // 拐点大小
        showSymbol: false, // 开始不显示拐点， 鼠标经过显示
        // 单独修改线的样式
        lineStyle: {
          normal: {
            color: '#0184d5',
            width: 2,
          },
        },
        // 填充区域
        areaStyle: {
          normal: {
            // 渐变色，只需要复制即可
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  // 渐变色的起始颜色
                  color: 'rgba(1, 132, 213, 0.4)',
                },
                {
                  offset: 0.8,
                  // 渐变线的结束颜色
                  color: 'rgba(1, 132, 213, 0.1)',
                },
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
          },
        },
        // 设置拐点颜色以及边框
        itemStyle: {
          normal: {
            color: '#0184d5',
            borderColor: 'rgba(221, 220, 107, .1)',
            borderWidth: 12,
          },
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: '转发量',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            color: '#00d887',
            width: 2,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0, 216, 135, 0.4)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(0, 216, 135, 0.1)',
                },
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
          },
        },
        itemStyle: {
          normal: {
            color: '#00d887',
            borderColor: 'rgba(221, 220, 107, .1)',
            borderWidth: 12,
          },
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
    ],
  };
</script>

实现效果如下: ::: demo-wrapper no-padding 20250306143631 :::

3.饼形图

3.1 南丁格尔图

我们先分析一下效果图的图样式和结构，到官网示例中找一个类似的线图，通过比较，选择了基础南丁格尔玫瑰图。

20250306143821

南丁格尔图又称玫瑰图，通常用弧度相同但是半径不同的扇形表示各个类目。

修改代码如下：

:collapsed-lines
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
option = {
  color: [
    "#7DCEA0",
    "#A9DFBF",
    "#F9E79F",
    "#F4D03F",
    "#B7950B",
    "#F8C471",
    "#E59866",
    "#E67E22",
    "#D68910",
    "#F1948A",
    "#E74C3C",
  ],
  title: {
    text: "全球新冠疫情部分数据",
    left: "center",
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    top: "bottom",
  },
  series: [
    {
      name: "面积模式",
      type: "pie",
      radius: [50, 250], // 饼图的半径。
      center: ["50%", "50%"], // 饼图中心坐标
      roseType: "area", // 设置是否展示成南丁格尔图
      itemStyle: {
        borderRadius: 8, //
      },
      data: [
        { value: 109, name: "巴林" },
        { value: 117, name: "马来西亚" },
        { value: 160, name: "新加坡" },
        { value: 176, name: "挪威" },
        { value: 239, name: "比利时" },
        { value: 248, name: "瑞典" },
        { value: 319, name: "英国" },
        { value: 321, name: "荷兰" },
        { value: 337, name: "瑞士" },
        { value: 522, name: "日本" },
        { value: 572, name: "美国" },
      ],
    },
  ],
};

陌生配置说明如下： - series.radius 设置饼形的半径。 - series.center 设置饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。 - series.roseType 设置是否展示成南丁格尔图，通过半径区分数据大小，有两种模式： - radius 区圆心角展现数据的百分比，半径展现数据的大小。 - area 所有扇区圆心角相同，仅通过半径展现数据大小。 - series.itemStyle.borderRadius 用于指定饼图扇形区块的内外圆角半径。

最终效果图： ::: demo-wrapper no-padding 20250306144750 :::

3.2 定制饼状图

我们来看一下当前效果（左图）与最终效果（右图）的对比图。 ::: demo-wrapper no-padding 20250306145037 :::

先来讲一下相关配置： - legend.itemWidth 和 legend.itemHeight 分别是图例标记的图表宽度和高度，也就是最下方小图标的宽高。 - series-pie.labelLine.length 是视觉引导线第一段的长度。 - series-pie.labelLine.length2 是视觉引导项第二段的长度。

4.散点图

我们先分析一下效果图的图样式和结构，到官网示例中找一个类似的线图，通过比较，选择了 AQI 气泡图。

20250306145935
  • tooltip.backgroundColor 是提示框浮层的背景颜色。 tooltip.formatter 是用来设置提示浮层内容显示的格式，它支持字符串模板和回调函数两- 种形式。
  • xAxis.nameGap 用于设置坐标轴名称与轴线之间的距离，默认值为 15。
  • xAxis.nameTextStyle.fontsize 是用来设置坐标轴名称文字的字体大小，默认值为 12。
  • xAxis.nameLocation 是用来设置坐标轴名称显示位置，可选值有 start（开头）、- middle 或 center（居中）、end（末尾）。
  • visualMap 是视觉映射组件。
  • visualMap.left 和 visualMap.top 设置 visualMap 组件离容器左侧和顶部的距离。
  • visualMap.dimension 用来指定数据的哪个维度映射到视觉元素上。
  • visualMap.min 和 visualMap.max 用来设置 visualMap 组件允许的最小值和最大值。

visualMap.itemWidth 和 visualMap.itemHeight 设置 visualMap 组件图表的宽度和- 度。 - visualMap.calculable 设置是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。 - visualMap.precision 是设置数据展示的小数精度，默认为 0，无小数点。

  • visualMap.text 和 visualMap.textGap 用来设置 visualMap 组件图表上两端的文字- 设置文字与图表之间的距离。
  • visualMap.inRange.symbolSize 设置选中范围内散点的大小。
  • visualMap.outOfRange.symbolSize 设置选中范围外散点的大小。
  • visualMap.outOfRange.color 设置选中范围外散点的颜色。
  • visualMap.controller 是 visualMap 组件中，控制器的 inRange、outOfRange 设置。

详见官方文档

4.1 定制散点图

左边是最终效果，右边是当前效果： ::: demo-wrapper no-padding 20250306152404 :::

修改代码；

:collapsed-lines
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
80
81
82
83
84
85
86
87
88
var option = {
  // 只给出修改部分的代码
  backgroundColor: "#2e4c6d",
  color: ["#ffC4E1", "#71DFE7"],
  legend: {
    data: ["晴天", "雨天"],
    textStyle: {
      color: "#fff",
      fontSize: 16,
    },
  },
  xAxis: {
    nameTextStyle: {
      color: "#fff",
      fontSize: 14,
    },
    axisLine: {
      lineStyle: {
        color: "#777",
      },
    },
    axisTick: {
      lineStyle: {
        color: "#777", // 刻度线的颜色
      },
    },
    axisLabel: {
      formatter: "{value}",
      textStyle: {
        color: "#fff",
      },
    },
  },
  yAxis: {
    name: "心情指数",
    nameTextStyle: {
      color: "#fff",
      fontSize: 16,
    },
    axisLine: {
      lineStyle: {
        color: "#777",
      },
    },
    axisTick: {
      lineStyle: {
        color: "#777",
      },
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
      },
    },
  },
  visualMap: [
    {
      left: "right", // 组件在图的右侧显示
      top: "40%", // 组件与顶部的距离
      dimension: 2, // 映射数据的维度
      itemWidth: 30, // 组件的宽度
      itemHeight: 120, // 组件的高度
      calculable: true, // 是否显示拖拽用的手柄
      precision: 0.1, // 数据展示的小数精度
      text: ["指数范围"], // 组件的文本内容
      textGap: 30, // 两端文字主体之间的距离
      textStyle: {
        color: "#fff",
      },
      controller: {
        inRange: {
          color: ["#77e4d4"],
        },
      },
    },
  ],
  series: [
    {
      name: "晴天",
    },
    {
      name: "雨天",
    },
  ],
};

效果：

::: demo-wrapper no-padding 20250306152511 :::