标签：百分比 name color 渐变 图例 rgba var c2 data

$scope.energyRatioData  = [

{value: 1048, name: '报警'},
{value: 735, name: '故障'},
{value: 580, name: '正常'},
{value: 484, name: '离线'},

]

 $scope.energyRatioOption = {
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(30,41,54,.8)',
            // axisPointer: {//坐标轴指示器配置项
            //   lineStyle: {
            //     color: '#F50077'
            //   }
            // },
            borderColor: 'transparent',
            textStyle: {
              color: '#fff'
            }
          },
          legend: {
            right: 50,
            top: 10,
            orient: 'vertical',
            textStyle: {
              color: '#A9D1EC',
              fontSize: 12
            },
            itemGap: 20,
            itemWidth: 6,
            itemHeight: 6,
            icon: 'circle',
            data: $scope.energyRatioLegend,
            // 使用回调函数
            formatter: function(name) {
              // var data=[];
              var data = $scope.energyRatioData;
              var total = 0;
              var tarValue;
              for (var i = 0, l = data.length; i < l; i++) {
                total += Number(data[i].value);
                //console.log(typeof total)
                if (data[i].name == name) {
                  tarValue = Number(data[i].value);
                }
              }

              // console.log(tarValue)
              // console.log(total)
              var p = ((tarValue / total) * 100);//两个饼图所以需要*200-看图数量类推
              // return name + " " + " " + "<span>" +  p.toFixed(1) + "%" + "</span>";
              return name + "     " + p.toFixed(1) + "%" ;
            }
          },
          color: ['#00C8FD','#00FFC8','#FD6B79','#FD9F02', '#0077D4'],
          series: [
            {
              type: 'pie',
              center: ['28%', '42%'],
              radius: ['80%', '65%'],
              itemStyle: {
                borderRadius: 5,
                color: function (params) {
                  var colorList = [
                    {
                      "c1": 'rgba(65,140,106,1)',  //管理
                      "c2": 'rgba(61,255,160,1)'
                    },
                    {
                      "c1": 'rgba(134,60,186,1)',  //实践
                      "c2": 'rgba(61,57,157,1)'
                    },
                    {
                      "c1": 'rgba(251,17,79,1)',//操作
                      "c2": 'rgba(145,56,76,1)'
                    },
                    {
                      "c1": 'rgba(232,108,110,1)',//操作
                      "c2": 'rgba(150,95,97,1)'
                    },
                    {
                      "c1": 'rgba(78,76,47,1)',//操作
                      "c2": 'rgba(253,166,33,1)'
                    }
                  ]
                  // console.log(colorList)
                  // console.log([params.dataIndex])
                  let colorItem = colorList[params.dataIndex]
                  if (colorItem) {
                    return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                      offset: 0,
                      color: colorItem.c1
                    }, {
                      offset: 1,
                      color: colorList[params.dataIndex].c2
                    }])
                  } else {
                    return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                      offset: 0,
                      color: 'rgba(78,76,47,1)'
                    }, {
                      offset: 1,
                      color: 'rgba(253,166,33,1)'
                    }])
                  }
                  // borderColor: '',
                  // borderWidth: 2
                }
              },
              avoidLabelOverlap: false,
              hoverOffset: 5,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: '18'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: $scope.energyRatioData
              // data: enterPriseList
            }
          ]
        };

标签：百分比,name,color,渐变,图例,rgba,var,c2,data
来源： https://www.cnblogs.com/yongzhu/p/14656676.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。