vue?Echarts實(shí)現(xiàn)儀表盤(pán)案例
更新時(shí)間：2022年03月28日 08:11:52 作者：yiyiyiyi_
這篇文章主要為大家詳細(xì)介紹了vue?Echarts實(shí)現(xiàn)儀表盤(pán)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue Echarts實(shí)現(xiàn)儀表盤(pán)案例的具體代碼，供大家參考，具體內(nèi)容如下
1、main.js 頁(yè)面
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頁(yè)面
<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 系列名稱(chēng) ?b ?數(shù)據(jù)項(xiàng)名稱(chēng) ?c ?數(shù)值
? ? ? ? ? formatter: "{a} <br/>{c} "
? ? ? ? },
? ? ? ? toolbox: {
? ? ? ? ? show: true,
? ? ? ? ? feature: {
? ? ? ? ? ? restore: { show: true },
? ? ? ? ? ? saveAsImage: { show: true }
? ? ? ? ? }
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? name: "速度",
? ? ? ? ? ? type: "gauge",
? ? ? ? ? ? // 定義居于上層，否則會(huì)被覆蓋
? ? ? ? ? ? z: 3,
? ? ? ? ? ? min: 0,
? ? ? ? ? ? max: 220,
? ? ? ? ? ? // 分成多少等份
? ? ? ? ? ? splitNumber: 11,
? ? ? ? ? ? // 半徑
? ? ? ? ? ? radius: "50%",
? ? ? ? ? ? axisLine: {
? ? ? ? ? ? ? // 坐標(biāo)軸線(xiàn)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle控制線(xiàn)條樣式
? ? ? ? ? ? ? ? width: 10
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? axisTick: {
? ? ? ? ? ? ? // 坐標(biāo)軸小標(biāo)記
? ? ? ? ? ? ? length: 15, // 屬性length控制線(xiàn)長(zhǎng)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle控制線(xiàn)條樣式
? ? ? ? ? ? ? ? color: "auto"
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? splitLine: {
? ? ? ? ? ? ? // 分隔線(xiàn)
? ? ? ? ? ? ? length: 20, // 屬性length控制線(xiàn)長(zhǎng)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle（詳見(jiàn)lineStyle）控制線(xiàn)條樣式
? ? ? ? ? ? ? ? color: "auto"
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 儀表盤(pán)內(nèi)刻度提示顯示樣式
? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? backgroundColor: "auto",
? ? ? ? ? ? ? borderRadius: 2,
? ? ? ? ? ? ? color: "#eee",
? ? ? ? ? ? ? padding: 3,
? ? ? ? ? ? ? textShadowBlur: 2,
? ? ? ? ? ? ? textShadowOffsetX: 1,
? ? ? ? ? ? ? textShadowOffsetY: 1,
? ? ? ? ? ? ? textShadowColor: "#222"
? ? ? ? ? ? },
? ? ? ? ? ? // 儀表盤(pán)內(nèi) 單位 樣式 km/h
? ? ? ? ? ? title: {
? ? ? ? ? ? ? // 其余屬性默認(rèn)使用全局文本樣式，詳見(jiàn)TEXTSTYLE
? ? ? ? ? ? ? fontWeight: "bolder",
? ? ? ? ? ? ? fontSize: 20,
? ? ? ? ? ? ? // 文字傾斜樣式
? ? ? ? ? ? ? fontStyle: "italic"
? ? ? ? ? ? },
? ? ? ? ? ? //
? ? ? ? ? ? detail: {
? ? ? ? ? ? ? // 其余屬性默認(rèn)使用全局文本樣式，詳見(jiàn)TEXTSTYLE
? ? ? ? ? ? ? // 設(shè)置內(nèi)容提示格式
? ? ? ? ? ? ? formatter: function(value) {
? ? ? ? ? ? ? ? value = (value + "").split(".");
? ? ? ? ? ? ? ? value.length < 2 && value.push("00");
? ? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? ? ("00" + value[0]).slice(-2) +
? ? ? ? ? ? ? ? ? "." +
? ? ? ? ? ? ? ? ? (value[1] + "00").slice(0, 2)
? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? },
? ? ? ? ? ? ? // 內(nèi)容文字粗細(xì)
? ? ? ? ? ? ? fontWeight: "bolder",
? ? ? ? ? ? ? // 內(nèi)容盒子邊框圓角
? ? ? ? ? ? ? // borderRadius: 3,
? ? ? ? ? ? ? // 內(nèi)容盒子背景色
? ? ? ? ? ? ? // backgroundColor: '#444',
? ? ? ? ? ? ? // 內(nèi)容盒子顏色
? ? ? ? ? ? ? // 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: {}
? ? ? ? ? ? },
? ? ? ? ? ? // 當(dāng)前的 值 和 單位
? ? ? ? ? ? data: [{ value: 40, name: "km/h" }]
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "轉(zhuǎn)速",
? ? ? ? ? ? type: "gauge",
? ? ? ? ? ? // 圓心位置
? ? ? ? ? ? center: ["20%", "55%"], // 默認(rèn)全局居中
? ? ? ? ? ? radius: "35%", // 圓半徑
? ? ? ? ? ? min: 0,
? ? ? ? ? ? max: 7,
? ? ? ? ? ? // 結(jié)束角度
? ? ? ? ? ? endAngle: 45,
? ? ? ? ? ? // 分成多少等份
? ? ? ? ? ? splitNumber: 7,
? ? ? ? ? ? axisLine: {
? ? ? ? ? ? ? // 坐標(biāo)軸線(xiàn)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle控制線(xiàn)條樣式
? ? ? ? ? ? ? ? width: 8
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? axisTick: {
? ? ? ? ? ? ? // 坐標(biāo)軸小標(biāo)記
? ? ? ? ? ? ? length: 12, // 屬性length控制線(xiàn)長(zhǎng)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle控制線(xiàn)條樣式
? ? ? ? ? ? ? ? color: "auto"
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? splitLine: {
? ? ? ? ? ? ? // 分隔線(xiàn)
? ? ? ? ? ? ? length: 20, // 屬性length控制線(xiàn)長(zhǎng)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle（詳見(jiàn)lineStyle）控制線(xiàn)條樣式
? ? ? ? ? ? ? ? color: "auto"
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 指針
? ? ? ? ? ? pointer: {
? ? ? ? ? ? ? width: 5
? ? ? ? ? ? },
? ? ? ? ? ? title: {
? ? ? ? ? ? ? // 位置
? ? ? ? ? ? ? offsetCenter: [0, "-30%"] // x, y，單位px
? ? ? ? ? ? },
? ? ? ? ? ? detail: {
? ? ? ? ? ? ? // 其余屬性默認(rèn)使用全局文本樣式，詳見(jiàn)TEXTSTYLE
? ? ? ? ? ? ? fontWeight: "bolder"
? ? ? ? ? ? },
? ? ? ? ? ? data: [{ value: 1.5, name: "x1000 r/min" }]
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "油表",
? ? ? ? ? ? type: "gauge",
? ? ? ? ? ? // 圓心
? ? ? ? ? ? center: ["77%", "50%"], // 默認(rèn)全局居中
? ? ? ? ? ? // 半徑
? ? ? ? ? ? radius: "25%",
? ? ? ? ? ? min: 0,
? ? ? ? ? ? max: 2,
? ? ? ? ? ? // 開(kāi)始角度
? ? ? ? ? ? startAngle: 135,
? ? ? ? ? ? // 結(jié)束角度
? ? ? ? ? ? endAngle: 45,
? ? ? ? ? ? // 分幾等份
? ? ? ? ? ? splitNumber: 2,
? ? ? ? ? ? axisLine: {
? ? ? ? ? ? ? // 坐標(biāo)軸線(xiàn)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle控制線(xiàn)條樣式
? ? ? ? ? ? ? ? width: 8
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? axisTick: {
? ? ? ? ? ? ? // 坐標(biāo)軸小標(biāo)記
? ? ? ? ? ? ? splitNumber: 5,
? ? ? ? ? ? ? length: 10, // 屬性length控制線(xiàn)長(zhǎng)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle控制線(xiàn)條樣式
? ? ? ? ? ? ? ? color: "auto"
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 設(shè)置內(nèi)容提示格式
? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? formatter: function(v) {
? ? ? ? ? ? ? ? switch (v + "") {
? ? ? ? ? ? ? ? ? case "0":
? ? ? ? ? ? ? ? ? ? return "E";
? ? ? ? ? ? ? ? ? case "1":
? ? ? ? ? ? ? ? ? ? return "Gas";
? ? ? ? ? ? ? ? ? case "2":
? ? ? ? ? ? ? ? ? ? return "F";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? splitLine: {
? ? ? ? ? ? ? // 分隔線(xiàn)
? ? ? ? ? ? ? length: 15, // 屬性length控制線(xiàn)長(zhǎng)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle（詳見(jiàn)lineStyle）控制線(xiàn)條樣式
? ? ? ? ? ? ? ? color: "auto"
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? pointer: {
? ? ? ? ? ? ? width: 2
? ? ? ? ? ? },
? ? ? ? ? ? title: {
? ? ? ? ? ? ? show: false
? ? ? ? ? ? },
? ? ? ? ? ? detail: {
? ? ? ? ? ? ? show: false
? ? ? ? ? ? },
? ? ? ? ? ? data: [{ value: 0.5, name: "gas" }]
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "水表",
? ? ? ? ? ? type: "gauge",
? ? ? ? ? ? center: ["77%", "50%"], // 默認(rèn)全局居中
? ? ? ? ? ? radius: "25%",
? ? ? ? ? ? min: 0,
? ? ? ? ? ? max: 2,
? ? ? ? ? ? startAngle: 315,
? ? ? ? ? ? endAngle: 225,
? ? ? ? ? ? splitNumber: 2,
? ? ? ? ? ? axisLine: {
? ? ? ? ? ? ? // 坐標(biāo)軸線(xiàn)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle控制線(xiàn)條樣式
? ? ? ? ? ? ? ? width: 8
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? axisTick: {
? ? ? ? ? ? ? // 坐標(biāo)軸小標(biāo)記
? ? ? ? ? ? ? show: false
? ? ? ? ? ? },
? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? formatter: function(v) {
? ? ? ? ? ? ? ? switch (v + "") {
? ? ? ? ? ? ? ? ? case "0":
? ? ? ? ? ? ? ? ? ? return "H";
? ? ? ? ? ? ? ? ? case "1":
? ? ? ? ? ? ? ? ? ? return "Water";
? ? ? ? ? ? ? ? ? case "2":
? ? ? ? ? ? ? ? ? ? return "C";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? splitLine: {
? ? ? ? ? ? ? // 分隔線(xiàn)
? ? ? ? ? ? ? length: 15, // 屬性length控制線(xiàn)長(zhǎng)
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? // 屬性lineStyle（詳見(jiàn)lineStyle）控制線(xiàn)條樣式
? ? ? ? ? ? ? ? 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>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能
這篇文章主要為大家詳細(xì)介紹了vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作
這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
詳解Vue如何實(shí)現(xiàn)響應(yīng)式布局
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)響應(yīng)式布局的兩種方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下2023-12-12
簡(jiǎn)單了解vue中的v-if和v-show的區(qū)別
這篇文章主要介紹了簡(jiǎn)單了解vue中的v-if和v-show的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vue中關(guān)于trigger的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
淺談vue項(xiàng)目?jī)?yōu)化之頁(yè)面的按需加載(vue+webpack)
本篇文章主要介紹了vue項(xiàng)目?jī)?yōu)化之頁(yè)面的按需加載(vue+webpack)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解
el-tree-select組件是el-tree和el-select的結(jié)合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關(guān)資料,需要的朋友可以參考下2022-11-11
詳解如何制作并發(fā)布一個(gè)vue的組件的npm包
這篇文章主要介紹了詳解如何制作并發(fā)布一個(gè)vue的組件的npm包，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
這篇文章主要介紹了vue中使用gojs/jointjs的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象
這篇文章主要介紹了vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04