echarts超出容器宽度问题的解决办法
在使用vue+iview+echarts时,出现了echarts图标刷新页面会超出容器宽度的问题 如下图所示:html代码如下:<a-col class="gutter-row" :span="6"><div class="gutter-box echarts_col"><div class="echarts_top"><p>浏览量</p>
·
在使用vue+iview+echarts时,出现了echarts图标刷新页面会超出容器宽度的问题 如下图所示:
- html代码如下:
<a-col class="gutter-row" :span="6">
<div class="gutter-box echarts_col">
<div class="echarts_top"><p>浏览量</p> <p>6666</p> </div>
<div id="myChart" :style="{minHeight: '80px'}"></div>
<div class="echarts_footer">
<span>日浏览量</span>
<span>月浏览量</span>
</div>
</div>
</a-col>
js代码
methods:{
//浏览量
drawLine(){
let myChart = this.$echarts.init(document.getElementById('myChart'))
myChart.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
show:false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top: '15%',
left: '0%',
right: '0%',
bottom: '25%',
},
series: [{
data: [820, 1500, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {
color:'#d5e8fd', //图形填充得背景颜色
},
lineStyle:{
color:'#3174f5'//区域填充样式。
},
symbol:'none', //取点折线圆点
smooth: 'true' //设置折线为弧形
}]
});
window.addEventListener('resize', function () { myChart.resize();}
)
},
},
create(){
this.$nextTick(()=>{
this.drawLine()
})
}
- 解决方法
create(){
this.$nextTick(()=>{
setTimeout(()=>{
this.drawLine()
},20)
})
}
更多推荐
已为社区贡献3条内容
所有评论(0)