环形图-阴影渐变

效果图：

 

 

代码：

const chart = this.refs.vChartRef.chart
const dataArray = [
  { name: "总容量", value: 1200 },
];

 

      // var labelshow = true;
      // var centerimg = true;
      // var lineshow = false;
      // let color1 = [];

      //title
      const title = {
        text: "{a|" + 1200 + 'u'+"}\n{b|总容量}",
        left:"center",
        top:"center",
        textStyle: {
          rich: {
            a: {
              color: "#fff",
              fontSize: 14,
              fontFamily: "Alimama ShuHeiTi",
              fontWeight: "normal",
              align: "center",
              padding:[5,0,0,0]
            },
            b:{
              color:"#ABADB0",
              fontSize:10,
              align:"center"
            }
          },
        },
      };

     
      // series
      const series = [
        {
          type: "pie",
          radius: ["58%", "72%"],
          center: ["50%", "50%"],
          hoverAnimation: false,
          label: {
            show: false,
          },
          data: dataArray,
          itemStyle: {
                normal: {
                    color: (list) => {
                      // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                      var colorList = [
                        {
                            colorStart:'rgba(71, 146, 251, 1)',
                            colorEnd:'rgba(71, 146, 251, 0)'                     
                        }]
                        
                      return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ //左、下、右、上
                          offset: 0,
                          color: colorList[list.dataIndex]['colorStart']
                      }, {
                          offset: 1,
                          color: colorList[list.dataIndex]['colorEnd']
                      }])                                    
                    }
                }
                }
        },
      ];
      let tooltip = {
        show: true,
      };
function upOpt() {
  chart.setOption({
      title,
        series,
        tooltip,
  })
}
setTimeout(upOpt, 0)