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} {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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue.js 是一种流行的 JavaScript 框架，可以使 Web 应用程序的开发变得更加轻松和高效，这篇文章主要介绍了在 vue 中鼠标悬停时显示元素或文本,需要的朋友可以参考下2023-05-05
Vue3 setup语法糖销毁一个或多个定时器(setTimeout/setInterval)
这篇文章主要给大家介绍了关于Vue3 setup语法糖销毁一个或多个定时器(setTimeout/setInterval)的相关资料,vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可,需要的朋友可以参考下2023-10-10
这篇文章主要给大家介绍了关于vue3.0透传属性和事件使用的相关资料,透传attribute指的是传递给一个组件,却没有被该组件声明为props或emits的attribute或者v-on事件监听器,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue 自定义内置组件 select的相关知识，整合了第三方jquery 插件select2,具体实例代码大家参考下本文2018-04-04
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue elementUI select下拉框如何设置默认值
这篇文章主要介绍了vue elementUI select下拉框如何设置默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue+elementUI下拉框回显问题及解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
本文主要介绍了在Vue中实现动态合计两个字段并输出摘要信息的方法,通过使用监听器和深度监听,确保当数据变化时能正确更新合计结果,具有一定的参考价值,感兴趣的可以了解一下2024-11-11
Vue3 中 watch 与 watchEffect 区别及用法小结
这篇文章主要介绍了Vue3 中 watch 与 watchEffect 有什么区别？watch中需要指明监视的属性，也需要指明监视的回调，而watchEffect中不需要指明监视的属性，只需要指明监视的回调，回调函数中用到哪个属性，就监视哪个属性，本文给大家详细介绍，需要的朋友参考下2022-06-06
这篇文章主要介绍了vue 路由视图 router-view嵌套跳转，主要实现的内容有制作一个登录页面，跳转到首页，首页包含菜单栏、顶部导航栏、主体，标准的后台网页格式，菜单点击显示不同的页面，感兴趣的小伙伴请参考下面文章内容2021-09-09
最新评论