ECharts 多仪表盘（自动）

 全部代码附结尾

• 任务描述

仪表盘（Gauge)也被称为拔号图表或速度表图，用于显示类似于速度计上的读数的数据，是一种拟物化的展示形式。仪表盘是常用的商业智能（BI）类的图表之一。可以轻松展示用户的数据。并能清晰地展示出某个指标值所在范围。为了更直观地查看项目的实际完成率数据，以及汽车的速度、发动机的转速、油表和水表的现状等，需要在Echarts中绘制单仪表盘进行展示。

• 案例描述

Echarts的主要创始者林峰表示，他在一次漫长的拥堵当中，有机会观察和思考仪表盘的问题，并突然意识到仪表盘不仅是在传达数据，还能传达出一种易于记忆的状态，并且影响人的情绪，这种正面或负面的情绪影响对决策运营有一定的帮助。

    仪表盘的颜色可以用于划分指标值的类别，而刻度标识、指针指示维度、指针角度则可用于表示数值。绘制仪表盘时，只需分配最小值和最大值，并定义一个颜色范围，指针将显示出关键指标的数据或当前进度。仪表盘可用于表示速度、体积、温度、进度、完成率、满意度等。

•  实现步骤

1. 引入echarts.js库文件
2. 定义图表容器大小
3. 初如化echarts实例对象
4. 配置图表组件

 var option={

title:{

text:"成绩分析"

},

       series:[{name:'单仪表盘示例',

             type:'gauge',

             radius:'80%',

             center:["50%","55%"],

             startAngle:225,

             endAngle:-45,

             clockWise:true,

             min:0,

             max:100,

             data:[{

              name:'完成率(%)',

              value:70,

             }]

       

       }]

}

• 主要参数讲解

1.  startAngle：225 设置仪表盘起始角度（默认为225）
2. endAngle:-45 设置仪表盘结束解度，默认为-45
3. Type:’gauge’ 仪表盘
4. Center 表示圆心坐标，它可以是像素点表示的绝对值，也可以是数组类型，默认值为【“50%”,”50%”】.百分比计算时按照公式min（width,height)*50%进行计算，其中的Width和height分别表示div中所设置的宽度和高度。
5. radius表示半径，它可以是像素点表示绝对值，也可以是数组类型，默认值为’75%’,支持绝对值（PX）和百分比。百分比计算时按照公式min（width,height）/2*75%进行计算，其中width和height分别表示div中所设置的宽度和高度。
6. clockWise设置仪表盘是否顺时针增长，默认为true,它是一个布尔类型，取值只有false和true.
7. Min:0,设置最小的数据值，默认为0，映射到minAngle.
8. Max:100,设置最大的数据值，默认为100，映射到maxAngle
9.  每隔2称重新渲染一次以实现动态效果

setInterval(function(){

option.series[0].data[0].value=(Math.random()*100).toFixed(2);

mychart.setOption(option,true);

},2000);

1. 仪表盘的美化

      axisLine:{}

      splitLine:{}

      axisTick:{}

      axisLable:{}

      Pointer:{}//设置仪表盘指针

      itemStyle:{}//设置仪表盘指针样式

      Emphasis:{}//设置高亮的仪表盘指针样式

      Detail:{}//设置仪表盘详情，用于显示数据

 全部代码