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

深藏阁楼爱情的钟 2024-03-31 15:10 95阅读 0赞

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

![在这里插入图片描述][2200d7966f7d4bc1a8c7da5f3d2454fe.png]

#### 下方代码可直接运行在[https://echarts.apache.org/examples/zh/editor.html?c=line-simple][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
        }
      ]
    };

[2200d7966f7d4bc1a8c7da5f3d2454fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d16a5f1dc21a4b9ea79cbe70d0f309b9.png
[https_echarts.apache.org_examples_zh_editor.html_c_line-simple]: https://echarts.apache.org/examples/zh/editor.html?c=line-simple

发表评论取消回复

表情：

评论列表（有 0 条评论，95人围观）

还没有评论，来说两句吧...

相关阅读

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

需求：外部有个嵌套的饼图，分段渐变色，对应内部饼图区域 ![在这里插入图片描述][2200d7966f7d4bc1a8c7da5f3d2454fe.png] 下方代码

深藏阁楼爱情的钟/ 2024年03月31日 15:10/ 0 赞/ 96 阅读

相关 Echarts 环形饼图

![afd0dbb556be41fe8cd3f97942c06efc.png][] var myChart = echarts.init(document.getEl

Myth丶恋晨/ 2023年10月13日 13:26/ 0 赞/ 78 阅读

相关 echart vue项目中将饼状图块设置成渐变色

源码： <template> <div> <div id="myChart" :style="\{width: '300px', height: '300px

素颜马尾好姑娘i/ 2023年07月23日 12:59/ 0 赞/ 45 阅读

相关 echarts如何设置嵌套饼图的宽度

目录一：设置嵌套饼图宽度二：效果 1. 修改前 2. 修改后 3. 内层和外层宽度不一致的效果一：设置嵌套饼

忘是亡心i/ 2022年12月19日 09:29/ 0 赞/ 205 阅读

相关 ECharts饼图实例

ECharts饼图实例 1、引入jQuery的js文件 2、引入echarts的js文件 test.html页面 <!DOCTYPE html PU

柔情只为你懂/ 2022年06月18日 12:29/ 0 赞/ 411 阅读

相关 Echarts 制作饼图

继上一篇博文: [Echarts异步加载后端接口返回的Json数据生成图表][Echarts_Json]之后,继续使用它的后端接口数据,制作饼图.方法是一致的. 源码:

偏执的太偏执、/ 2022年05月26日 05:46/ 0 赞/ 353 阅读

相关 echarts饼状图

使用echarts实现个人月消费统计，下面是我写的一个案例：效果图： ![70][] html代码： <html> <head> <me

川长思鸟来/ 2022年05月14日 01:41/ 0 赞/ 410 阅读

相关 Echarts 饼图内饼图和外环图联动效果

// 饼图容器样式定义 <style> \echartsPieRing\{ height: 500px; width: 800px; \}

心已赠人/ 2022年02月25日 17:20/ 0 赞/ 1317 阅读

相关 echart生成饼状图

//绘制图表. echarts.init(document.getElementById('main')).setOption(\{ tooltip : \{ tr

女爷i/ 2021年09月29日 09:08/ 0 赞/ 529 阅读

相关 Echarts之饼图

引入jquery.js，echarts.js文件 <script src="js/jquery.js"></script> <script src="js/echa

素颜马尾好姑娘i/ 2021年09月17日 05:30/ 0 赞/ 520 阅读