dev_xulongjin
1a1d4b52f4
- 新增 K 线图、折线图、散点图、柱状图、热力图、雷达图和饼图的 HTML 文件- 添加 Main.java 文件作为项目入口 - 创建 pom.xml 文件配置 Maven 项目
56 lines
1.5 KiB
HTML
56 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>雷达图</title>
|
|
<script src="js/echarts.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="main" style="width:800px;height:800px;"></div>
|
|
|
|
<script>
|
|
var chartDom = document.getElementById('main');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
title: {
|
|
text: '雷达图'
|
|
},
|
|
legend: {
|
|
data: ['Allocated Budget', 'Actual Spending']
|
|
},
|
|
radar: {
|
|
// shape: 'circle',
|
|
indicator: [
|
|
{name: 'Sales', max: 6500},
|
|
{name: 'Administration', max: 16000},
|
|
{name: 'Information Technology', max: 30000},
|
|
{name: 'Customer Support', max: 38000},
|
|
{name: 'Development', max: 52000},
|
|
{name: 'Marketing', max: 25000}
|
|
]
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Budget vs spending',
|
|
type: 'radar',
|
|
data: [
|
|
{
|
|
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
|
name: 'Allocated Budget'
|
|
},
|
|
{
|
|
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
|
name: 'Actual Spending'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
</script>
|
|
</body>
|
|
</html> |