echarts 炫酷的仪表盘组件

 

 

<template>
  <div
    id="chart1"
    style="width:100%;height:100%;"
  ></div>
</template>
<script>
export default {
  
  data() {
    return {
      chart1:null,
      chartMeter: null,
      clockChartTimer: null,
      myIvstrAbility: 60,
      renderCompleted: false,
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    query() {
      this.chartMeter = document.getElementById(this.chart1);
      var myChart = this.$echarts.init(this.chartMeter);

      var option
      option = {
        title: {
          text: '设备管理',
          textStyle: { // 标题样式
            color: '#fff'
          }
        },
        'series': [
          {
            'name': '仪表盘',
            'type': 'gauge',
            'radius': '85%',
            'startAngle': '240',
            'endAngle': '-60',
            // 图表的刻度分隔段数
            'splitNumber': 5,
            // 图表的轴线相关
            'axisLine': {
              'show': true,
              'lineStyle': {
                'color': [
                  [
                    0.9,
                    new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: '#FFD900'
                    },
                    {
                      offset: 1,
                      color: '#FF8000'
                    }
                    ])
                  ],
                  [1, '#56606E']
                ],
                'width': 15
              }
            },
            // 图表的刻度及样式
            'axisTick': {
              'lineStyle': {
                'color': '#0F1318',
                'width': 2
              },
              'length': 15,
              'splitNumber': 1
            },
            // 图表的刻度标签(20、40、60等等)
            'axisLabel': {
              'distance': -8,
              'textStyle': {
                'color': '#fff'
              }
            },
            // 图表的分割线
            'splitLine': {
              'show': false
            },
            // 图表的指针
            'pointer': {
              'show': false
            },
            // 图表的数据详情
            'detail': {
              'formatter': function (params) {
                return '{title|' + '数值}' + '\n\n' + '{score|' + params + '}'
              },
              'offsetCenter': [0, 0],
              'rich': {
                'title': {
                  'fontSize': 24,
                  'color': '#fff',
                  'lineHeight': 30
                },
                'score': {
                  'fontSize': 30,
                  'color': '#fff'
                }
              }
            },
            // 图表的标题
            'title': {
              'offsetCenter': [0, '90%'],
              'color': '#fff',
              'fontSize': 20
            },
            'data': [{
              'name': '完成',
              'value': 31
            }]
          },
          {
            'name': '外层线',
            'type': 'gauge',
            'radius': '72%',
            'startAngle': '240',
            'endAngle': '-60',
            'center': ['50%', '50%'],
            'axisLine': {
              'lineStyle': {
                'width': 1,
                'color': [[1, '#56606E']]
              }
            },
            'splitLine': {
              'length': -6,
              'lineStyle': {
                'opacity': 0
              }
            },
            'axisLabel': {
              'show': false
            },
            'axisTick': {
              'splitNumber': 1,
              'lineStyle': {
                'opacity': 0
              }
            },
            'detail': {
              'show': false
            },
            'pointer': {
              'show': false
            }
          }
        ]
      }
      let tempVal = 0
      clearInterval(this.clockChartTimer)
      this.clockChartTimer = setInterval(() => {
        if (tempVal > this.myIvstrAbility) {
          clearInterval(this.clockChartTimer)
          // 最后转到最终数据的地方
          option.series[0].data[0].value = this.myIvstrAbility
          option.series[0].axisLine.lineStyle.color[0][0] = this.myIvstrAbility / 100
          // 使用刚指定的配置项和数据显示图表
          myChart.setOption(option)
          // 初始化渲染完成
          this.renderCompleted = true
          return
        }
        option.series[0].data[0].value = tempVal
        option.series[0].axisLine.lineStyle.color[0][0] = tempVal / 100
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        tempVal++
      }, 20)
      // 此处监听浏览器的resize，重新渲染图表
      let that = this
      window.addEventListener("resize", function () {
        clearTimeout(that.resizeTimer)
        that.resizeTimer = setTimeout(() => {
          myChart.resize()
        }, 500)
      })
    }
  },
}
</script>
<style lang="scss" scoped>
#chartMeter {
    width: 100%;
    height: 100%;
}
</style>