echarts实现环形图，有圆角，环形颜色渐变_使 echart画出渐变 饼图(圆环图环形渐变)

前言： 最近大屏遇到要用 echarts 实现环形图，带有圆角，环形颜色渐变；这里做以记录：

一、看看效果

二、实现方式

1、环形实现

series中做如下配置

series: [{
  ...
  type: 'pie', // 类型设置为饼图
  radius: ['68%', '90%'], // 设置内圈与外圈的半径使其呈现为环形
  center: ['37%', '50%'], // 圆心位置， 用于调整整个图的位置
  data: echartData, // 数据
  itemStyle: {
    borderRadius: 60, // 设置每一段子项目的圆角
    borderColor: '#000137', // 设置成背景颜色
    borderWidth: 10, // 子项目间距
  }
  ...
}]
1
2
3
4
5
6
7
8
9
10
11
12
13

2、渐变实现

在series平级加入配置项color设置如下

color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
   { offset: 0, color: "#FC6679 " },
    { offset: 1, color: "#FDC581 " }
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#AF3ADB" },
    { offset: 1, color: "#4E65DD" }
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#FC6679" },
    { offset: 1, color: "#FDC581" }
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#02CEFC" },
    { offset: 1, color: "#0272ED" }
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#7FC268" },
    { offset: 1, color: "#0BBBB7" }
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#E7B115" },
    { offset: 1, color: "#F5814C" }
  ])
]
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