162 lines
3.4 KiB
Vue
162 lines
3.4 KiB
Vue
<template>
|
||
<view style="width:100%; height:450rpx">
|
||
<l-echart ref="chartRef"></l-echart>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||
export default {
|
||
name: "radar",
|
||
props: {
|
||
apiData: {
|
||
type: Object, // 定义 props 类型
|
||
default: null // 默认值
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
watch: {
|
||
// 监听 message 的变化
|
||
apiData(newVal, oldVal) {
|
||
// console.log('父组件传递的值发生变化：', newVal);
|
||
this.init(newVal);
|
||
},
|
||
deep: true
|
||
},
|
||
methods: {
|
||
async init(data) {
|
||
var color = "#189cbb";
|
||
var scale = 1;
|
||
var weekData = [{
|
||
text: `电池健康度`,
|
||
max: 100
|
||
},
|
||
{
|
||
text: `BMS精度`,
|
||
max: 100
|
||
},
|
||
{
|
||
text: `异常告警`,
|
||
max: 100
|
||
},
|
||
{
|
||
text: `温度一致性`,
|
||
max: 100
|
||
},
|
||
{
|
||
text: `电压一致性`,
|
||
max: 100
|
||
},
|
||
{
|
||
text: `SOC一致性`,
|
||
max: 100
|
||
},
|
||
];
|
||
var student = [data.soh, data.bmsCurrentAccuracy, data.alarmScore, data.tempConsistency, data
|
||
.voltConsistency, data.socAccuracy
|
||
];
|
||
let option = {
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// position: [20, -25]
|
||
// },
|
||
radar: [{
|
||
indicator: weekData,
|
||
center: ["50%", "45%"],
|
||
radius: "54%",
|
||
name: {
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 1)',
|
||
fontSize: 17 * scale,
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgb(40,180,255)",
|
||
opacity: 0.5,
|
||
width: 2 * scale,
|
||
},
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: "rgba(60, 253, 255, 0.6)",
|
||
opacity: 0.2,
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgb(40,180,255)',
|
||
type: "dashed",
|
||
},
|
||
},
|
||
}, ],
|
||
series: [{
|
||
type: "radar",
|
||
tooltip: {
|
||
trigger: "item",
|
||
},
|
||
data: [{
|
||
value: student,
|
||
name: "电池分项得分",
|
||
}, ],
|
||
label: {
|
||
show: true,
|
||
fontSize: 13,
|
||
formatter: '{a|{c}}', // 使用 rich 格式化文本
|
||
position:[0,10],
|
||
rich: {
|
||
a: {
|
||
fontSize: 15,
|
||
fontWeight: 'bold',
|
||
color: 'rgba(60, 253, 255, 1)',
|
||
padding: [2, 5], // 内边距
|
||
borderRadius: 5, // 圆角
|
||
borderColor: 'rgba(60, 253, 255, 1)', // 边框颜色
|
||
borderWidth: 1 // 边框宽度
|
||
}
|
||
}
|
||
},
|
||
symbolSize: 10 * scale,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#fff',
|
||
borderColor: "rgba(40, 180, 255, 0.6)",
|
||
borderWidth: 2 * scale,
|
||
},
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: "rgba(60, 253, 255, 0.6)",
|
||
width: 2 * scale,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: "rgb(40, 180, 255)",
|
||
opacity: 0.5,
|
||
},
|
||
},
|
||
}, ],
|
||
}
|
||
// chart 图表实例不能存在data里
|
||
const chart = await this.$refs.chartRef.init(echarts);
|
||
chart.setOption(option)
|
||
// 监听窗口大小改变事件，并调用resize方法
|
||
window.onresize = function() {
|
||
myChart.resize();
|
||
};
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
|
||
</style> |