Vue Echarts简易实现仪表盘

前言

本篇来学习写仪表盘图

仪表盘的特点

可以更直观的表现出某个指标的进度或实际情况

仪表盘的基本实现

  • ECharts 最基本的代码结构
  • 准备数据, 设置给 series 下的 data
  • 在 series 下设置 type:gauge



  
  
  
  仪表盘
  
  


  

效果

Vue Echarts简易实现仪表盘_第1张图片

仪表盘的常见效果

  • 数值范围: max min
  • 多个指针: 增加data中数组的元素
  • 多个指针颜色的差异: itemStyle



    
    
    
    仪表盘
    
    


效果

Vue Echarts简易实现仪表盘_第2张图片

到此这篇关于Vue Echarts简易实现仪表盘的文章就介绍到这了,更多相关Vue Echarts仪表盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Vue Echarts简易实现仪表盘)