今天項目中需要使用到
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>