echarts 仪表盘教程

1：echarts 后面仪表盘三分钟上手示例

• 引入相关的文件

• 原始默认显示如下

图片.png

• 三分钟代码
  参考API：http://echarts.baidu.com/examples/editor.html?c=gauge

2：相关修改

• 需求一：把总体的背景色改为黑色
  首先，把总体的背景色改为黑色，显得比较高大上添加属性：backgroundColor: '#12cf96',

  

  图片.png

  
  效果如下

  

  图片.png

   

• 需求二：仪表盘刻度颜色

在series里面添加代码，让 红色在0-20 ，80-100是绿色

axisLine: {            // 坐标轴线  
                     lineStyle: {       // 属性lineStyle控制线条样式  
                         color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
                                }  
                            },   

图片.png

 

原文作者：祈澈姑娘

关注「编程微刊」公众号 ，后台回复「领取资源」，获取IT资源和小程序500G干货大全。