echarts-设置嵌套饼图，外部饼图分段渐变色

最新推荐文章于 2024-07-29 15:35:41 发布

永远不会太晚

最新推荐文章于 2024-07-29 15:35:41 发布

阅读量794

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_42611074/article/details/128184194

版权

echarts 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

需求：外部有个嵌套的饼图，分段渐变色，对应内部饼图区域

在这里插入图片描述

下方代码可直接运行在https://echarts.apache.org/examples/zh/editor.html?c=line-simple

const data = [
  { value: 1775, name: '1' },
  { value: 679, name: '2' },
  { value: 848, name: '3' },
  { value: 775, name: '4' },
  { value: 848, name: '5' }
];

const data1 = [];
const color1 = ['#46C4C4', '#75D3D3', '#A3E2E2', '#D0F0F0'];
const color2 = ['#F3CF76', '#F6DB98', '#F9E7BB', '#FCF3DD'];
const color3 = ['#F3B776', '#F6C998', '#F9DBBB', '#FCEDDD'];
const color4 = ['#65D9D0', '#B2ECE7'];
const color5 = ['#49CBF1', '#77D8F4', '#88DDF5'];
// 生成外部分段渐变色饼图
const outColorfulPie = (value, colorArr) => {
  const partnum = value / colorArr.length;
  for (let i = 0; i < colorArr.length; i++) {
    data1.push({ value: partnum, itemStyle: { color: colorArr[i] } });
  }
};
outColorfulPie(data[0].value, color1)
outColorfulPie(data[1].value, color2)
outColorfulPie(data[2].value, color3)
outColorfulPie(data[3].value, color4)
outColorfulPie(data[4].value, color5)

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  color: ['#19B6B6', '#F0C354', '#F0A554', '#3ECFC4', '#1CBEED'],
  legend: {},
  series: [
    {
      type: 'pie',
      radius: [0, '40%'],
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 3
      },
      label: {
        show: true
      },
      labelLine: {
        length: 90
      },
      data: data
    },
    {
      type: 'pie',
      labelLine: {
        show: false
      },
      radius: ['45%', '60%'],
      data: data1
    }
  ]
};