仪表盘（用ECharts绘制）

仪表盘主要用在进度把控和数据范围的监测

基本实现

1.基本的代码结构

2.在series下面设置type:guage

3.在series下面的data配置数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="lib/echarts.min.js"></script>
</head>
<body><div style="width: 600px;height: 400px;"></div><script>var mCharts = echarts.init(document.querySelector('div'))var option = {series: [{type: 'gauge',data: [{value: 97     //每一个对象就代表一个指针}]}]}mCharts.setOption(option)</script>
</body>
</html>

常用效果

数值范围 min、max

多个指针增加data中的数组元素

指针样式 itemStyle

//其它代码和上面一样
var option = {series: [{type: 'gauge',data: [{value: 97,      //每一个对象就代表一个指针itemStyle: {color: 'pink'},detail: {show: false   //不显示数据}},{value: 85,itemStyle: {color: 'green'},detail: {show: false   //不显示数据}     }],min: 50   //min、max控制仪表盘的数值范围}]}

仪表盘（用ECharts绘制）相关推荐

hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图简单举例说明下echarts如何绘制条形图和扇形图代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
技术图文：如何利用C# + Echarts 绘制「堆叠条形图」？
背景前几天,我们介绍了如何利用C# + Echarts 绘制 Bar Simple?,原以为把 Echarts 封装到这种程度就可以完成当前任务了. 可是,把软件原型提交给对方时,发现对方更希望& ...
python画图代码彩虹-echarts绘制彩虹图
echarts绘制彩虹图 1.开发环境 vue+echarts 2.电脑系统 windows10专业版 3.在使用echarts开发的过程中,我们可能需要绘制彩虹图,下面是我进行的总结,希望对你有所帮 ...
Echarts绘制Tree树图的涟漪效果effectScatter
1. 问题描述 Echarts绘制图表是支持涟漪效果的,但是搜了材料,有地图.折线图.散点图等,不支持树图. 本文方法实现了一种可以任意Echarts图的涟漪效果 2. 效果展示将树图的一级节点全部 ...
ECharts绘制饼图
ECharts绘制各种图表非常方便,首先去官网找到想要绘制的图表做参考 ,以下链接时官网示例 Examples - Apache EChartsECharts, a powerful, interac ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Echarts — 绘制省级地图
版本:vue@3.0.5 + echarts@5.1.2 本文将介绍如何使用 echarts 绘制一个省级地图(以江西省为例) 一.安装 echarts npm i echarts --save-de ...
echarts绘制节点关系图
echarts绘制节点关系图 HTML代码 <!DOCTYPE html> <html><head><meta charset="UTF-8&quo ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
【echarts】echarts绘制关系图
echarts绘制关系图,效果如图,粗麻编写,教程往下看 1.vue安装echarts npm install echarts 2.引入echarts 3.在VUE页面中编写遇到问题:关系数据显示不 ...

仪表盘（用ECharts绘制）

基本实现

常用效果

仪表盘（用ECharts绘制）相关推荐

最新文章

热门文章