html，Ajax，echarts绘制雷达图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雷达图示例</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
<!-- 准备一个用于显示图表的容器 -->
<div id="radarChart" style="width: 600px;height:400px;"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('radarChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '用户雷达图'
},
tooltip: {},
legend: {
data: ['用户A']
},
radar: {
// 雷达图的指示器，表示多个变量的名称
indicator: [
{ name: '销售', max: 6500},
{ name: '管理', max: 16000},
{ name: '信息技术', max: 30000},
{ name: '客服', max: 38000},
{ name: '研发', max: 52000},
{ name: '市场', max: 25000}
]
},
series: [{
name: '雷达图',
type: 'radar',
// 数据
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '用户A'
}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>这段代码展示了如何使用ECharts库和HTML创建一个简单的雷达图。首先，我们通过<script>标签引入了ECharts库。然后，我们在HTML中定义了一个div元素作为图表的容器。接着，在<script>标签中，我们初始化了ECharts实例，并设置了雷达图的配置项和数据。最后，我们调用myChart.setOption(option)来显示图表。这个例子简单易懂，并且可以直接复制粘贴到你的项目中使用。
评论已关闭