调用接口方法后动态加载Echar图表

简要描述

1. 抽取公共部分

   const bulletPlot = ref(null);

2. 监控值的变化

   watch(() => props.data, (newVal, oldVal) => {		
   		...
   })

3. 重新初始化数据

   #G2图表的api方法`changeData()`,`Echar`是其它的。
   bulletPlot.value.changeData(newVal);

完整示例代码

---

在Echar中调用接口后动态加载图表展示数据

<template>

	<a-row :gutter="[10, 10]">

		<a-col :span="10">
			<a-card title="XXXX统计" :bordered="false">
				<RefererOfAWebsite v-if="isloading" :data="dataBingTu" style="height: 400px" />
			</a-card>
		</a-col>
		
  

		<a-col :span="24">
			<a-card title="XXXX进度" :bordered="false">
				<ZiDanTu02 v-if="isloading" :data="dataZiDanTu" />
			</a-card>
		</a-col>

	</a-row>



</template>

<script setup name="eCBingZhuangTu">
	import RefererOfAWebsite from '@/views/approval/yccgapprovalinfo/components/RefererOfAWebsite.vue'    
    import ZiDanTu02 from '@/views/approval/yccgapprovalinfo/components/ZiDanTu02.vue'
    import { onMounted } from 'vue';
	import yccgApprovalInfoApi from '@/api/approval/yccgApprovalInfoApi'

	let searchFormState = reactive({})
    
	const isloading = ref(false);

	const dataBingTu = ref()		
	const dataZiDanTu = ref();

	//查询方法
	const queryDataInfo = () => {						

		let reqParams = new FormData();		
		reqParams.append('startDate',searchFormState.dateStart!=null?searchFormState.dateStart.format('YYYY-MM-DD'):'');
		reqParams.append('endDate',searchFormState.dateEnd!=null?searchFormState.dateEnd.format('YYYY-MM-DD'):'');

		yccgApprovalInfoApi
				.queryEcharData(reqParams)
				.then((data) => {					

						//饼图
				 		let bingTuData = data.bingTuData;							
						if( bingTuData == null || bingTuData==undefined ){
							alert("未查询到有效数据!");
							return ;
						}
						
						let dataParams01 =[];	
						if( bingTuData.countAfterToday>0 ){
							dataParams01.push({ value: bingTuData.countAfterToday, name: '施工中' });	
						}	
						if( bingTuData.countBeforeToday>0 ){
							dataParams01.push({ value: bingTuData.countBeforeToday, name: '已结束' });
						}							
						dataBingTu.value = dataParams01;

						//子弹图
						let arrayZiDanTu = [];
						data.ziDanTuData.map((item) => {
							let date = {};
							date.title = item.projectName;
							date.measures = item.measures;
							date.ranges = item.ranges;
							date.target = item.target;

							arrayZiDanTu.push(date);
						});
						dataZiDanTu.value = arrayZiDanTu;						

				})
				.finally(() => {
					//接口调用数据加载完成
					isloading.value = true;
				})
	}

	//重置
	const cleanQueryDate = () => {
		searchFormState.dateStart = null;
		searchFormState.dateEnd = null;

		queryDataInfo();
	}

	onMounted(() => {
		queryDataInfo();
	})

</script>

饼图

<template>
	<div id="RefererOfAWebsite"></div>
</template>
<!--ec官网：https://echarts.apache.org/zh/index.html-->
<script setup name="RefererOfAWebsite">
	import { onMounted } from 'vue'
	import * as echarts from 'echarts'

	const Echarts = ref(null);
	
	const props = defineProps({
		data: {
      	  type: Array,      	
    	}
	})

	var option = {
			title: {
				text: '',
				subtext: '',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [
				{
					name: '',
					type: 'pie',
					radius: '50%',
					// data: [
					// 	{ value: 1048, name: '进行中' },
					// 	{ value: 735, name: '已结束' }
					// ],
					data: props.data,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
	}

	watch(() => props.data, (newVal, oldVal) => {
		//console.log('newVal:', newVal);
		
		props.data = newVal;		

		option = {
			title: {
				text: '',
				subtext: '',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [
				{
					name: '',
					type: 'pie',
					radius: '50%',
					// data: [
					// 	{ value: 1048, name: '进行中' },
					// 	{ value: 735, name: '已结束' }
					// ],
					data: props.data,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		}
		
		Echarts.value.setOption(option)
	})

	onMounted(() => {
		Echarts.value = echarts.init(document.getElementById('RefererOfAWebsite'))		
		
		// 绘制图表
		Echarts.value.setOption(option)
		// 自适应大小
		window.onresize = () => {
			Echarts.value.resize()
		}
	})
</script>

子弹图

<template>
	<div id="ZiDanTu02"></div>
</template>

<script setup>
	import { onMounted } from 'vue'
	import { Bullet } from '@antv/g2plot'
	 
	const bulletPlot = ref(null);
 
	const props = defineProps({
		data: { type: Array,}
	})

	watch(() => props.data, (newVal, oldVal) => {		
		bulletPlot.value.changeData(newVal);
	})

	onMounted(() => {
		bulletPlot.value = new Bullet('ZiDanTu02', {
			data: props.data,
			measureField: 'measures',
			rangeField: 'ranges',
			targetField: 'target',
			xField: 'title',
			color: {
				range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
				measure: '#5B8FF9',
				target: '#39a3f4'
			},
			label: {
				measure: {
					position: 'middle',
					style: {
						fill: '#fff'
					}
				}
			},
			xAxis: {
				line: null
			},
			yAxis: false,
			// 自定义 legend
			legend: {
				custom: true,
				position: 'bottom',
				items: [
					{
						value: '30%',
						name: '30%',
						marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 5 } }
					},
					{
						value: '60%',
						name: '60%',
						marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 5 } }
					},
					{
						value: '90%',
						name: '90%',
						marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } }
					},
					{
						value: '实际进度',
						name: '实际进度',
						marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } }
					},
					// {
					// 	value: '目标值',
					// 	name: '目标值',
					// 	marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } }
					// }
				]
			}
		});	
		bulletPlot.value.render() 	
	})
</script>