- 解决思路:
先正常渲染出雷达图
name:"正常",value:[1,2,1,1,2]
name:"异常",value:[2,1,2,2,1]
再通过配置以下方式渲染出所有的拐点,覆盖之前正常渲染出来的拐点
name:"温度湿度监测" ,value[1,0,0,0,0]
name:"温度湿度监测", value[2,0,0,0,0]
name:"烟雾监测" ,value[0,2,0,0,0]
name:"烟雾监测", value[0,1,0,0,0]
name:"空调监测" ,value[0,0,1,0,0]
name:"空调监测", value[0,0,2,0,0]
name:"漏水监测" ,value[0,0,0,1,0]
name:"漏水监测", value[0,0,0,2,0]
name:"UPS监测" ,value[0,0,0,0,2]
name:"UPS监测", value[0,0,0,0,1]
此时鼠标经过拐点就能拿到该点的name值,就可以去筛所需要的数据渲染出tooltip的内容
- 效果图:
- 全部代码 :
<template>
<div class="radar">
<div class="chart-view" ref="dynamicRadar"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { getDeviceTypeList } from "@/api/dynamic/index";
export default {
name: "Radar",
data() {
return {
scaleWidth: 1,
scaleHeight: 1,
max: 0,
};
},
mounted() {
const defaultWidth = 1920;
const defaultHeight = 1080;
const width = document.body.clientWidth;
const height = document.body.clientHeight;
if (height && width) {
this.scaleWidth = (width / defaultWidth).toFixed(2);
this.scaleHeight = (height / defaultHeight).toFixed(2);
}
this.init();
this.timer = setInterval(() => {
this.init();
}, 17000);
},
destroyed() {
clearInterval(this.timer);
},
methods: {
async init() {
const { rows } = await getDeviceTypeList();
let maxArr = [];
let initData = ["正常", "异常"].map(name => {
return {
name,
valueArr: rows.map(x => {
let val = [];
if (name === "正常") {
val = x.normalList;
} else {
val = x.errorList;
}
maxArr.p