本章节介绍百度echarts AQI雷达图
echarts AQI雷达图实例
1，新建静态页面demo.html,并引入echarts的js库，在这里我们引入的是网络地址
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
2，雷达图容器html代码，只需一行html代码
<div id="container" style="height: 500px"></div>
雷达图容器高度为500px,宽度默认，并且div的id号为container。
3，javascript实现代码
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
app.title = 'v型知识库原创-www.vxzsk.com';
var option = null;
// Schema:
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
var dataBJ = [
[55,9,56,0.46,18,6,1],
[25,11,21,0.65,34,9,2],
[56,7,63,0.3,14,5,3],
[33,7,29,0.33,16,6,4],
[42,24,44,0.76,40,16,5],
[82,58,90,1.77,68,33,6],
[74,49,77,1.46,48,27,7],
[78,55,80,1.29,59,29,8],
[267,216,280,4.8,108,64,9],
[185,127,216,2.52,61,27,10],
[39,19,38,0.57,31,15,11],
[41,11,40,0.43,21,7,12],
[64,38,74,1.04,46,22,13],
[108,79,120,1.7,75,41,14],
[108,63,116,1.48,44,26,15],
[33,6,29,0.34,13,5,16],
[94,66,110,1.54,62,31,17],
[186,142,192,3.88,93,79,18],
[57,31,54,0.96,32,14,19],
[22,8,17,0.48,23,10,20],
[39,15,36,0.61,29,13,21],
[94,69,114,2.08,73,39,22],
[99,73,110,2.43,76,48,23],
[31,12,30,0.5,32,16,24],
[42,27,43,1,53,22,25],
[154,117,157,3.05,92,58,26],
[234,185,230,4.09,123,69,27],
[160,120,186,2.77,91,50,28],
[134,96,165,2.76,83,41,29],
[52,24,60,1.03,50,21,30],
[46,5,49,0.28,10,6,31]
];
var dataGZ = [
[26,37,27,1.163,27,13,1],
[85,62,71,1.195,60,8,2],
[78,38,74,1.363,37,7,3],
[21,21,36,0.634,40,9,4],
[41,42,46,0.915,81,13,5],
[56,52,69,1.067,92,16,6],
[64,30,28,0.924,51,2,7],
[55,48,74,1.236,75,26,8],
[76,85,113,1.237,114,27,9],
[91,81,104,1.041,56,40,10],
[84,39,60,0.964,25,11,11],
[64,51,101,0.862,58,23,12],
[70,69,120,1.198,65,36,13],
[77,105,178,2.549,64,16,14],
[109,68,87,0.996,74,29,15],
[73,68,97,0.905,51,34,16],
[54,27,47,0.592,53,12,17],
[51,61,97,0.811,65,19,18],
[91,71,121,1.374,43,18,19],
[73,102,182,2.787,44,19,20],
[73,50,76,0.717,31,20,21],
[84,94,140,2.238,68,18,22],
[93,77,104,1.165,53,7,23],
[99,130,227,3.97,55,15,24],
[146,84,139,1.094,40,17,25],
[113,108,137,1.481,48,15,26],
[81,48,62,1.619,26,3,27],
[56,48,68,1.336,37,9,28],
[82,92,174,3.29,0,13,29],
[106,116,188,3.628,101,16,30],
[118,50,0,1.383,76,11,31]
];
var dataSH = [
[91,45,125,0.82,34,23,1],
[65,27,78,0.86,45,29,2],
[83,60,84,1.09,73,27,3],
[109,81,121,1.28,68,51,4],
[106,77,114,1.07,55,51,5],
[109,81,121,1.28,68,51,6],
[106,77,114,1.07,55,51,7],
[89,65,78,0.86,51,26,8],
[53,33,47,0.64,50,17,9],
[80,55,80,1.01,75,24,10],
[117,81,124,1.03,45,24,11],
[99,71,142,1.1,62,42,12],
[95,69,130,1.28,74,50,13],
[116,87,131,1.47,84,40,14],
[108,80,121,1.3,85,37,15],
[134,83,167,1.16,57,43,16],
[79,43,107,1.05,59,37,17],
[71,46,89,0.86,64,25,18],
[97,71,113,1.17,88,31,19],
[84,57,91,0.85,55,31,20],
[87,63,101,0.9,56,41,21],
[104,77,119,1.09,73,48,22],
[87,62,100,1,72,28,23],
[168,128,172,1.49,97,56,24],
[65,45,51,0.74,39,17,25],
[39,24,38,0.61,47,17,26],
[39,24,39,0.59,50,19,27],
[93,68,96,1.05,79,29,28],
[188,143,197,1.66,99,51,29],
[174,131,174,1.55,108,50,30],
[187,143,201,1.39,89,53,31]
];
var lineStyle = {
normal: {
width: 1,
opacity: 0.5
}
};
option = {
backgroundColor: '#161627',
title: {
text: 'AQI - 雷达图',
left: 'center',
textStyle: {
color: '#eee'
}
},
legend: {
bottom: 5,
data: ['北京', '上海', '广州'],
itemGap: 20,
textStyle: {
color: '#fff',
fontSize: 14
},
selectedMode: 'single'
},
// visualMap: {
// show: true,
// min: 0,
// max: 20,
// dimension: 6,
// inRange: {
// colorLightness: [0.5, 0.8]
// }
// },
radar: {
indicator: [
{name: 'AQI', max: 300},
{name: 'PM2.5', max: 250},
{name: 'PM10', max: 300},
{name: 'CO', max: 5},
{name: 'NO2', max: 200},
{name: 'SO2', max: 100}
],
shape: 'circle',
splitNumber: 5,
name: {
textStyle: {
color: 'rgb(238, 197, 102)'
}
},
splitLine: {
lineStyle: {
color: [
'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)'
}
}
},
series: [
{
name: '北京',
type: 'radar',
lineStyle: lineStyle,
data: dataBJ,
symbol: 'none',
itemStyle: {
normal: {
color: '#F9713C'
}
},
areaStyle: {
normal: {
opacity: 0.1
}
}
},
{
name: '上海',
type: 'radar',
lineStyle: lineStyle,
data: dataSH,
symbol: 'none',
itemStyle: {
normal: {
color: '#B3E4A1'
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
},
{
name: '广州',
type: 'radar',
lineStyle: lineStyle,
data: dataGZ,
symbol: 'none',
itemStyle: {
normal: {
color: 'rgb(238, 197, 102)'
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>4，用浏览器打开demo.html，效果如下
5，AQI雷达图demo.html完整代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body >
<div id="container" style="height: 500px"></div>
<!-- V型知识库 www.vxzsk.com -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
app.title = 'v型知识库原创-www.vxzsk.com';
var option = null;
// Schema:
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
var dataBJ = [
[55,9,56,0.46,18,6,1],
[25,11,21,0.65,34,9,2],
[56,7,63,0.3,14,5,3],
[33,7,29,0.33,16,6,4],
[42,24,44,0.76,40,16,5],
[82,58,90,1.77,68,33,6],
[74,49,77,1.46,48,27,7],
[78,55,80,1.29,59,29,8],
[267,216,280,4.8,108,64,9],
[185,127,216,2.52,61,27,10],
[39,19,38,0.57,31,15,11],
[41,11,40,0.43,21,7,12],
[64,38,74,1.04,46,22,13],
[108,79,120,1.7,75,41,14],
[108,63,116,1.48,44,26,15],
[33,6,29,0.34,13,5,16],
[94,66,110,1.54,62,31,17],
[186,142,192,3.88,93,79,18],
[57,31,54,0.96,32,14,19],
[22,8,17,0.48,23,10,20],
[39,15,36,0.61,29,13,21],
[94,69,114,2.08,73,39,22],
[99,73,110,2.43,76,48,23],
[31,12,30,0.5,32,16,24],
[42,27,43,1,53,22,25],
[154,117,157,3.05,92,58,26],
[234,185,230,4.09,123,69,27],
[160,120,186,2.77,91,50,28],
[134,96,165,2.76,83,41,29],
[52,24,60,1.03,50,21,30],
[46,5,49,0.28,10,6,31]
];
var dataGZ = [
[26,37,27,1.163,27,13,1],
[85,62,71,1.195,60,8,2],
[78,38,74,1.363,37,7,3],
[21,21,36,0.634,40,9,4],
[41,42,46,0.915,81,13,5],
[56,52,69,1.067,92,16,6],
[64,30,28,0.924,51,2,7],
[55,48,74,1.236,75,26,8],
[76,85,113,1.237,114,27,9],
[91,81,104,1.041,56,40,10],
[84,39,60,0.964,25,11,11],
[64,51,101,0.862,58,23,12],
[70,69,120,1.198,65,36,13],
[77,105,178,2.549,64,16,14],
[109,68,87,0.996,74,29,15],
[73,68,97,0.905,51,34,16],
[54,27,47,0.592,53,12,17],
[51,61,97,0.811,65,19,18],
[91,71,121,1.374,43,18,19],
[73,102,182,2.787,44,19,20],
[73,50,76,0.717,31,20,21],
[84,94,140,2.238,68,18,22],
[93,77,104,1.165,53,7,23],
[99,130,227,3.97,55,15,24],
[146,84,139,1.094,40,17,25],
[113,108,137,1.481,48,15,26],
[81,48,62,1.619,26,3,27],
[56,48,68,1.336,37,9,28],
[82,92,174,3.29,0,13,29],
[106,116,188,3.628,101,16,30],
[118,50,0,1.383,76,11,31]
];
var dataSH = [
[91,45,125,0.82,34,23,1],
[65,27,78,0.86,45,29,2],
[83,60,84,1.09,73,27,3],
[109,81,121,1.28,68,51,4],
[106,77,114,1.07,55,51,5],
[109,81,121,1.28,68,51,6],
[106,77,114,1.07,55,51,7],
[89,65,78,0.86,51,26,8],
[53,33,47,0.64,50,17,9],
[80,55,80,1.01,75,24,10],
[117,81,124,1.03,45,24,11],
[99,71,142,1.1,62,42,12],
[95,69,130,1.28,74,50,13],
[116,87,131,1.47,84,40,14],
[108,80,121,1.3,85,37,15],
[134,83,167,1.16,57,43,16],
[79,43,107,1.05,59,37,17],
[71,46,89,0.86,64,25,18],
[97,71,113,1.17,88,31,19],
[84,57,91,0.85,55,31,20],
[87,63,101,0.9,56,41,21],
[104,77,119,1.09,73,48,22],
[87,62,100,1,72,28,23],
[168,128,172,1.49,97,56,24],
[65,45,51,0.74,39,17,25],
[39,24,38,0.61,47,17,26],
[39,24,39,0.59,50,19,27],
[93,68,96,1.05,79,29,28],
[188,143,197,1.66,99,51,29],
[174,131,174,1.55,108,50,30],
[187,143,201,1.39,89,53,31]
];
var lineStyle = {
normal: {
width: 1,
opacity: 0.5
}
};
option = {
backgroundColor: '#161627',
title: {
text: 'AQI - 雷达图',
left: 'center',
textStyle: {
color: '#eee'
}
},
legend: {
bottom: 5,
data: ['北京', '上海', '广州'],
itemGap: 20,
textStyle: {
color: '#fff',
fontSize: 14
},
selectedMode: 'single'
},
// visualMap: {
// show: true,
// min: 0,
// max: 20,
// dimension: 6,
// inRange: {
// colorLightness: [0.5, 0.8]
// }
// },
radar: {
indicator: [
{name: 'AQI', max: 300},
{name: 'PM2.5', max: 250},
{name: 'PM10', max: 300},
{name: 'CO', max: 5},
{name: 'NO2', max: 200},
{name: 'SO2', max: 100}
],
shape: 'circle',
splitNumber: 5,
name: {
textStyle: {
color: 'rgb(238, 197, 102)'
}
},
splitLine: {
lineStyle: {
color: [
'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)'
}
}
},
series: [
{
name: '北京',
type: 'radar',
lineStyle: lineStyle,
data: dataBJ,
symbol: 'none',
itemStyle: {
normal: {
color: '#F9713C'
}
},
areaStyle: {
normal: {
opacity: 0.1
}
}
},
{
name: '上海',
type: 'radar',
lineStyle: lineStyle,
data: dataSH,
symbol: 'none',
itemStyle: {
normal: {
color: '#B3E4A1'
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
},
{
name: '广州',
type: 'radar',
lineStyle: lineStyle,
data: dataGZ,
symbol: 'none',
itemStyle: {
normal: {
color: 'rgb(238, 197, 102)'
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>把上述代码复制到一个静态HTML页面中即可实现。
此文章本站原创，地址 https://www.vxzsk.com/1137.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：redis PEXPIRE
下一篇：python 多进程
^