Echarts大屏-------数据图

效果图如下：

步骤分解： 

A、引入

import * as echarts from 'echarts';

import { ECharts } from 'echarts';

B、 Html

<template><div style="padding: 20px"><!-- loading加载 --><n-spin v-if="loading" size="large" /><!-- echars图  --><div id="getDemoId" style="z-index: 9999"></div><img src="蜘蛛网背景图" alt="" /><ul><li><n-tooltip trigger="hover" placement="left"><template #trigger><div></div></template><template v-if="data.demo.length > 0"><divv-for="(item, index) in data.demo":key="index"style="display: flex; justify-content: space-between"><span>{{ item.demoValue }}:</span><span>第{{ item.demoRank }}名</span></div></template><template v-else> 暂无数据 </template></n-tooltip></li></ul></div>
</template>

C：CSS

<style lang="scss" scoped>
img {position: absolute;top: 40px;left: 245px;width: 410px;
}ul {position: absolute;top: 21px;left: 194px;display: flex;flex-wrap: wrap;justify-content: space-between;width: 530px;height: 552px;li {width: 170px;height: 192px;}
}
</style>

D、TS

const data = ref({demo: {}, //管理能力指标
});
var myChart: ECharts;
var option = {color: [config['colorffffff10']],radar: {indicator: [{name: '一',max: 2,textStyle: { fontSize: 20 },},{name: '二',max: 2,},{name: '三',max: 2,},{name: '四',max: 2,},{name: '五',max: 2,},{name: '六',max: 2,},],name: {padding: [24, 40, 24, 40],textStyle: {color: config['colorffffff'],fontSize: 16,},},axisLine: {show: false,},splitLine: {show: false,},splitArea: {show: false,},label: {show: false,},},series: [{name: '',type: 'radar',data: [{value: [600, 600, 1000, 600, 800, 800],name: '',areaStyle: {// 单项区域填充样式color: {type: 'linear',x: 1, //右y: 0, //下x2: 1, //左y2: 1, //上colorStops: [{offset: 0,color: '#39CDFD',},{offset: 1,color: '#0B4DC761',},],},},itemStyle: {borderColor: '#00DBFF',borderWidth: 2,},},],},],
};const initEchart = () => {myChart = echarts.init(document.getElementById('getDemoId'));myChart.setOption(option);
};const loading = ref(false);

调用接口获取数据

const getData = () => {loading.value = true;XXX({根据月份：接口调用month: month,}).then(({ success, message, object }) => {loading.value = false;if (success) {option.series[0].data[0].value = [object.demo,];option.radar.indicator.forEach((item) => {item.max = object.totalDemoNum;});initEchart();} else {error(message);}});
};

生命周期中数据调用&&图表销毁

onMounted(() => {getData();
});watch(() => month,() => {getData();},{deep: true,},
);onUnmounted(() => {myChart.dispose();
});

完成！！

*★,°*:.☆(￣▽￣)/$:*.°★* 。