echarts 在vue中配置漸變 圓環圖

效果圖

直接上代碼

// 繪製圖表
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
          },
          //在這裏配置圓環中間的logo
          graphic: {
            elements: [
              {
                type: 'image',
                style: {
                  image: require("@/assets/images/logo_echarts.png"),
                  width: 50,
                  height: 50,
                },
                left: 'center',
                top: '90'
              },
            ]
          },
          series: [
            {
              name: '匯聚點精',
              type: 'pie',
              selectedMode: 'single',
              radius: ["50%", '80%'], //圓環大小
              //在這裏配置  漸變   名稱  數量  如果是多個業務  封裝下面的對象  
              data:[
              			{
		                      value: 5,
		                      name: “匯聚點精”,
		                      itemStyle: {
		                        color: {
		                          type: 'linear',
		                          x: 0,
		                          y: 0,
		                          x2: 0.4,
		                          y2: 1,
		                          colorStops: [{
		                            offset: 0,
		                            color: “#f7941d” // 0% 處的顏色
		                          }, {
		                            offset: 1,
		                            color: “#ff4f18” // 100% 處的顏色
		                          }],
		                          globalCoord: true // 缺省爲 false
		                        },
		                      }
                      ]
                    },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                  }
                }
              }
            },
          ]
        }