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

图片.png

原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。