vue Echarts 仪表盘案例 1、main.js 页面 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import echarts from "echarts"; Vue.config.productionTip = false; Vue.prototype.$echarts = echarts; new Vue({ router, store, render: h => h(App) }).$mount('#app') 2、Guage.vue 页面 <template> <div> <div id="gauge" style="width:800px;height:500px;"></div> </div> </template> <script> export default { mounted() { this.SetGaugeEchart(); }, methods: { SetGaugeEchart() { let myChart = this.$echarts.init(document.getElementById("gauge")); var option = { tooltip: { // a 系列名称 b 数据项名称 c 数值 formatter: "{a} <br/>{c} {b}" }, toolbox: { show: true, feature: { restore: { show: true }, saveAsImage: { show: true } } }, series: [ { name: "速度", type: "gauge", // 定义居于上层,否则会被覆盖 z: 3, min: 0, max: 220, // 分成多少等份 splitNumber: 11, // 半径 radius: "50%", axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 width: 10 } }, axisTick: { // 坐标轴小标记 length: 15,