vue中的echarts实现宽度自适应的解决方案
作者：小茴香
这篇文章主要介绍了vue中的echarts实现宽度自适应,本文给大家分享实现方案，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
今天项目中需要使用到 echarts 为了自适应。找到了。以下解决方案、
效果图
代码
<template>
<!-- 这是图表开始 -->
<div class="chart">
<div
ref="main1"
style="width: 600px;height:400px;"
></div>
<div
ref="main2"
style="width: 600px;height:400px;"
></div>
</div>
<!-- 这是图表结束 -->
</template>
<script>
// 导入echarts
import echarts from 'echarts'
export default {
name: 'HomeIndex',
components: {
},
props: {},
data () {
return {
}
},
computed: {
},
watch: {
},
created () {
},
mounted () {
var myChart1 = echarts.init(this.$refs.main1)
var myChart2 = echarts.init(this.$refs.main2)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
}
myChart1.setOption(option)
myChart2.setOption(option)
window.addEventListener('resize', () => { myChart1.resize() })
window.addEventListener('resize', () => { myChart2.resize() })
window.onresize = () => {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
}, 300)
}
},
methods: {
}
}
</script>补充：下面看下VUE+ECharts 自适应宽度
card的边框，chart divwidth: '100%'
代码：
<el-row :gutter="5" style="padding-top: 0px">
<el-col :span="12">
<el-card>
<div id="myChart1" :style="{ width: '100%', height: '260px' }"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<div id="myChart2" :style="{ width: '100%', height: '260px' }"></div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="5" style="padding-top: 0px">
<el-col :span="12">
<el-card>
<div id="myChart3" :style="{ width: '100%', height: '260px' }"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<div id="myChart4" :style="{ width: '100%', height: '260px' }"></div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="5" style="padding-top: 0px">
<el-col :span="12">
<el-card>
<div id="myChart5" :style="{ width: '100%', height: '260px' }"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<div id="myChart6" :style="{ width: '100%', height: '260px' }"></div>
</el-card>
</el-col>
</el-row>
以上内容转载链接：https://www.cnblogs.com/xiaosheng1989/p/16415660.html
到此这篇关于vue中的echarts实现宽度自适应的文章就介绍到这了,更多相关vue echarts宽度自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！