12,170
社区成员
发帖
与我相关
我的任务
分享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.仪表盘的特点
仪表盘可以更直观的表现出某个指标的进度或实际情况
往期文章：
黑马前端专栏干货多多，关注再学，好方便~
2023年前端学习路线图：课程、源码、笔记，技术栈另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~
...全文
请发表友善的回复…
发表回复
