给于vue2 + springboot +echars异步请求获取数据来重新生成图表（注意：本人实际测试和解决问题，解决的问题是删除原有的图表实例）

最新推荐文章于 2024-03-06 11:01:48 发布

qq_51318736

最新推荐文章于 2024-03-06 11:01:48 发布

阅读量537

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_51318736/article/details/130196587

文章讲述了在Vue应用中如何处理Echarts图表，通过异步请求数据，动态实例化或销毁图表。关键步骤包括检查图表实例，根据需要销毁并重新生成图表，以及在mounted生命周期钩子中使用setTimeout确保数据加载后再渲染图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤一生成图表的时候

初始化
vue里面的data定义一个变量来接收图标实例，
我用的是myChart:null,

异步请求的方法主要注意我使用的是若依框架前后端分离
listIssuesMoon(moon).then(res=>{
判断实例为空则实例化图表，不为空则销毁图表
if (this.myChart != null && this.myChart !== '' && this.myChart !== undefined) {
//销毁那个实例
this.myChart.dispose(); //销毁}
//重新生成那个图表（res为异步请求的数据）
this.getEcharsMeetingType(res)
})//
这个是我把图表的分装为为一个函数来实现调用
val是传递的异步请求参数(相当于上面的res)
getEcharsMeetingType( val) {
 	let chartDom = document.getElementById( 'sex2' );
 	this.myChart = echarts.init( chartDom );
 	let option;
 	option = {
 		title: {
 			text: '统计会议分组数据',
 			left: 'center',
 			textStyle: {
 				color: '#fff',
 				fontSize: 18
 			},
 		},
 		tooltip: {
 			trigger: 'item'
 		},
 		legend: {
 			orient: 'vertical',
 			left: '1%',

 			top: 65,
 			itemWidth: 60,
 			itemHeight: 25,
 			align: 'auto'
 		},
 		label: {
 			formatter: '{b}:\n{c}条:({d}%)',
 		},
 		series: [ {
 			name: 'Access From',
 			type: 'pie',
 			radius: [ '70%', '40%' ],

 			data: val,
 			emphasis: {
 				itemStyle: {
 					shadowBlur: 10,
 					shadowOffsetX: 0,
 					shadowColor: 'rgba(0, 0, 0, 0.5)'
 				}
 			},
 			/** 导航线的字体大小 **/
 			label: {
 				formatter: '{b}\n{c}条:  ({d}%)',
 			},
 			labelLine: {
 				/** 是否显示视觉引导线 **/
 				show: true,
 				/**  引导线的长度视觉引导线第一段的长度 **/
 				length: 150,
 				/**  延长线的长度视觉引导项第二段的长度**/
 				length2: 100,
 				/**  是否平滑视觉引导线，默认不平滑 **/
 				smooth: false,
 				/** 通过调整第二段线的长度，限制引导线两端之间最小的夹角，以防止过小的夹角导致显示不美观。 **/
 				minTurnAngle: 90,
 				/** 通过调整第二段线的长度，限制引导线与扇区法线的最大夹角。设置为小于 90 度的值保证引导线不会和扇区交叉。 **/
 				maxSurfaceAngle: 90,
 				/**  线条的颜色  **/
 				lineStyle: {
 					/**  线条的宽度 **/
 					width: 4,
 					/**  线的类型 **/
 					type: 'solid'
 				}
 			},
 			top: 30
 		} ]
 	};

 	option && this.myChart.setOption( option );
 },

注意：在异步请求的时候需要设置定时器
（应为静态图表渲染优先于异步请求所以你会出现数据请求不到的结果）
  mounted() {
    var times=setTimeout(()=>{
      this.getEcharsMeetingType(this.ybArr);
    },1000)
  },