echarts-百分比图

二次开发 封装 百度 echarts 图表 百分比图 公司需求 样式如下图：

话不多说上代码：

<template>
  <div ref="ringChart" class="ringChart"></div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "Ring",
    props: {
      // 颜色
      color: {
        type: String,
        default () {return 'red'}
      },
      // 数据
      data: {
        type: Object,
        default () {return {}
        }
      }
    },
    data () {return {}
    },
    mounted(){
      
      const option = {
        legend: {
            orient: 'vertical',
            left: 'center',
            top: '10%',
            selectedMode:false,
            icon:'none',
            formatter: [`{a|${this.data.text}}{b|/${this.data.subtext}}`,
            ].join('\n'),
            textStyle: {
                rich: {
                    a: {
                        color: this.color,
                        textShadowColor:this.color,
                        textShadowBlur:2,
                        fontSize: 14
                    },
                    b: {
                        color: '#DCDCDC',
                        fontSize: 12,
                    },
                }
            }
        },
        title: {text: `${parseFloat(this.data.value)}%`,
            textStyle: {
                color: this.color,
                textShadowColor:this.color,
                textShadowBlur:2,
                fontSize: 22
            },
            left: 'center',
            top: '80%'
          },
        angleAxis: {
            max: 100,
            show: false,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {show: false,},
            axisLine: {show: false,},
            axisTick: {show: false},
        },
        polar: {
            radius: '75%',
            center: ['50%', '50%'],
        },
        series: [{
            type: 'bar',
            // 圆角
            // roundCap: true,
            barWidth: 40,
            showBackground: true,
            backgroundStyle: {color: "rgba(219,219,219,0.3)"
            },
            data: [parseFloat(this.data.value)],
            coordinateSystem: 'polar',
            name: `${parseFloat(this.data.value)}`,
            label: {show: true,},
            itemStyle: {
                normal: {
                    opacity: 1,
                    color: this.color,
                }
            },
        }],
      }
      const chartObj = echarts.init(this.$refs.ringChart);
      chartObj.setOption(option)
    }
  }
</script>
<style lang="scss" scoped>
  .ringChart{
    width: 100%;
    height: 100%;
  }
</style>

调用方法（注册组件我就不上代码了）

<ring color="#289DE7" :data="{value: 83.33, text:' 疑似资金 ', subtext:' 总资金 '}"/>

传递参数总共是两个：

• color 颜色

• data 值

  • value 百分比数值 number 类型
  • text 主标题 string 类型
  • subtext 副标题 string 类型