You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.7 KiB
142 lines
3.7 KiB
4 months ago
|
<!-- @format -->
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { defineComponent } from 'vue';
|
||
|
|
import BaseRadar from './BaseRadar.vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'BasicRadar',
|
||
|
|
extends: BaseRadar,
|
||
|
|
props: {
|
||
|
|
series: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
indicator: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
radius: {
|
||
|
|
type: String,
|
||
|
|
default: '75%',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
created() {},
|
||
|
|
mounted() {
|
||
|
|
let optionData = this.optionHandle();
|
||
|
|
|
||
|
|
this.setOption(optionData);
|
||
|
|
this.renderChart();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
optionHandle() {
|
||
|
|
let _this = this;
|
||
|
|
let index = 0;
|
||
|
|
let color = [
|
||
|
|
'#0075FF',
|
||
|
|
'#7a7b82',
|
||
|
|
'#B2BCF3',
|
||
|
|
'#655ADC',
|
||
|
|
'#D04CFF',
|
||
|
|
'#F14A4A',
|
||
|
|
'#EB9260',
|
||
|
|
'#E8EB60',
|
||
|
|
'#3FE280',
|
||
|
|
'#3FC5E2',
|
||
|
|
];
|
||
|
|
let richObj = {
|
||
|
|
top: {
|
||
|
|
color: '#10C8D8',
|
||
|
|
fontFamily: 'Microsoft YaHei',
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: 500,
|
||
|
|
align: 'left',
|
||
|
|
padding: [0, 0, 5, 10],
|
||
|
|
},
|
||
|
|
// 属性下部分样式
|
||
|
|
end: {
|
||
|
|
color: 'rgba(255, 255, 250, 0.65)',
|
||
|
|
fontFamily: 'Microsoft YaHei',
|
||
|
|
fonSize: 12,
|
||
|
|
fontWeight: 400,
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
for (let i = 0; i < color.length; i++) {
|
||
|
|
var obj = { height: 6, width: 6, align: 'center', backgroundColor: color[i] };
|
||
|
|
richObj['rect' + (i + 1)] = obj;
|
||
|
|
}
|
||
|
|
let option = {
|
||
|
|
animationDuration: 300,
|
||
|
|
animationEasing: 'linear',
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontFamily: 'Microsoft YaHei',
|
||
|
|
},
|
||
|
|
radar: {
|
||
|
|
radius: '70%',
|
||
|
|
splitNumber: 2, // 雷达图圈数设置
|
||
|
|
axisName: {
|
||
|
|
formatter: (params) => {
|
||
|
|
// 使用formatter可以将结果进行重定义，同时可以使用语法`{|}`来引入富文本样式
|
||
|
|
// debugger;
|
||
|
|
// console.log(params);
|
||
|
|
let a = params.split(',')[0];
|
||
|
|
let b = params.split(',')[1];
|
||
|
|
// `${0}px`
|
||
|
|
index++;
|
||
|
|
var rect = 'rect' + index;
|
||
|
|
return `{top|${a}}\n{${rect}|} {end|${b}}`;
|
||
|
|
// return '{top|'+a+'}' + '\n' + '{rect|}{end|'+b+'}'
|
||
|
|
},
|
||
|
|
// 富文本样式定义
|
||
|
|
rich: richObj,
|
||
|
|
},
|
||
|
|
// 设置雷达图坐标轴线
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(255, 255, 205, 0.05)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitArea: {
|
||
|
|
show: false,
|
||
|
|
areaStyle: {
|
||
|
|
color: 'rgba(255,0,0,0)', // 图表背景的颜色
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 2,
|
||
|
|
color: ['rgba(255, 255, 255, 0.1)', 'rgba(6, 235, 238, 0.1)'],
|
||
|
|
// color: 'rgba(255, 255, 255, 0.1)', // 设置网格的颜色
|
||
|
|
},
|
||
|
|
},
|
||
|
|
indicator: _this.indicator,
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Budget vs spending',
|
||
|
|
type: 'radar',
|
||
|
|
symbol: 'none',
|
||
|
|
lineStyle: {
|
||
|
|
color: '#06EBEE',
|
||
|
|
width: 2,
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
color: 'rgba(6, 235, 238, 0.1)',
|
||
|
|
},
|
||
|
|
data: _this.series,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
return option;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|