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类型