1、问题:这两天写的APP需要在一个页面中使用echarts图表,发现一个问题:在进入改页面初始化时,图表会缩小。但是把容器宽高设置为px就可以了,但是写的移动端需要适配必须rem。
2、问题根因:div还没有创建出来echarts就已经加载了,因为获取不到宽高就默认宽高100%为100px。
3、解决方法:给echarts设置延迟加载。
mounted() {
this.drawAssetTrendChart();
},
methods: {
drawAssetTrendChart() {
setTimeout(() => {
let earingsTrendChart = this.$echarts.init(document.getElementById("assetChart"));
let option = {
color: ["#79BAFA"],
grid: {
top: 35,
bottom: 30,
},
title: {
text: "资产(元)",
left: "left",
top: "top",
textStyle: {
fontSize: 12,
color: "#999",
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisTick: {
show: false,
},
},
yAxis: {
splitNumber: 4,
min: 0,
max: 40,
interval: 10,
type: "value",
axisLabel: {
show: true,
textStyle: {
fontSize: "12",
},
},
splitLine: {
lineStyle: {
type: "dashed",
},
},
},
series: [
{
type: "line",
stack: "Total",
smooth: true,
symbol: "none",
data: [24, 16, 6, 14, 36, 28, 19],
itemStyle: {
normal: {
lineStyle: {
width: 1,
},
},
},
},
],
};
earingsTrendChart.setOption(option);
}, 200);
},
},
4、效果如图: