vue中使用echarts图表自适应的解决方案

最新推荐文章于 2024-08-01 10:00:37 发布

李長庚

最新推荐文章于 2024-08-01 10:00:37 发布

阅读量414

点赞数

分类专栏： vue 文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/xybhua/article/details/128508300

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中使用ECharts实现图表的自适应。首先在main.js中全局引入并挂载ECharts，然后在组件模板中设置图表容器宽度为100%，在mounted生命周期钩子中监听窗口resize事件，调用ECharts的resize方法实现自适应。提供了两种兼容性写法以应对不同浏览器。

摘要由CSDN通过智能技术生成

#vue echarts 图标自适应方法及案列：

案列：

1.正文配置

npm 导入eachart，并在main.js配置。把echarts挂载在 prototype上方便页面调用

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

2.页面使用

为了实现自适应，所以在行内样式的width设置为100%。

<template>
    <div>
        <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
    </div>
</template>
 
js部分：
<script>
    export default {
        data() {
            return { }
        },
        mounted() {
            this.drawLine();
            //实现自适应部分
            window.addEventListener('resize',()=>{
                this.$echarts.init(document.getElementById('myChart')).resize()
            })
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '雨量流量关系图',
                        x: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    }]
                });
            }
        }
    }
</script>

3.实现自适应的主要代码：

3.实现自适应的主要代码：
    注意： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持。但是vue框架下不用考虑这些，因为vue ~ 本身也不支持ie8啊以下~~~
    window.addEventListener('resize',()=>{
            this.$echarts.init(document.getElementById('myChart')).resize()
    })
    兼容性写法一：
    //注意使用es6的箭头函数，不然this的指向会改变
    window.onresize = () => {
            this.$echarts.init(document.getElementById('myChart')).resize();
    }
    兼容性写法二：
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    window.onresize = function(){
            myChart .resize();
    }