ECharts常用图表 雷达图仪表盘图
Posted 黑马程序员官方
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts常用图表 雷达图仪表盘图相关的知识，希望对你有一定的参考价值。
1.雷达图
1.1.雷达图的实现步骤
步骤1 ECharts 最基本的代码结构
<!DOCTYPE html> <html lang = "en" > <head> <script src = "js/echarts.min.js" ></script> </head> <body> <div style = "width: 600px;height:400px" > </div> <script> var mCharts = echarts . init ( document . querySelector ( "div" )) var option = mCharts . setOption ( option ) </script> </body> </html>
此时 option 是一个空空如也的对象
- 步骤2 定义各个维度的最大值
- 步骤3 准备具体产品的数据
- 步骤4 在 series 下设置 type:radar
var option = radar : indicator : dataMax , series : [ type : 'radar' , data : [ name : ' 华为手机 1' , value : hwScore , name : ' 中兴手机 1' , value : zxScore ] ]
1.2.雷达图的常见效果
显示数值 label
区域面积 areaStyle
- 绘制类型 shape
雷达图绘制类型，支持 'polygon' 和 'circle'
'polygon' : 多边形
'circle' 圆形
1.3.雷达图的特点
雷达图可以用来分析多个维度的数据与标准数据的对比情况
2.仪表盘图
2.1.仪表盘的实现步骤
步骤1 ECharts 最基本的代码结构
此时 option 是一个空空如也的对象
- 步骤2: 准备数据, 设置给 series 下的 data
data:[97]
- 步骤3: 在 series 下设置 type:gauge
2.2.仪表盘的常见效果
- 数值范围: max min
- 多个指针: 增加data中数组的元素
- 多个指针颜色的差异: itemStyle
2.3.仪表盘的特点
仪表盘可以更直观的表现出某个指标的进度或实际情况
往期文章：
黑马前端专栏干货多多，关注再学，好方便~
2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~
以上是关于ECharts常用图表 雷达图仪表盘图的主要内容，如果未能解决你的问题，请参考以下文章