在Vue 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: [ // 每一个对象就代表一个指针 { 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>
需要注意:
ECharts 最基本的代码结构
准备数据, 设置给 series 下的 data
在 series 下设置 type:gauge
好了,这个只是一个基本的仪表盘效果,下次我们来大家继续深入学习美化版的仪表盘,敬请期待。