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,
                  }
                }
              }
            },
          ]
        }