vue?Echarts實現儀表盤案例
更新時間：2022年03月28日 08:11:52 作者：yiyiyiyi_
這篇文章主要為大家詳細介紹了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} "
? ? ? ? },
? ? ? ? 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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue調取電腦攝像頭實現拍照功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯動操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細介紹了Vue實現響應式布局的兩種方法,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解一下2023-12-12
這篇文章主要介紹了簡單了解vue中的v-if和v-show的區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vue中關于trigger的用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
淺談vue項目優(yōu)化之頁面的按需加載(vue+webpack)
本篇文章主要介紹了vue項目優(yōu)化之頁面的按需加載(vue+webpack)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Element?Plus的el-tree-select組件懶加載+數據回顯詳解
el-tree-select組件是el-tree和el-select的結合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關于Element?Plus的el-tree-select組件懶加載+數據回顯的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解如何制作并發(fā)布一個vue的組件的npm包，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue中使用gojs/jointjs的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue如何通過props方式在子組件中獲取相應的對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04