目录前言仪表盘的特点仪表盘的基本实现仪表盘的常见效果前言 本篇来学习写仪表盘图 仪表盘的特点 可以更直观的表现出某个指标的进度或实际情况 仪表盘的基本实现 ECharts 最基本的代
本篇来学习写仪表盘图
可以更直观的表现出某个指标的进度或实际情况
<!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>效果
<!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仪表盘内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: VueEcharts简易实现仪表盘
本文链接: https://www.lsjlt.com/news/175145.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0