Vue3 一文解决Echarts难点:Vue3下echarts基本配置||echarts响应式数据改变的两种方式||echarts页面自适应解决

本文介绍了在Vue3中如何简单配置Echarts,包括安装、导入、初始化图表以及从Echarts官网获取图表配置。同时,提供了两种响应式更新图表数据的方法:一是通过watch监听数据变化,二是利用setOption的重绘参数。此外,还讲解了如何实现图表的自适应窗口大小变化。

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

Vue3下Echarts基本配置(超级简单的c/v操作)

当你不知道如何使用Echarts时,这个便超级适合你,简单快捷的配置方式,而且直接解决你自适应和重绘的问题,直接就是【超级简单的c/v操作】
1.控制台安装Echarts

npm install echarts --save

2.引入echarts(直接复制粘贴)

import * as echarts from 'echarts'

3.将下面方法二的代码直接全部取到你的页面对应位置中(直接复制粘贴)
4.打开echarts官网的示例:echarts图表示例
选取你想要的图表并点击打开后:直接把option里面的内容复制出来直接覆盖步骤2代码中的【//这里放Option配置信息】就完成了。(直接复制粘贴)在这里插入图片描述4.根据需求进行自行修改Option配置信息,多查阅配置手册

响应式数据改变的两种方式

在Vue3项目的开发过程中,使用echarts图表可视化时都是将其作为组件封装然后通过父子传值的方式进行数据传递。但是数据都是在页面渲染完毕后才获取到,相当于我们的图表已经获取到了才拿到了值,所以我们需要进行重绘操作。以此,经过学习和项目经历,有两种便捷方式可以使用。

方法一(watch监听方式)

我们可以对响应式数据进行监听,数据改变我们就进行一次调用绘制图表的方法。


<div id="myEchartsschool" class="timeback" :style="{ width: '100%', height: '100%' }" ></div>
|||||||||||||||||||||||||||||||||||||||||||||||
import { onMounted, onUnmounted, watch } from 'vue'
|||||||||||||||||||||||||||||||||||||||||||||||
props: {
	//传递的数据
	//schoolgj: [],
},
setup(props) {
	let myEchartsschool = echarts
	onMounted(() => {
		method.initChart()
	})
	onUnmounted(() => {
		myEchartsschool.dispose
	})
	const method = reactive({
		initChart() {
			let chart = myEchartsschool.init(
				document.getElementById('myEchartsschool')
			)
			chart.setOption(
				//这里放Option配置信息//页面自适应调整
			window.addEventListener('resize', () => {
            if (chart) {
              chart.resize()
            }
          })
        },
      })
      //通过监听进行对图表的重绘
	watch(() => props.schoolgj,
		(count, prevCount) => {
			// 绘制图表
			method.initChart()
		},
		{
			deep: true,
		}
	)
	return {
		...toRefs(method),
	}
}

方法二(setOption的第二参数进行设置)推荐!!!

我们还可以echarts内部方法参数进行设置,setOption的第二参数设置为true/false都可以实现重绘,但是重绘的方式不一样。
设置为true时:就是notMerge,只进行重绘,数据不合并
设置为false时:就是Merge,只进行重绘,数据会进行合并


<div id="myEchartsschool" class="timeback" :style="{ width: '100%', height: '100%' }" ></div>
|||||||||||||||||||||||||||||||||||||||||||||||
import { onMounted, onUnmounted } from 'vue'
|||||||||||||||||||||||||||||||||||||||||||||||
props: {
	//传递的数据
	//schoolgj: [],
},
setup(props) {
	let myEchartsschool = echarts
	onMounted(() => {
		method.initChart()
	})
	onUnmounted(() => {
		myEchartsschool.dispose
	})
	const method = reactive({
		initChart() {
			let chart = myEchartsschool.init(
				document.getElementById('myEchartsschool')
			)
			chart.setOption(
				//这里放Option配置信息//页面自适应调整
			window.addEventListener('resize', () => {
            if (chart) {
              chart.resize()
            }
          })
        },
      })
      return {
        ...toRefs(method),
      }
}

自适应设置

解决:当页面分辨率进行改变后,需要echarts可视化图表进行自动重新绘制并改变大小
使用方式:将以下代码插入进你所调用的echarts方法里面(如上面完整代码)


```javascript
window.addEventListener('resize', () => {
	if (chart) {
		chart.resize()
	}
})
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zmsup

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值