基础仪表盘

by vecharts

HTML

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/echarts@v4.9.0/dist/echarts.min.js"></script>
<script src="//unpkg.com/ve-charts@latest/lib/ve-charts.umd.min.js"></script>

<div id="app">
  <div class="charts-content">
    <ve-gauge-chart :data="chartData" :settings="chartSettings" />
  </div>
</div>

JavaScript

new Vue({
  data() {
    return {
      chartData: {
        measures: [{
          name: '业务指标',
          data: [
            {
              name: '完成率',
              value: (Math.random() * 100).toFixed(2) - 0
            }
          ]
        }]
      },
      chartSettings: {
      	detail: {
        	formatter: '{value}%'
        }
      }
    }
  },
  mounted () {
    const self = this
    setInterval(() => {
      self.chartData.measures[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
    }, 2000)
  }
}).$mount('#app')