vue接入echarts仪表盘

首先安装依赖
npm install echarts -S 国内的用户可以使用
cnpm install echarts -S
html代码

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

按需引入包

// 引入基本模板
let echarts = require('echarts/lib/echarts')
//引入仪表盘的包
require('echarts/lib/chart/gauge')

data里面的参数可以参考官网示例中的

data() {
  return {
	option = {
	 tooltip: {
	     formatter: '{a} <br/>{b} : {c}%'
	 },
	 series: [{
	     name: 'Pressure',
	     type: 'gauge',
	     detail: {
	         formatter: '{value}'
	     },
	     data: [{
	         value: 50,
	         name: 'SCORE'
	     }]
	 }]
	}
  };
},

接下来我们就可以在mounted里面运行echarts了

  mounted() {
    // 初始化echarts 并且绑定标签
    var myChart = echarts.init(document.getElementById("main"));
    //设置参数
    myChart.setOption(this.option, true);
   
  },

效果图