1、第一步 添加圆角

series中做如下配置

series: [{
  ...
  type: 'pie', // 类型设置为饼图
  radius: ['68%', '90%'], // 设置内圈与外圈的半径使其呈现为环形
  center: ['37%', '50%'], // 圆心位置, 用于调整整个图的位置
  data: data, // 数据
  itemStyle: {
    borderRadius: 60, // 设置每一段子项目的圆角
    borderWidth: 10, // 子项目间距
  }
  ...
}]
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" }
  ])
]
3.实现效果图

在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐