vue3中动态设置echarts图的高度
近期写个vue3项目，中间要使用echarts图，因为要适配不同的显示器，简直快被搞疯了。这个问题搞了无数次，但每次都会遇到，记录一下本次的解决方案
一、组件中的写法
组件中只需要把html标签写出来就行了，然后加JavaScript代码
<el-card class="top-graph" ref="topGra">
<div style="height: 100%;" ref="speed"></div>
</el-card>
样式我就不写了，外层是个elementplus中的el-card，内层是要渲染的速度曲线图
js中相关的代码：
import {
ref, reactive, onMounted, watch, nextTick } from 'vue'
import {
useElementSize } from '@vueuse/core' // 使用vueuse获取dom元素的尺寸
// 点击表格中的眼睛图标时，改变右侧顶部的数据，需要一个索引
const dataIndex = ref(0)
onMounted(() => {
nextTick(() => {
drawChart(dataIndex.value, speed.value)
})
})
import {
drawChart } from './components/LineChartOptions'
const speed = ref(null)
const topGra = ref(null)
const {
width, height } = useElementSize(topGra)
console.log(width.value, height)
watch(() => [dataIndex, height], (newVal, oldVal) => {
console.log(newVal)
// currentHeight.value = newVal
drawChart(newVal[0].value, speed.value, newVal[1].value)
}, {
deep: true })
这里有点复杂的逻辑，echarts图是变化的，需要根据dataIndex这个响应式数据来切换加载的数据源，同时，要自适应显示图的高度
实现的逻辑：监听dataIndex, height这两个值的变化情况，发生变化时，重新绘制曲线图，最好加一下深度监视也就是{ deep: true }
那么获取echarts图的高度呢，用到了vueuse这个插件中的useElementSize，它可以获取dom元素的高度和宽度，注意，它获取的是echarts图父节点的高度，因为echarts很难搞，没有图片的时候，节点根本就没有渲染，根本就获取不到speed这个dom元素，所以只能给一个父元素，通过设置与父元素相同的高度来显示图
大致是这么个流程，不过需要根据实际项目来理解会更容易一些
另外，可以看到，drawChart这个方法我是封装在插件中的，可以看下我插件是怎么写的
二、插件中的写法
import axios from "axios";
import * as echarts from 'echarts'
export const drawChart = (index, ref, height=260) => {
axios
.get("static/json/speed.json")
.then((res) => {
const all_data = res.data[index];
// console.log(all_data)
const x = [];
const data = [];
for (let i = 0; i < all_data.length; i++) {
x.push(all_data[i].time);
// const {sgqs, swrs, ssrs} = all_data[i]
// const datai = {sgqs, swrs, ssrs}
const datai = {
纵向速度: all_data[i].speed };
data.push(datai);
}
const keyArray = Object.keys(data[0]);
const series = [];
keyArray.forEach((key) => {
series.push({
name: key,
data: data.map((item) => item[key]),
type: "line",
smooth: true,
});
});
// console.log(series)
const options = {
title: {
text: "车辆速度变化情况" },
tooltip: {
// 鼠标悬浮提示框显示 X和Y 轴数据
trigger: "axis",
backgroundColor: "rgba(32, 33, 36,.7)",
borderColor: "rgba(32, 33, 36,0.20)",
// borderWidth: 1,
textStyle: {
// 文字提示样式
color: "#fff",
fontSize: "12",
},
axisPointer: {
// 坐标轴虚线
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
xAxis: {
data: x,
type: "category",
},
yAxis: {
},
legend: {
data: keyArray,
},
series,
};
const chart_line = echarts.init(ref);
chart_line.resize({
height})
chart_line.setOption(options);
window.addEventListener("resize", () => {
chart_line.resize();
});
})
.catch((err) => {
console.log(err);
});
};
drawChart需要三个参数，数据索引，需要显示图片的dom，以及图的高度
这三个元素都由组件传递，不过高度有默认值，就是260px，不过会根据你的实际窗口大小变化的，因为我的el-card的高度也是变化的
这个方法做了如下几件事：
- axios获取数据
- 根据index值取出需要的数据（其实这个事儿该后端做）
- 处理echarts需要的数据
- 根据输入的dom参数初始化dom
- 根据输入的height来设置图的高度
- echarts设置option
- 监听窗口变化，改变窗口大小
三、几个问题
其实根据上面的解决方案，已经大致解决了，但是还有几个小问题
- 重绘图的时候，控制台会报警说原来的dom上有图片，所以每次重绘之前，其实应该判断dom是否存在
- 插件中第7步resize的时候，并没有给参数