vue中用echarts实现仪表盘组件

组件页面
<template>
  <div class="chart-container" :id="_uid" :style="{width:'100%',height: height}"></div>
</template>

<script>
  export default {
    name: "SpeedCharts",
    props: {
      height: {
        type: String,
        default: '300px'
      },
      width: {
        type: String,
        default: '400px'
      },
      config: {
        type: Object,
        default: () => {
          return {
             series: []
          }
        }
      },

    },
    watch: {
      config: {
        handler: function () {
          this.drawLine()
        },
        // 开启深度监听：只要config中的任何一个属性发生改变，都会触发相应的代码
        deep: true
      }
    },
    data() {
      return {
        resizeTimer: null
      }
    },
    mounted() {
      this.drawLine()
      let _this = this
      let myChart = this.$echarts.init(document.getElementById(this._uid))
      window.addEventListener('resize', () => {
        if (_this.resizeTimer) clearTimeout(_this.resizeTimer);
        _this.resizeTimer = setTimeout(() => {
          myChart.resize();
          _this.drawLine()
        }, 300)
      })
    },
    methods: {
      drawLine() {
        const echarts = this.$echarts;
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(this._uid));

        let config = this.config;


        // 绘制图表
        myChart.setOption(config);
      }
    }
  }
</script>

<style lang="scss">
  .chart-container {
    div:first-child {
      width: 100% !important;

      canvas {
        width: 100% !important;
      }
    }
  }
</style>

父页面
 <div>
     <GaugeCharts :height="'32vh'" :config=gaugecConfigTwo></GaugeCharts>
 </div>
import {GaugeCharts} from "@/components/GaugeCharts,vue";
export default {
components: {Table,GaugeCharts},
data() {
  return {
    gaugecConfigTwo:{
      series: [
          {
          type: 'gauge',
          title : {  
            offsetCenter : [0, '100%'],//设置完成率位置             //设置仪表盘中间显示文字式
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontSize: 18,
              color:"white", 
            }
          },
          radius:	"70%",
          center: ["30%", "45%"],
          axisLine: {
              lineStyle: {
              width: 10,
              color: [
                  [0.2, 'rgba(253, 70, 40, 1)'],
                  [0.8, 'rgba(63, 146, 236, 1)'],
                  [1, 'rgba(29, 138, 27, 1)']
              ]
              }
          },
          pointer: {//指针的样式
              itemStyle: {
              color:'auto'
            }
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 15,
            itemStyle: {
              borderWidth: 8
            }
          },
          axisTick: {//小刻度
              distance: 0,
              length: 6,
              lineStyle: {
              color: 'auto',
              width: 1
              }
          },
          splitLine: {//大刻度
              distance: 0,
              length: 10,
              lineStyle: {
              color: 'auto',
              width: 1
              }
          },
          axisLabel: {//数字
              color: 'auto',
              distance: 15,
              fontSize: 14
          },
          detail: {//中间的数字
              valueAnimation: true,
              fontSize: 30,
              color:'auto',
              offsetCenter: [0, '70%']
          },
          data: [//值
              {
              value: 90,
              name: '健康指数'
              }
            ]
          }
        ]
    }
  }
}