效果图
安装
npm i echarts
页面引入
var echarts = require('echarts');
页面使用
<div id="customEchart" style="width:500px;height: 420px;"></div>
js配置数据方法
let customEchart = echarts.init(document.getElementById('customEchart'));//获取DOM节点
//雷达图配置
let customOption = {
legend: {//图例位置
top: "1%",
itemWidth: 20,
itemHeight: 12
},
tooltip: {//悬浮框配置
formatter: function () {
let str ="<table style='border-collapse:collapse;'>"+
"<tr style='background: rgb(241, 245, 255)'>"+
"<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>指标名称</td>"+
"<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>目标</td>"+
"<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>实际</td>"+
"</tr>"+
"<tr style='background: #FFF'>"+
"<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>测试1</td>"+
"<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>100</td>"+
"<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>68</td>"+
"</tr>"+
"<tr style='background: #FAFAFA'>"+
"<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>测试2</td>"+
"<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>100</td>"+
"<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>96</td>"+
"</tr>"
str= str + "</table>"
return str
}
},
radar: {
name: {
textStyle: {//字体大小颜色设置
color: '#444',
fontSize: 11
},
formatter: function (text) {//文字过长换行
let strLength = text.length;
if (strLength % 3 == 1) {
text = text.replace(/\S{3}/g, function (match) {
return match + '\n';
})
} else {
text = text.replace(/\S{3}/g, function (match) {
return match + '\n';
})
strLength = text.length;
text = text.substring(0, strLength - 1);
}
return text;
},
},
indicator: [{max:100,text:'测试1'},{max:100,text:'测试2'},{max:100,text:'测试3'},{max:100,text:'测试4'},{max:100,text:'测试5'},{max:100,text:'测试6'},{max:100,text:'测试7'},{max:100,text:'测试8'}],//数据维度和最大值
center: ['50%', '50%'],
radius: 146,
startAngle: 96,
splitNumber: 4,
shape: 'circle',
},
series: [
{
name: '雷达图',
type: 'radar',
emphasis: {
label: {
show: true,
color: '#fff',
fontSize: 10,
formatter: '{c}', // 鼠标悬浮时展示数据加上单位
backgroundColor: '#0D1B42',
borderRadius: 5,
padding: 3,
shadowBlur: 3
}
},
data: [{
value: ['83.20', '93.10', '96.40', '92.10', '94.55', '89.70', '98.40', '99.10'],//实际数据
lineStyle: {
type: 'dashed'
},
areaStyle: {
opacity: 0.1
},
label: {
normal: {
show: true
}
}
},
]
},
]
};
customEchart.setOption(customOption);
customEchart.resize();