vue Echarts实现仪表盘案例

本文实例为大家分享了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, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            // 仪表盘内刻度提示显示样式
            axisLabel: {
              backgroundColor: "auto",
              borderRadius: 2,
              color: "#eee",
              padding: 3,
              textShadowBlur: 2,
              textShadowOffsetX: 1,
              textShadowOffsetY: 1,
              textShadowColor: "#222"
            },
            // 仪表盘内 单位 样式 km/h
            title: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              fontSize: 20,
              // 文字倾斜样式
              fontStyle: "italic"
            },
            //
            detail: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              // 设置内容提示格式
              formatter: function(value) {
                value = (value + "").split(".");
                value.length < 2 && value.push("00");
                return (
                  ("00" + value[0]).slice(-2) +
                  "." +
                  (value[1] + "00").slice(0, 2)
                );
              },
              // 内容文字粗细
              fontWeight: "bolder",
              // 内容盒子边框圆角
              // borderRadius: 3,
              // 内容盒子背景色
              // backgroundColor: '#444',
              // 内容盒子颜色
              // borderColor: '#aaa',
              // 阴影
              // shadowBlur: 5,
              // shadowColor: '#333',
              // shadowOffsetX: 0,
              // shadowOffsetY: 3,
              // 边框
              // borderWidth: 2,
              // 文字
              // textBorderColor: '#000',
              // textBorderWidth: 2,
              // textShadowBlur: 2,
              // textShadowColor: '#fff',
              // textShadowOffsetX: 0,
              // textShadowOffsetY: 0,
              fontFamily: "Arial",
              width: 100,
              // color: '#eee',
              rich: {}
            },
            // 当前的 值 和 单位
            data: [{ value: 40, name: "km/h" }]
          },
          {
            name: "转速",
            type: "gauge",
            // 圆心位置
            center: ["20%", "55%"], // 默认全局居中
            radius: "35%", // 圆半径
            min: 0,
            max: 7,
            // 结束角度
            endAngle: 45,
            // 分成多少等份
            splitNumber: 7,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            // 指针
            pointer: {
              width: 5
            },
            title: {
              // 位置
              offsetCenter: [0, "-30%"] // x, y，单位px
            },
            detail: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder"
            },
            data: [{ value: 1.5, name: "x1000 r/min" }]
          },
          {
            name: "油表",
            type: "gauge",
            // 圆心
            center: ["77%", "50%"], // 默认全局居中
            // 半径
            radius: "25%",
            min: 0,
            max: 2,
            // 开始角度
            startAngle: 135,
            // 结束角度
            endAngle: 45,
            // 分几等份
            splitNumber: 2,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8
              }
            },
            axisTick: {
              // 坐标轴小标记
              splitNumber: 5,
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            // 设置内容提示格式
            axisLabel: {
              formatter: function(v) {
                switch (v + "") {
                  case "0":
                    return "E";
                  case "1":
                    return "Gas";
                  case "2":
                    return "F";
                }
              }
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 2
            },
            title: {
              show: false
            },
            detail: {
              show: false
            },
            data: [{ value: 0.5, name: "gas" }]
          },
          {
            name: "水表",
            type: "gauge",
            center: ["77%", "50%"], // 默认全局居中
            radius: "25%",
            min: 0,
            max: 2,
            startAngle: 315,
            endAngle: 225,
            splitNumber: 2,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8
              }
            },
            axisTick: {
              // 坐标轴小标记
              show: false
            },
            axisLabel: {
              formatter: function(v) {
                switch (v + "") {
                  case "0":
                    return "H";
                  case "1":
                    return "Water";
                  case "2":
                    return "C";
                }
              }
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 2
            },
            title: {
              show: false
            },
            detail: {
              show: false
            },
            data: [{ value: 0.5, name: "gas" }]
          }
        ]
      };

      setInterval(function() {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
        option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
        option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
        myChart.setOption(option, true);
      }, 2000);
    }
  }
};
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。