93 lines
3.1 KiB
Vue
93 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<div ref="chartRef" :style="{ height, width }"></div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import {defineComponent, PropType, ref, Ref,reactive,watchEffect} from 'vue';
|
||
|
|
import {useECharts} from '/@/hooks/web/useECharts';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: "Radar",
|
||
|
|
props: {
|
||
|
|
chartData:{
|
||
|
|
type: Array,
|
||
|
|
default: () => ([]),
|
||
|
|
},
|
||
|
|
option:{
|
||
|
|
type: Object,
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: String as PropType<string>,
|
||
|
|
default: '100%',
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: String as PropType<string>,
|
||
|
|
default: 'calc(100vh - 78px)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
setup(props) {
|
||
|
|
const chartRef = ref<HTMLDivElement | null>(null);
|
||
|
|
const {setOptions, echarts} = useECharts(chartRef as Ref<HTMLDivElement>);
|
||
|
|
const option = reactive({
|
||
|
|
title: {
|
||
|
|
text: '基础雷达图'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: ['文综', '理综']
|
||
|
|
},
|
||
|
|
radar: {
|
||
|
|
indicator: [
|
||
|
|
{ name: '历史', max: 100 },
|
||
|
|
{ name: '地理', max: 110 },
|
||
|
|
{ name: '生物', max: 120 },
|
||
|
|
{ name: '化学', max: 130 },
|
||
|
|
{ name: '物理', max: 140 },
|
||
|
|
{ name: '政治', max: 150 }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'radar',
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: [82, 70, 60, 55, 90, 66],
|
||
|
|
name: '文综'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
watchEffect(() => {
|
||
|
|
props.chartData && initCharts();
|
||
|
|
});
|
||
|
|
|
||
|
|
function initCharts(){
|
||
|
|
if(props.option){
|
||
|
|
Object.assign(option,props.option);
|
||
|
|
}
|
||
|
|
//图例类型
|
||
|
|
let typeArr = Array.from(new Set(props.chartData.map(item => (item.type))));
|
||
|
|
//雷达数据
|
||
|
|
let indicator = Array.from(new Set(props.chartData.map(item => {
|
||
|
|
let {name,max} = item
|
||
|
|
return {name,max}
|
||
|
|
})));
|
||
|
|
|
||
|
|
let data = [];
|
||
|
|
typeArr.forEach(type => {
|
||
|
|
let obj={name:type};
|
||
|
|
let chartArr = props.chartData.filter(item => type === item.type);
|
||
|
|
obj['value'] = chartArr.map(item => (item.value));
|
||
|
|
//data数据
|
||
|
|
data.push(obj);
|
||
|
|
})
|
||
|
|
option.radar.indicator = indicator;
|
||
|
|
option.series[0]['data'] = data;
|
||
|
|
setOptions(option);
|
||
|
|
}
|
||
|
|
return {chartRef};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|