本文介绍: 在项目需求中需要点击el–table中的某条数据,显示出该条数据的变化趋势,使用的是echarts4,发现每次点击el–dialog的时候,点击第一次的时候不会显示echarts的内容,但是查看元素的时候发现元素中有存放echarts的盒子,第二次点开虽然显示图表,但是图表挤在一起,页面检查发现宽高只有100px,但是明明已经设置样式宽高100%。
文章目录
前言:
在项目需求中需要点击el–table中的某条数据,显示出该条数据的变化趋势,使用的是echarts4,发现每次点击el-dialog的时候,点击第一次的时候不会显示echarts的内容,但是查看元素的时候发现元素中有存放echarts的盒子,第二次点开虽然显示图表,但是图表挤在一起,页面检查发现宽高只有100px,但是明明已经设置样式宽高100%。
<el-dialog :title="trendtitle"
:visible.sync="trendopen"
width="800px"
append-to-body>
<div id="main1"></div>
</el-dialog>
问题分析:
分析是dialog还没有完全显示出来,图表已经进行了初始化,导致第一次图标容器未挂载。然后因为装载图表容器的dom还未挂载,导致设置的宽高样式100%无效。
问题解决:
使用this.$nextTick(()=>{获取容器})
this.$nextTick(() => {
let myChart = this.$echarts.init(document.getElementById('main1'))
myChart.setOption({
title: {
text: upc
},
tooltip: {},
//配置x轴
xAxis: {
// data: ['一班', '二班', '三班', '四班', '五班', '六班']
data: xdataTime,
boundaryGap: false,
// axisLine: {
// show: true,
// lineStyle: {
// width: 1,
// type: "solid"
// }
// },
axisLabel: { //设置x轴的字
interval: 0,//使x轴横坐标全部显示
rotate: 45
},
},
grid: {
left: '20%',
bottom: '30%'
},
//配置固定滚动条
dataZoom: [{
type: 'slider',
show: true,
startValue: 0,
endValue: 10,
height: '15',
bottom: '3%',
zoomLock: true
}],
//配置y轴,可不配置,自定义了根据间隔
yAxis: {},
series: [{
name: upc,
type: 'line',
// data: [45, 42, 46, 48, 52, 47]
data: arr
}]
})
})
ps:
使用ref获取并不能够获取到echarts容器,如图
<el-dialog :title="trendtitle"
:visible.sync="trendopen"
width="800px"
append-to-body>
<div id="main1"
ref="main1"></div>
</el-dialog>
原文地址:https://blog.csdn.net/liqiannan8023/article/details/130109020
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_41754.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。