echarts----饼图+环形图(子集颜色取父级同色系颜色)

最新推荐文章于 2023-01-14 18:21:51 发布

耳东呀呀

最新推荐文章于 2023-01-14 18:21:51 发布

阅读量1.6k

点赞数

分类专栏：【vue-echarts】文章标签： vue

本文链接：https://blog.csdn.net/xciyi/article/details/112021768

版权

【vue-echarts】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

博客讲述了如何在Echarts-Vue中处理饼图颜色，特别是当数据量大导致颜色过多时的解决方案。通过`colorDecreasing`函数实现颜色透明度递减10%，确保二级饼图颜色与父级饼图保持同色系。同时，文章介绍了如何给每个数据项添加颜色，并提供了 rgba 转 16 进制的辅助方法。

摘要由CSDN通过智能技术生成

【echarts-vue】

运行效果
在这里插入图片描述

代码

// data里面的color
color: [
        'rgba(205,41,61,1)',
        'rgba(240,170,55,1)',
        'rgba(112,184,45,1)',
        'rgba(45,195,198,1)',
        'rgba(70,157,237,1)'
      ],

getPie() {
      let that = this;
     this.contractPie = echarts.init(document.getElementById('contract_pie'));
     window.addEventListener('resize', function() {
       that.contractPie.resize();
     });
     let option = {
       //   所有饼图 分布颜色
       tooltip: {
         trigger: 'item',
         formatter: '{a} <br/>{b}: {c} ({d}%)'
       },
       legend: {
         itemHeight: 12,
         //  itemGap: 3,
         itemWidth: 20,
         icon: 'circle',
         orient: 'horizontal',
         left: 'center',
         bottom: 30,
         data: []
       },
       color: [],
       series: [
         {
           name: '合同类别',
           type: 'pie',
           selectedMode: 'single',
           radius: [0, '30%'],
           label: {
             position: 'inner',
             show: false
           },
           labelLine: {
             show: false
           },
           data: [],
           color: []
         },
         {
           name: '合同类别',
           type: 'pie',
           radius: ['40%', '55%'],
           label: {
             show: false,
             formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
             backgroundColor: '#eee',
             borderColor: '#aaa',
             borderWidth: 1,
             borderRadius: 4,
             // shadowBlur:3,
             // shadowOffsetX: 2,
             // shadowOffsetY: 2,
             // shadowColor: '#999',
             // padding: [0, 7],
             rich: {
               a: {
                 color: '#999',
                 lineHeight: 22,
                 align: 'center'
               },
               // abg: {
               //     backgroundColor: '#333',
               //     width: '100%',
               //     align: 'right',
               //     height: 22,
               //     borderRadius: [4, 4, 0, 0]
               // },
               hr: {
                 borderColor: '#aaa',
                 width: '100%',
                 borderWidth: 0.5,
                 height: 0
               },
               b: {
                 fontSize: 16,
                 lineHeight: 33
               },
               per: {
                 color: '#eee',
                 backgroundColor: '#334455',
                 padding: [2, 4],
                 borderRadius: 2
               }
             }
           },
           data: [],
           color: []
         }
       ]
     };
     option.legend.data = [];
     option.series[0].data = [];
     option.series[1].data = [];
     option.series[1].color = [];
     // this.innerPieChart 处理数据
     //this.outerPieChart 处理数据
     this.contractPie.on('click', function(item) {
       that.pieClick(item);
     });
     this.contractPie.setOption(option);    
     }

在处理数据时候，可以给每条数据单独添加饼图区域颜色
**注意：**不能直接给option的color添加，（似乎只能识别前几种（可能是是一种）颜色，当数据较多导致颜色较多时候，会出现识别不到几种颜色的情况）
解决办法：
在给option.series[1].data（外圈）添加颜色时候，使用itemStyle：{color: ’ #123567’}添加；

本次需求，要求二级饼图取父级饼图颜色相同色系（此处为该颜色依次递减10%，不足时再取另一同色系颜色）
涉及方法：

   // 颜色透明度递减10%
    colorDecreasing(rgba, step) {
      // 取第三位 为透明度
      let val = rgba.match(/(\d(\.\d+)?)+/g);
      // return val[index];
      let cur = val[3];
      cur = (cur - 0.1 * step).toFixed(2);
      let color = `rgba(${val[0]},${val[1]},${val[2]},${cur})`;
      // console.log(this.hexify(color),'this.hexify(color)');
      return this.hexify(color);
      // console.log(rgba, color,step)
      // return color;
    },
    // rgba转16进制
    hexify(color) {
      if (/rgba/.test(color)) {
        var values = color
          .replace(/rgba?\(/, '')
          .replace(/\)/, '')
          .replace(/[\s+]/g, '')
          .split(',');
        var a = parseFloat(values[3] || 1);
        var r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255);
        var g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255);
        var b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
        return (
          '#' +
          ('0' + r.toString(16)).slice(-2) +
          ('0' + g.toString(16)).slice(-2) +
          ('0' + b.toString(16)).slice(-2)
        );
      } else {
        return color;
      }
    },