echarts环形图渐变色和鼠标悬停样式

计算后的渐变方向如图所示

 <div class="echarts" id="echat" ref="echat"></div>

legendData：['小于1h', '1~6h', '6~24h', '24h以上']

total：733

 getData() {
      const cos = Math.cos;
      const sin = Math.sin;
      const PI = Math.PI;
      var saleAmountTotal = 88;
      var saleAmountTotal2 = 99;
      // 计算占比
      const d_val_p =
        (saleAmountTotal / (saleAmountTotal + saleAmountTotal2)) * 100;
      const i_val_p =
        (saleAmountTotal2 / (saleAmountTotal + saleAmountTotal2)) * 100;
      // 计算圆心角
      const d_angle = (PI * d_val_p) / 50 / 2;
      const i_angle = (PI * i_val_p) / 50 / 2;
      // 计算渐变起点和终点
      const d_pointStart = [
        0.5 - 0.5 * cos(d_angle) * sin(d_angle),
        0.5 + 0.5 * cos(d_angle) * cos(d_angle)
      ];
      const d_pointEnd = [0.5 - 0.5 * sin(d_angle), 0.5 + 0.5 * cos(d_angle)];
      const i_pointStart = [
        0.5 - 0.5 * cos(i_angle) * sin(i_angle),
        0.5 + 0.5 * cos(i_angle) * cos(i_angle)
      ];
      const i_pointEnd = [0.5 - 0.5 * sin(i_angle), 0.5 + 0.5 * cos(i_angle)];

      let xlist = [
        {
          value: 54,
          name: '小于1h',
          label: '#4FCCF4',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: d_pointStart[0],
                y: d_pointStart[0],
                x2: d_pointEnd[1],
                y2: d_pointEnd[0],
                colorStops: [
                  // !! 在此添加渐变过程色 !!
                  { offset: 0, color: '#4FCCF4' },
                  { offset: 1, color: '#287DF0' }
                ]
              }
            }
          }
        },
        {
          value: 20,
          name: '1~6h',
          label: '#FF9960',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: i_pointStart[0],
                y: i_pointStart[0],
                x2: i_pointEnd[1],
                y2: i_pointEnd[0],
                colorStops: [
                  // !! 在此添加渐变过程色 !!
                  { offset: 0, color: '#FF9960' },
                  { offset: 1, color: '#FF5c5e' }
                ]
              }
            }
          }
        },
        {
          value: 16,
          name: '6~24h',
          label: '#fdb239',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: i_pointStart[0],
                y: i_pointStart[0],
                x2: i_pointEnd[1],
                y2: i_pointEnd[0],
                colorStops: [
                  // !! 在此添加渐变过程色 !!
                  { offset: 0, color: '#fdb239' },
                  { offset: 1, color: '#ffdb5d' }
                ]
              }
            }
          }
        },
        {
          value: 10,
          name: '24h以上',
          label: '#902FEA',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: i_pointStart[0],
                y: i_pointStart[0],
                x2: i_pointEnd[1],
                y2: i_pointEnd[0],
                colorStops: [
                  // !! 在此添加渐变过程色 !!
                  { offset: 0, color: '#902FEA' },
                  { offset: 1, color: '#D174F3' }
                ]
              }
            }
          }
        }
      ];
      setTimeout(_ => {
        let myChart = this.$echarts.init(this.$refs.echat);
        myChart.resize();
        myChart.setOption({
          // grid: {
          //   left: '30',
          //   top: '60%',
          //   right: '30',
          //   bottom: '0',
          //   containLabel: true
          // },
          // 环形中心文字
          graphic: [
            {
              type: 'text',
              left: '51%',
              top: '32%',
              style: {
                text: '总计',
                fill: '#fff',
                width: 32,
                height: 16,
                fontSize: 14,
                fontFamily: 'Source Han Sans CN'
              }
            },
            {
              type: 'text',
              left: '45.5%',
              top: '40.2%',
              style: {
                text: parseInt(this.total),
                fill: '#50E0FF',
                width: 74,
                height: 48,
                fontSize: 51,
                fontWeight: 500,
                textAlign: 'center',
                fontFamily: 'DINCond-Bold'
              }
            }
          ],
          //线条相关
          series: [
            {
              name: '总计',
              type: 'pie',
              radius: ['42%', '63%'], //【粗细，大小】
              center: ['55%', '47%'], //【左右，上下】
              data: xlist,
              hoverAnimation: true,
              startAngle: 270, //定义颜色渐变起始角度
              avoidLabelOverlap: false,
              itemStyle: {
                // borderRadius: 10,
                borderColor: 'rgba(0,0,0,.4)',
                borderWidth: 3
              },
              label: {
                normal: {
                  show: false,
                  // \n\n可让文字居于牵引线上方，很关键
                  formatter: '{c}辆\n\n',
                  padding: [-28, -30],
                  color: '#899DBF'
                },
                emphasis: {
                  show: true,
                  // position: 'outside',
                  formatter: '{c}辆\n\n', // \n\n可让文字居于牵引线上方，很关键
                  // borderWidth: 20,
                  // borderRadius: 4,
                  padding: [-28, -30],
                  color: ['red', 'yellow', 'blue', 'green']
                  // color: '#030714', // 圆心内颜色
                  // borderColor: '#16E5CC', // 点边线的颜色
                  // borderWidth: 2 //  拐点边框宽度
                }
              },
              labelLine: {
                normal: {
                  show: false,
                  length: 17,
                  length2: 39,
                  lineStyle: {
                    color: '#899DBF'
                  }
                },
                emphasis: {
                  show: true,
                  type: 'cross',
                  length: 17,
                  length2: 39,
                  lineStyle: {
                    color: '#899DBF'
                  }
                }
              }
            }
          ],
          /* 设置图例样式 */
          legend: {
            orient: 'vertical',
            x: 'left', //可设定图例在左、右、居中
            y: 'center', //可设定图例在上、下、居
            itemHeight: 8, // 图例icon高度
            itemWidth: 8, // 图例icon宽度
            icon: 'circle',
            itemGap: 16, //图例间距
            textStyle: {
              color: '#899DBF'
            },
            data: this.legendData
          }
        });
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      }, 1000);
    }