<template>
  <div :style="{ padding: '0' }">
    <div ref="main" style="width: 100%; height: 180px"></div>
  </div>
</template>

<script>

  export default {
    name:"DashChartDemo",
    props:{
      color:{
        default:'#E96B5F'
      },
      dataSource:{
        default:70
      }
    },
    mounted(){
     this.drawChart()
    },
    data() {
      return {
        myChart: null,
      }
    },
    watch:{
      dataSource:function (newv,oldv){
        this.drawChart()
      }
    },

    methods:{
      drawChart() {
        let that =  this
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        that.myChart = that.$echarts.init(that.$refs.main);
        // 指定图表的配置项和数据
        let option = {
          series: [
            {
              type: 'gauge',
              radius:'100%',
              center: ['50%', '70%'],
              startAngle: 180,
              endAngle: 0,
              itemStyle: {
                color: that.color,
                 shadowColor: 'rgba(255,255,255,0.45)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              progress: {
                show: true,
                width: 12,
                roundCap: true,
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 12,
                  color: [
                    [1, '#F1F8FF']
                  ]
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show:false,

              },
              axisLabel: {
                show:false,

              },
              pointer: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                fontSize: 20,
                fontWeight:300,
                offsetCenter: [0, '-20%'],
                valueAnimation: true,
                formatter: function (value) {
                  return value + '%';
                },
                color: 'auto'
              },
              data: [
                {
                  value: that.dataSource
                }
              ]
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        that.myChart.setOption(option);
        window.addEventListener("resize", () => {
          that.myChart.resize();
        });
      },
    },
    beforeDestroy() {
      window.removeEventListener("resize", () => {
        this.myChart.resize();
      });
    },

  };
</script>
