公共操作:
引入插件
npm install element-resize-detector --save
在页面中引用该插件
import elementResizeDetectorMaker from "element-resize-detector";
Vue2部分:
将echarts渲染出来,以官网例子举例:
var chartDom = document.getElementById('echartsBox'); //容器名字
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);
若要实现在页面中整体放大时,图表也跟着等比例放大 ,如在浏览器中按F11全屏时,加入下方代码
//点击F11时,echarts图表跟随屏幕的大小变化而变化
window.addEventListener('resize', function () {
myChart.resize();
});
若要实现在页面中跟随当前容器的大小变化时,图表有跟着等比例放大,如当前容器的宽高占比可能为动态数值时,加入下方代码
//根据当前容器的尺寸变化而让图表也跟着变化
let changeSize = elementResizeDetectorMaker()
let _this = this
changeSize.listenTo(chartDom,() => { //chartDom为之前获取到的容器名
_this.$nextTick(() => {
myChart.resize()
})
})
Vue2完整代码呈现:
<template>
<div id="echartsBox">
</div>
</template>
<script>
import * as echarts from 'echarts';
import elementResizeDetectorMaker from "element-resize-detector";
export default{
data(){
return{
}
},
methods:{
initEcharts(){
var chartDom = document.getElementById('echartsBox'); //容器名字
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);
//点击F11时,echarts图表跟随屏幕的大小变化而变化
window.addEventListener('resize', function () {
myChart.resize();
});
//根据当前容器的尺寸变化而让图表也跟着变化
let changeSize = elementResizeDetectorMaker()
let _this = this
changeSize.listenTo(chartDom,() => { //chartDom为之前获取到的容器名
_this.$nextTick(() => {
myChart.resize()
})
})
}
},
mounted(){
this.initEcharts()
}
}
</script>
<style lang="scss" scoped>
#echartsBox{
width: 100%;
height: 100%;
background-color: aquamarine;
}
</style>
Vue3部分:
渲染图表就不多做讲解,节约大家时间,直接上跟随容器的变化而变化部分,完整代码放在最后
//跟随盒子的变化而变化
let erd = elementResizeDetectorMaker()
erd.listenTo(Chart.value,() => {
nextTick(() => {
Chart.resize()
})
})
在vue3里 我使用的ref去拿的容器,完整代码如下:
<template>
<div id="echartsBox" ref="myEcharts">
</div>
</template>
<script lang="ts" setup>
import { ref ,onMounted, nextTick } from 'vue'
import { init as chartInit, } from "echarts"
import elementResizeDetectorMaker from "element-resize-detector";
const myEcharts: any = ref<HTMLDivElement | null>(null)
let Chart:any;
function initEcharts(){
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
EchartsPieInit(option)
}
function EchartsPieInit(option:any) {
Chart = chartInit(myEcharts.value);
Chart.clear();
Chart.setOption(option);
//跟随窗口的变化而变化
window.addEventListener('resize', function () {
Chart.resize();
});
//跟随盒子的变化而变化
let erd = elementResizeDetectorMaker()
erd.listenTo(Chart.value,() => {
nextTick(() => {
Chart.resize()
})
})
}
onMounted(() => {
initEcharts()
})
</script>
<style lang="scss" scoped>
#echartsBox{
width: 100%;
height: 100%;
background-color: aquamarine;
}
</style>