Vue Echarts简易实现仪表盘
更新时间：2022年12月17日 09:57:15 作者：爱学习de测试小白
这篇文章主要为大家详细介绍了Vue Echarts实现仪表盘案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言
本篇来学习写仪表盘图
仪表盘的特点
可以更直观的表现出某个指标的进度或实际情况
仪表盘的基本实现
- ECharts 最基本的代码结构
- 准备数据, 设置给 series 下的 data
- 在 series 下设置 type:gauge
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>仪表盘</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.getElementById("app"))
var option = {
series: [
{
type: 'gauge',
data: [
{
value: 95
}
]
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>效果
仪表盘的常见效果
- 数值范围: max min
- 多个指针: 增加data中数组的元素
- 多个指针颜色的差异: itemStyle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>仪表盘</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.getElementById("app"))
var option = {
series: [
{
type: 'gauge',
data: [
// 每一个对象就代表一个指针
{
name: 'mem',
value: 70,
itemStyle: { // 指针的样式
color: 'purple' // 指针的颜色
},
title: {
offsetCenter: ['-40%', '80%']
},
detail: {
offsetCenter: ['-40%', '95%']
}
},
{
name: 'cpu',
value: 80,
itemStyle: {
color: 'blue'
},
title: {
offsetCenter: ['40%', '80%']
},
detail: {
offsetCenter: ['40%', '95%']
}
},
],
detail: { // 数值文案样式
width: 40,
height: 14,
fontSize: 14,
color: '#fff',
backgroundColor: 'auto',
borderRadius: 3,
formatter: '{value}%'
},
title: { // name 文字大小
fontSize: 20
},
progress: { // 仪表盘数据样式
show: true,
overlap: true,
roundCap: true
},
max: 100,
min: 20 // min max 控制仪表盘数值范围
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>效果
到此这篇关于Vue Echarts简易实现仪表盘的文章就介绍到这了,更多相关Vue Echarts仪表盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue3中实现文本显示省略号和tooltips提示框的方式详解
在 B 端业务中,我们经常会遇到文本内容超出容器区域需显示省略号的需求,当鼠标移入文本时,会出现 Tooltip 显示完整内容,最近,我也遇到了这样的场景,接下来给大家介绍vue3中实现文本显示省略号和tooltips提示框的方式,需要的朋友可以参考下2024-04-04
这篇文章主要介绍的是Vue组件间的通信方式，本文将系统的介绍了几种不使用Vuex，比较实用的组件间的通信方式，希望能帮助到大家2023-04-04
这篇文章主要为大家详细介绍了6个vue前端常用的工具类,可直接复用,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
这篇文章主要介绍了vue封装Animate.css动画库的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
Vue中的Mind-Map通常是指使用Vue.js这个前端框架构建的思维导图组件或库,它可以帮助开发者在Web应用中创建动态、交互式的思维导图,让用户可以直观地组织信息和结构化数据,本文介绍了Vue使用mind-map实现在线思维导图,需要的朋友可以参考下2024-07-07
Vue3 嵌套路由的使用和 Vue2 相差不大,主要的区别是 Vue3 的路由实例化使用了 createApp() 方法,所以实例化路由时需要传入根组件,这篇文章主要介绍了vue3使用vue-router嵌套路由(多级路由),需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue中this.$parent的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家详细介绍了VUE递归树形实现多级列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
使用vue-cli初始化项目时运行‘npm run dev’报错及解决
这篇文章主要介绍了使用vue-cli初始化项目时运行‘npm run dev’报错及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue中 根据判断条件添加一个或多个style及class的写法小结
这篇文章主要介绍了vue中 根据判断条件添加一个或多个style及class的写法,文中给大家补充介绍了关于vue里:class的使用结合自己的实现给大家讲解，需要的朋友可以参考下2023-03-03
最新评论