Cuando estaba desarrollando, si hacía clic para cambiar en el control de pestaña, los datos no cambiarían o la visualización sería incorrecta. Más tarde vi el artículo de este blogger, v-if es muy bueno aquí y es una solución perfecta.
Declaración de derechos de autor: este artículo es un artículo original del blogger de CSDN "Front-end Li Xiaobai" y sigue el acuerdo de derechos de autor CC 4.0 BY-SA. Adjunte el enlace de la fuente original y esta declaración al reimprimir.
Enlace original: https://blog.csdn.net/qq_42268364/article/details/100105338
Cuando se representan varios gráficos echart en el control de pestaña y luego se cambian a vista, se descubre que el ancho del gráfico es incorrecto.
Motivo: cuando se carga la página, el gráfico oculto no puede encontrar el tamaño div correspondiente, por lo que se proporciona un tamaño por defecto. Entonces, lo que tienes que hacer es inicializar el gráfico cuando se carga la página.
Realmente hay demasiadas trampas en Internet. Estoy convencido de que no pruebo todo lo que funciona o no antes de publicarlo yo mismo. Estoy realmente convencido de estas personas. Originalmente, una buena solución en las pestañas de elementos era agregar el atributo lazy='true' al panel de pestañas, ¡pero este atributo ya no está disponible! ¡no queda ninguno! Mirando la imagen,
el funcionario eliminó este atributo, entonces, ¿cómo modificarlo ahora? Aquí hay un buen método, que es absolutamente efectivo en pruebas personales.
Principio: utilizando el atributo v-if, al cambiar a la pestaña correspondiente, establezca el valor v-if en verdadero y configure la pestaña mostrada predeterminada.
El código se muestra a continuación:
<template>
<div>
<el-tabs type="card" v-model="tabItem">
<el-tab-pane label="第一页" name="tab1">
<charts v-if="'tab1' === tabItem"></charts>
</el-tab-pane>
<el-tab-pane label="第二页" name="tab2">
<charts v-if="'tab2' === tabItem"></charts>
</el-tab-pane>
<el-tab-pane label="第三页" name="tab3">
<charts v-if="'tab3' === tabItem"></charts>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import charts from "@/components/charts.vue";
export default {
name: "index",
components: {
charts
},
data(){
return {
tabItem: "tab1"
}
}
};
</script>
<style>
</style>
Déjame explicarte aquí, debes convertir el gráfico echart requerido en un componente y usarlo. De lo contrario, no se cargará de forma predeterminada al principio y la página informará un error. Debes convertirlo en un componente y usarlo.
Código dentro del componente:
<template>
<div id="chart-part1" style="width:100%;height:160px"></div>
</template>
<script>
export default {
name: '',
data () {
return {}
},
mounted () {
this.getEchartData1();
},
methods: {
getEchartData1() {
const myChart = this.$echarts.init(
document.getElementById("chart-part1")
);
const option = {
title: {
text: "全院业务收入趋势",
textStyle: {
color: "#717785",
fontSize: 14
},
top: "12%",
left: "3%"
},
tooltip: {
trigger: "axis"
},
legend: {
top: "12%",
left: "50%",
itemWidth: 10,
itemHeight: 10,
data: ["业务", "药品", "环比"]
},
grid: {
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#cee1f0"
}
},
axisLine: {
lineStyle: {
color: "#cee1f0"
}
},
axisTick: {
inside: true
},
data: ["8.12", "8.13", "8.14", "8.15", "8.16", "8.17", "8.18"]
},
yAxis: [
{
type: "value",
name: " 万元",
nameGap: 2,
nameTextStyle: {
color: "#cee1f0"
},
splitLine: {
show: true,
lineStyle: {
color: "#cee1f0"
}
},
axisLine: {
lineStyle: {
color: "#cee1f0"
}
},
axisTick: {
show: false
}
},
{
type: "category",
name: "%",
nameGap: 2,
nameTextStyle: {
color: "#cee1f0"
},
axisLine: {
lineStyle: {
color: "#cee1f0"
}
},
axisTick: {
show: false
},
data: ["0", "50", "100"]
}
],
series: [
{
name: "业务",
type: "line",
symbol: "circle",
symbolSize: 6,
itemStyle: {
color: "#1295ff"
},
data: [30, 32, 33, 34, 35, 36, 37]
},
{
name: "药品",
type: "line",
symbol: "circle",
symbolSize: 6,
itemStyle: {
color: "#fd7c14"
},
data: [20, 21, 22, 23, 24, 25, 26]
},
{
name: "环比",
type: "line",
symbol: "circle",
symbolSize: 6,
itemStyle: {
color: "#08e4f8"
},
data: [10, 11, 12, 13, 14, 15, 16]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
},
}
}
</script>
<style lang="less" scoped>
</style>
El efecto es el siguiente, absolutamente útil,
cargado al principio:
Después de hacer clic en cambiar
Si tienes alguna duda, puedes dejar un mensaje y preguntar.
——————————————
Declaración de derechos de autor: este artículo es un artículo original del blogger de CSDN "Front-end Li Xiaobai" y sigue el acuerdo de derechos de autor CC 4.0 BY-SA. Adjunte el enlace de la fuente original y esta copia al reimprimir la declaración.
Enlace original: https://blog.csdn.net/qq_42268364/article/details/100105338