写个E charts 的雷达图
时间: 2023-12-30 20:53:10 浏览: 38
好的,下面是一个简单的 ECharts 雷达图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts 雷达图示例</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 基于准备好的 DOM,初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
tooltip: {
// 鼠标悬浮时显示的提示框
show: true
},
radar: {
// 雷达图配置
indicator: [ // 雷达图每个维度的指标名称和最大值
{ name: '销售', max: 100 },
{ name: '服务', max: 100 },
{ name: '品质', max: 100 },
{ name: '价格', max: 100 },
{ name: '口碑', max: 100 },
{ name: '忠诚度', max: 100 }
],
shape: 'circle', // 圆形雷达图
splitNumber: 5, // 分割线数量
name: { // 指示器名称的配置项
textStyle: {
color: '#333'
}
},
splitLine: { // 分隔线的样式
lineStyle: {
color: [
'#ddd', '#ddd', '#ddd', '#ddd', '#ddd'
].reverse()
}
},
splitArea: { // 分隔区域的样式
show: false
},
axisLine: { // 坐标轴轴线样式
lineStyle: {
color: '#ddd'
}
}
},
series: [{
name: '雷达图', // 数据系列名称
type: 'radar', // 雷达图类型
data: [ // 数据项
{
value: [90, 80, 85, 75, 95, 80], // 每个维度的数值
name: '产品 A' // 数据项名称
},
{
value: [70, 85, 90, 80, 90, 70],
name: '产品 B'
}
],
itemStyle: { // 数据项的样式
normal: {
color: '#F9713C',
lineStyle: {
color: '#F9713C',
width: 2
},
areaStyle: {
color: '#F9713C',
opacity: 0.3
}
}
},
symbolSize: 0, // 不显示数据点
label: { // 数据项的标签
show: true,
formatter: function(params) { // 标签的格式化函数
return params.data.name + ': ' + params.value.join(', ');
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
上面的代码会生成一个简单的雷达图,包含两个产品的销售数据。您可以根据自己的需要修改数据项和样式来创建您自己的雷达图。