vue中echarts随窗体变化

<div id="myChart" :style="{ '100%', height: '345px'}"></div>

<script>
export default {

mounted(){
        this.drawLine();
    },
    methods: {
        drawLine(){
        var myChartContainer = document.getElementById('myChart');
//用于使chart自适应宽度,通过窗体宽计算容器高宽
var resizeMyChartContainer = function(){ myChartContainer.style.width=(document.body.clientWidth-75)+'px' }
//设置容器高宽 resizeMyChartContainer()
// 基于准备好的dom,初始化echarts实例 var myChart = this.$echarts.init(myChartContainer) // 绘制图表 myChart.setOption({ title: { text: '启动次数' }, tooltip: {}, xAxis: { type: 'category', data: ['2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21'] }, yAxis: { type:'value' }, series: [{ type: 'line', data: [0,0, 0, 7, 0, 0,12], smooth:true, symbol: 'circle', symbolSize: 6, itemStyle:{ normal:{ color:'#fc8a0f', lineStyle:{ color:'#ff9c35' } } } }], }); window.onresize=function(){ resizeMyChartContainer(); myChart.resize(); } } }
}
</script>
原文地址:https://www.cnblogs.com/colorful-paopao1/p/10443529.html