1.html部分
image.png
2.js部分
引入包：
image.png
data中数据定义：
image.png
showCharts(){
// console.log(id)
const canvas = document.getElementById('canvasDom');
// console.log(canvas)
const ctx = canvas.getContext("2d");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
uChartsInstance['canvasDom'] = new uCharts({
// animation: true,
// background: "none",
categories: this.categoriesData,
// color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
// color: ["#15E7B5"],
// padding: [
// 5,
// 5,
// 5,
// 5
// ],
context: ctx,
extra: {
radar: {
gridType: "radar",
gridColor: "#ffffff",
gridCount: 3,
labelColor: "#fff",
opacity: 0.2,
border: false,
borderWidth: 2,
max: 5,
},
tooltip: {
showBox: true,
showArrow: true,
showCategory: false,
borderWidth: 0,
borderRadius: 0,
borderColor: "#000000",
borderOpacity: 0.7,
bgColor: "#000000",
bgOpacity: 0.7,
gridType: "solid",
dashLength: 4,
gridColor: "#CCCCCC",
fontColor: "#FFFFFF",
splitLine: true,
horizentalLine: false,
xAxisLabel: false,
yAxisLabel: false,
labelBgColor: "#FFFFFF",
labelBgOpacity: 0.7,
labelFontColor: "#666666"
}
},
height: canvas.height,
legend: {
show: false,
position: "right",
float: "center",
padding: 5,
margin: 5,
backgroundColor: "#15E7B5",
borderColor: "rgba(0,0,0,0)",
borderWidth: 0,
fontSize: 13,
fontColor: "#666666",
lineHeight: 25,
hiddenColor: "#CECECE",
itemGap: 10
},
// padding: [15,15,0,5],
series: this.seriesData,
type: "radar",
// canvasId: "",
// canvas2d: true,
background: "none",
animation: true,
timing: "easeOut",
duration: 1000,
color: ["#15E7B5"],
padding: [
5,
5,
5,
5
],
rotate: false,
errorReload: true,
fontSize: 13,
fontColor: "transparent",
enableScroll: false,
touchMoveLimit: 60,
enableMarkLine: false,
dataLabel: true,
dataPointShape: true,
dataPointShapeType: "solid",
tapLegend: false,
width: canvas.width,
});
// canvas.onclick = function(e) {
// uChartsInstance[id].touchLegend(getH5Offset(e));
// uChartsInstance[id].showToolTip(getH5Offset(e));
// };
// canvas.onmousemove=function(e) {
// uChartsInstance[id].showToolTip(getH5Offset(e));
// };
},
3.效果展示
image.png