今天项目中需要使用到 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宽度自适应内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！
