第一种方法
window.onresize = () => {
myChart.resize();
}
第二种方法
window.addEventListener("resize", () => {
myChart.resize();
});
第三种方法
export const resizeFn = (arr) => {
window.onresize = () => {
arr.forEach((item) => {
item.resize();
});
};
};
第一种方法因为使用的是dom零级事件,只能绑定一个echarts图表使用,绑定多个会被覆盖掉,只会执行最后一个。所以第二种方法就解决了这个问题,dom二级事件,dom二级事件的优点是可以绑定多个元素而不会被覆盖掉。
第三种方式是封装成一个组件使用,在每次使用的时候将元素传进来在每个图表,item 改变的时候去循环改变每一个图表的大小
echarts组件封装
1.echarts组件封装
第一种方法是单独抽离数据
<template>
<div id="main" ref="mycharts">
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, defineProps, shallowRef } from 'vue'
import * as echarts from 'echarts'
const { option } = defineProps(['option'])
const mycharts = shallowRef()
const charts = shallowRef({})
onMounted(() => {
charts.value = echarts.init(mycharts.value)
charts.value.setOption(option)
})
defineExpose({
charts
})
</script>
<style scoped>
#main {
width: 100%;
height: 100%;
}
</style>
<template>
<Mycharts class="main" ref="mycharts" :option="LineOption" :key="key"></Mycharts>
</template>
单独请求或者封装数据
2.echarts组件封装
使用时候直接在页面中写一个盒子
封装组件
import { ref, onMounted } from "vue";
export const useInit = (fn) => {
const tableData = ref([]); // 定义数组容器
const init = () => {
fn().then((res) => { // 请求数据api
tableData.value = res.data.data;
tableData.value.forEach(item => {
if (item.code == 'true') { // 请求成功返回数据失败则不返回
item.code = true
} else {
item.code = false
}
})
});
};
onMounted(() => {
init() // 在生命周期中调用数据
})
return {
tableData,
init
};
};
在页面使用时直接初始化数据
// 初始化柱状图 形参
const init = (initDom, chartOption) => {
const chartDom = initDom.value;
let myChart = echarts.init(chartDom);
myChart.setOption(chartOption);
return myChart
}
在生命周期中调用获取数据并适配
可以同时传入多个图表
onMounted(() => {
resizeFn([init(box, leftChart), init(boxRight, rightChart)])
});