echarts饼图外部阴影设置

    var option = {
      color: ['rgba(91, 143, 249, 0.85)', 'rgba(90, 216, 166, 0.85)', 'rgba(255, 82, 77, 0.85)'],
      tooltip: {
        trigger: 'item'
      },
      legend: {
        type: 'plain',
        orient: 'vertical',
        right: '10%',
        top: 'center',
        align: 'left',
        itemWidth: 8, // 设置宽度
        itemHeight: 8, // 设置高度
        itemGap: 16, // 设置间距，
        symbolKeepAspect: false,
        formatter: function (name) {
          let data = option.series[1].data
          console.log(data, 'data')
          let total = 0
          let tarValue
          for (let i = 0; i < data.length; i  ) {
            total  = data[i].value
            if (data[i].name == name) {
              tarValue = data[i].value
            }
          }
          //计算出百分比
          let p = Math.round((tarValue / total) * 100)   '%'
          return `${name}      ${tarValue}  ${p}`
          //name是名称，tarValue是数值
        },
      },
      series: [
          // 设置外部阴影
      {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: '80%', //边框大小
          color: '#fff',
          center: ['30%', '50%'],
          data: [{
            value: 10,
            itemStyle: {
              // borderColor: '#fff',
              borderWidth: 1,
              shadowBlur: 9, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
              shadowOffsetX: 5, // 阴影水平方向上的偏移距离
              shadowOffsetY: 4,
              shadowColor: '#5B8FF9' // 阴影颜色

            }
          }]
        },
        //内部饼图
        {
          type: 'pie',
          radius: '80%',
          center: ['30%', '50%'], //调整echarts的位置，第一个值调整左右，第二个值调整上下，也可以设置具体数字像素值，center: [200, 300],
          label: { //echarts内部显示数字
            color: '#fff',
            show: true,
            formatter: '{d}',
            position: 'inside',
          },
          data: [{
              value: 85,
              name: '正常',
            },
            {
              value: 7,
              name: '停运 '
            },
            {
              value: 8,
              name: '停运-'
            },

          ],
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2,

          },

        },

      ]
    };

这篇好文章是转载于：学新通技术网