vue实现echarts中的仪表盘

vue实现echarts中的仪表盘

最终结果

一:安装

1. 首先需要安装echarts依赖包

npm install echarts -S

2. 或者使用国内的淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

二: 创建图表

全局引入

main.js

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Hello.vue

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

  export default {
   
    data(){
   
      return {
   }
    }, 
     mounted(){
   
        this.myChart() //函数调用
     },
     methods:{
   
        myChart() {
   
        let columnar = this.$echarts.init(document.getElementById('myChart'));
        columnar.setOption({
   
          tooltip : {
   
            formatter: "{a} <br/>{c} {b}"
          },
          toolbox: {
   
            show: true,
            feature: {
   
              restore: {
   show: true},
              saveAsImage: {
   show: true}
            }
          },
          series : [
           {
   
                    name: '空气质量:',
                    type: 'gauge',
                    z: 3,
                    min: 0,
                    max: 500,
                    splitNumber: 10,
                    radius: '60%'