1. The effect is as follows:
1.1 Dynamic Effects
.
.
.
.
1.2 Static display
.
.
.
2. Code implementation:
2.1 Dynamic code implementation (requires help echarts.min.js)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<style>
//设置宽高
#radarChart{
height: 500px;
height: 500px;
}
</style>
</head>
<body>
<!--盒子-->
<div id="radarChart"></div>
<script>
//图表挂载到盒子上
let myChart = echarts.init(document.getElementById('radarChart'))
let dataMax = 60;
const source = {
data: [43, 10, 28, 35, 50, 19, 13],
indicator: [
{
name: "家政服务", max: dataMax },
{
name: "助餐服务", max: dataMax },
{
name: "助医服务", max: dataMax },
{
name: "待办服务", max: dataMax },
{
name: "交谈服务", max: dataMax },
{
name: "康复服务", max: dataMax },
{
name: "助行服务", max: dataMax },
],
};
const buildSeries = function (data) {
const helper = data.map((item, index) => {
const arr = new Array(data.length);
arr.splice(index, 1, item);
return arr;
});
return [data, ...helper].map((item, index) => {
return {
type: "radar",
itemStyle: {
color: "#31e586",
},
lineStyle: {
color: index === 0 ? "#31e586" : "transparent",
},
areaStyle: {
color: index === 0 ? "#31e586" : "transparent",
opacity: 0.3,
},
tooltip: {
show: index === 0 ? false : true,
formatter: function () {
return (
source.indicator[index - 1].name +
"满意度：" +
source.data[index - 1] +
"%"
);
},
},
z: index === 0 ? 1 : 2,
data: [item],
};
});
};
option = {
backgroundColor: "#080b30",
tooltip: {
},
radar: {
// shape: 'circle',
name: {
textStyle: {
fontSize: 22,
color: ["#d1dbf2"],
padding: [3, 5],
},
},
splitNumber: 4,
splitArea: {
show: true,
areaStyle: {
color: [
"rgba(12,62,129,0)",
"rgba(12,62,129,0.3)",
"rgba(12,62,129,0)",
"rgba(12,62,129,0)",
],
},
},
splitLine: {
lineStyle: {
color: "#0c3e81",
},
},
axisLine: {
lineStyle: {
color: "#0c3e81",
},
},
indicator: source.indicator,
},
series: buildSeries(source.data),
};
//图表的设置挂载到图表盒子上
myChart.setOption(option)
</script>
</body>
</html>
.
.
.
.
2.2 Static code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雷达图测试</title>
<style>
#radarChart{
width: auto;
height: auto;
border: 1px solid red;
display: inline-block;
}
canvas{
background-color: rgba(0, 0, 0, 0.2) !important;
width: 500px;
}
</style>
</head>
<body>
<div id="radarChart"></div>
<script type="text/javascript">
var mW =500; //图标宽度
var mH = 500; //图标高度
var mData = [
['速度', 55],
['力量', 66],
['智力', 88],
['行动力', 99],
['跳舞', 80],
['唱歌', 100]
];
var mCount = mData.length; //边数
var mCenter = mW / 2; //中心点
var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
var mAngle = Math.PI * 2 / mCount; //角度
var mCtx = null;
var mColorPolygon = '#B8B8B8'; //多边形颜色
var mColorLines = '#B8B8B8'; //顶点连线颜色
var mColorText = '#000000';
//初始化
(function() {
var canvas = document.createElement('canvas');
document.getElementById('radarChart').appendChild(canvas);
canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');
drawPolygon(mCtx);
drawLines(mCtx);
drawRegion(mCtx);
drawText(mCtx);
drawCircle(mCtx);
drawLines1(mCtx)
})();
// 绘制多边形边
function drawPolygon(ctx) {
ctx.save();
ctx.strokeStyle = mColorPolygon;
var r = mRadius / mCount; //单位半径
// var r = mRadius/ (mCount-2); //单位半径 画三个五边形
//画5个圈
for (var i = 0; i < mCount; i++) {
// for(var i = 0; i < mCount-2; i ++){
// 画三个五边形
ctx.beginPath();
var currR = r * (i + 1); //当前半径
//画5条边
for (var j = 0; j < mCount; j++) {
var x = mCenter + currR * Math.cos(mAngle * j);
var y = mCenter + currR * Math.sin(mAngle * j);
ctx.lineTo(x, y);
}
ctx.closePath()
ctx.stroke();
}
ctx.restore();
}
//顶点连线
function drawLines(ctx) {
ctx.save();
ctx.beginPath();
ctx.strokeStyle = mColorLines;
for (var i = 0; i < mCount; i++) {
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
ctx.moveTo(mCenter, mCenter);
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
}
//数据点之间的连线
function drawLines1(ctx) {
ctx.save();
ctx.beginPath();
var count = 0;
for (var i = 0; i < mCount; i++) {
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
count = i + 1;
if (count < mCount) {
var x1 = mCenter + mRadius * Math.cos(mAngle * (i + 1)) * mData[i + 1][1] / 100;
var y1 = mCenter + mRadius * Math.sin(mAngle * (i + 1)) * mData[i + 1][1] / 100;
} else {
var x1 = mCenter + mRadius * Math.cos(mAngle * 0) * mData[0][1] / 100;
var y1 = mCenter + mRadius * Math.sin(mAngle * 0) * mData[0][1] / 100;
}
ctx.moveTo(x, y);
ctx.lineTo(x1, y1);
ctx.lineWidth = 2; //设置线宽状态
ctx.strokeStyle = '#1478FA'; //设置线的颜色状态
}
ctx.stroke();
ctx.restore();
}
//绘制文本
function drawText(ctx) {
ctx.save();
var fontSize = mCenter / 12;
ctx.font = fontSize + 'px Microsoft Yahei';
ctx.fillStyle = mColorText;
for (var i = 0; i < mCount; i++) {
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
if (mAngle * i >= 0 && mAngle * i <= Math.PI / 2) {
ctx.fillText(mData[i][0], x, y + fontSize);
} else if (mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI) {
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
} else if (mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2) {
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
} else {
ctx.fillText(mData[i][0], x, y);
}
}
//中心绘制文字
ctx.font = "bold 25px Arial"
ctx.fillStyle = '#1478FA'
ctx.fillText("75", mCenter - 18, mCenter + 16);
ctx.restore();
}
//绘制数据区域
function drawRegion(ctx) {
ctx.save();
ctx.beginPath();
for (var i = 0; i < mCount; i++) {
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = 'rgba(18,95,253, 0.3)';
ctx.fill();
ctx.restore();
}
//画点
function drawCircle(ctx) {
ctx.save();
var r = mCenter / 50;
for (var i = 0; i < mCount; i++) {
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(20, 120, 250, 0.8)';
ctx.fill();
}
ctx.restore();
}
</script>
</body>
</html>
Tips: More chart styles can be viewed here: http://ppchart.com/#/