解决vue中echarts图自适应问题,设置100%宽度显示100px.
<div id="myChart"></div>data(){myChart:null,echarts_option1:{},},methods:{setEcharts() {let myChart = document.getElementById("myChart");myChart.s...
·
<div id="myChart"></div>
data(){
myChart:null,
echarts_option1:{},
},
methods:{
setEcharts() {
let myChart = document.getElementById("myChart");
myChart.style.width = window.innerWidth - 290 + "px"; //初始化echarts图表宽度
this.myChart = this.$echarts.init(myChart);
this.myChart.setOption(this.echarts_option1);
let self = this;
window.addEventListener("resize", () => { // 通过resize方法来重设图表宽度
let myChart = document.getElementById("myChart");
myChart.style.width = window.innerWidth - 290 + "px";
self.myChart.resize();
});
},
mounted() {
this.setEcharts();
},
<style>
#myChart {
width: 100%;
height: 320px;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)