Echarts 液体填充图表组件 - 可视化数据展示

<template>
  <div id="liquidFill" ref="echarts"></div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'

export default {
  name: 'chart1',
  props: ['value', 'title', 'percent', 'colorList'],
  methods: {
    initChart() {
      let titleValue = this.value;
      // let percent1 = Number(this.value) / Number(this.percent);
      var value = 0.45;
      var option = {
        title: [
          {
            text: this.value,
            subtext: this.title,
            x: '23%',
            y: '30%',
            textStyle: {
              fontSize: 40,
              fontWeight: '100',
              color: '#53bafb',
              fontFamily: 'BwFont'
            },
            subtextStyle: {
              color: '#fff',
              fontSize: 12
            },
            textAlign: 'center'
          }
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '85%',
            center: ['25%', '55%'],
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: this.colorList[0]
                  },
                  {
                    offset: 1,
                    color: this.colorList[0]
                  }
                ],
                globalCoord: false
              }
            ],
            data: [value, value], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: 'RGBA(51, 66, 127, 0.7)'
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  fontSize: 30,
                  color: '#53bafb',
                  fontFamily: 'BwFont'
                },
                formatter: function(res) {
                  return titleValue
                }
              }
            },
            outline: {
              borderDistance: 5,
              itemStyle: {
                borderWidth: 3,
                borderColor: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: '#246fcf'
                  }, {
                    offset: 0.5,
                    color: '#2f75cd'
                  }, {
                    offset: 1,
                    color: '#4681cc'
                  }],
                  globalCoord: false
                }
              }
            }
          }
        ]
      };
      const chartObj = echarts.init(this.$refs.echarts);
      chartObj.setOption(option);
    }
  },
  mounted() {
    this.initChart();
  },
  watch: {
    // value() {
    //   this.initChart()
    // },
    // percent() {
    //   this.initChart()
    // }
  }
}
</script>
<style scoped>
#liquidFill {
  height: 100%;
}
</style>
<p>传递过来的value值等于402 怎么渲染echart数据内容：根据代码逻辑，传递过来的value值将会作为标题文本显示在echart图表中。在mounted生命周期钩子函数中，会调用initChart方法来初始化echart图表，并将传递过来的value值作为标题文本显示在图表中。所以，当传递过来的value值等于402时，echart图表将会显示402作为标题文本。</p>