vue+echarts---标题居中的圆环图

今天药忘吃喽~ 2023-01-20 14:56 303阅读 0赞

## 效果图： ##

![在这里插入图片描述][20210513161210314.gif_pic_center]

## 1、引入插件：[vue中使用echarts][vue_echarts] ##

## 2、使用： ##

参考option：
    
    	  const handred = 100
          const point = 0
          pieOption: { 
            title: { 
              text: point + '%',
              x: 'center',
              y: 'center',
              textStyle: { 
                fontWeight: 'normal',
                color: 'white',
                fontSize: '25'
              }
            },
            tooltip: { 
              formatter: function(params) { 
                if (params.name == '稼动率') { 
                  return params.name + '：' + params.percent + ' %'
                } else { 
                  return ''
                }
              }
            },
            legend: { 
              show: false,
              itemGap: 12,
              data: ['稼动率', '剩余']
            },
            series: [{ 
              name: 'circle',
              type: 'pie',
              clockWise: true,
              radius: ['65%', '85%'],
              itemStyle: { 
                normal: { 
                  label: { 
                    show: false
                  },
                  labelLine: { 
                    show: false
                  }
                }
              },
              hoverAnimation: false,
              data: [{ 
                value: point,
                name: '稼动率',
                itemStyle: { 
                  normal: { 
                    color: {  // 颜色渐变
                      colorStops: [{ 
                        offset: 0,
                        color: '#4FADFD' // 0% 处的颜色
                      }, { 
                        offset: 1,
                        color: '#3b5bdc' // 100% 处的颜色1
                      }]
                    },
                    label: { 
                      show: false
                    },
                    labelLine: { 
                      show: false
                    }
                  }
                }
              }, { 
                name: '剩余',
                value: handred - point,
                itemStyle: { 
                  normal: { 
                    color: '#3e4657'
                  }
                }
              }]
            }]
          }

[20210513161210314.gif_pic_center]: /images/20221021/96ae364ef8e0473baa5215ec92f0351b.png
[vue_echarts]: https://blog.csdn.net/weixin_44171757/article/details/100916901