1. Surgen problemas
Recientemente, cuando trabajaba en un proyecto en segundo plano (vue2+element-ui), encontré un pequeño error. El tamaño de la imagen de echarts en el fondo no puede cambiar con la ventana del navegador, lo que hará que la imagen de echarts se bloquee cuando el navegador la ventana está ajustada. . El efecto es el siguiente:
1. Cuando está en pantalla completa, la imagen es la siguiente:
2. Al ajustar la ventana del navegador, el error es el siguiente:
Dos, resuelve el problema.
1. Resuelva el problema de que el tamaño de la imagen cambia con la ventana del navegador
No hay mucho que decir, solo ve al código
A. parte de la plantilla:
<template>
<div class="content">
<div id="main" style="width:80%;height:600px;margin:85px auto"></div>
</div>
</template>B. parte del guión
import echarts from 'echarts';
export default {
name:'App',
data(){
return {}
},
mounted(){
this.initEcharts();
},
methods:{
initEcharts(){
const myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
xAxis: {
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
},
legend: {
orient: 'horizontal',
left: '10%',
top: '1%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: ''
},
yAxis: {},
series: [
{
name:'男生',
type: "bar", //形状为柱状图
data: [11, 16, 30, 37, 67, 54, 25],
barWidth:"25%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'blue'
}, {
offset: 1,
color: 'skyblue'
}]),
}
}
},
{
name:'女生',
type: "bar", //形状为柱状图
data: [10, 12, 40, 30, 30, 43, 50],
barWidth:"25%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'red'
}, {
offset: 1,
color: 'pink'
}]),
}
}
}
]
});
// ***********随着浏览器大小调节图表*********** <-重点在此
window.onresize = () => {
myChart.resize()
}
}
}
}
</script>C. El efecto es el siguiente:
De esta forma se consigue el efecto de cambiar con el cambio de ventana del navegador.
2. La imagen de echarts cambia con el elemento especificado
A veces, los cambios de imagen de echarts con los cambios del navegador no pueden satisfacer la demanda, así que encontré un complemento de vue,
elemento-cambio-de-tamaño-detector , eso es todo
a. Instalación: npm i element-resize-detector
importación b.main.js:
// 监听元素大小变化(为echarts服务)
import ElementResizeDetectorMaker from "element-resize-detector";
Vue.prototype.$erd = ElementResizeDetectorMaker();C. uso
parte de la plantilla:
<template>
<div class="content" style="width:80%;height:700px;border:1px solid black;">
<div id="main" style="width:80%;height:600px;margin:85px auto"></div>
</div>
</template>parte del guión:
<script>
import echarts from 'echarts';
export default {
name:'App',
data(){
return {}
},
mounted(){
this.initEcharts();
},
methods:{
initEcharts(){
// ************引入vue监测插件************* <-重点在此
const elementResizeDetectorMaker = require("element-resize-detector");
let erd = elementResizeDetectorMaker();
const myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
xAxis: {
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
},
legend: {
orient: 'horizontal',
left: '10%',
top: '1%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: ''
},
yAxis: {},
series: [
{
name:'男生',
type: "bar", //形状为柱状图
data: [11, 16, 30, 37, 67, 54, 25],
barWidth:"25%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'blue'
}, {
offset: 1,
color: 'skyblue'
}]),
}
}
},
{
name:'女生',
type: "bar", //形状为柱状图
data: [10, 12, 40, 30, 30, 43, 50],
barWidth:"25%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'red'
}, {
offset: 1,
color: 'pink'
}]),
}
}
}
]
});
// ***********随着指定元素大小调节图表*********** <-重点在此
erd.listenTo(document.querySelector(".content"), () => {
myChart.resize();
});
}
}
}
</script>D. El efecto es el siguiente:
En estado de pantalla completa:
En estado zoom:
Se puede ver que la imagen de echarts ha comenzado a cambiar con el cambio del cuadro .content El principio es monitorear el cambio del elemento especificado a través del complemento vue.
Esa es toda la información valiosa, espero que te pueda ser útil, si no entiendes, lee los comentarios en el código, los puntos clave han sido marcados, si no entiendes, solo copia y pega, aplica directamente , también quiero dejar constancia de las dificultades encontradas en el trabajo Enfermedad miscelánea, nada más, ¡oh sí!