142 lines
3.7 KiB
Vue
142 lines
3.7 KiB
Vue
<!-- @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>
|