首页 > 其他分享 >vue中echarts图表自适应

vue中echarts图表自适应

时间:2022-12-30 16:55:42浏览次数:42  
标签:resz vue myCharts 图表 window echarts resize

<template>
    <div id="app">

    </div>
</template>

<script>
export default {
    data () {
        return {
            myCharts: null
        }
    },
    created () {
        this.myCharts = echarts.init(document.getElementById('#app'))
    },
    methods: {
        // 定义一个resz的方法
        resz () {
            //echarts的实例中提供一个resize(),可以使用浏览器宽度改变的时候做出自适应
            this.myCharts.resize()
        }
    },
    mounted () {
        window.addEventListener('resize', this.resz)
    },
    // 销毁组件之前要进行删除这个事件监听 
    beforeDestroy () {
        window.removeEventListener('resize', this.resz)
    }
}
</script>

<style lang="scss" scoped>
</style>

 

标签:resz,vue,myCharts,图表,window,echarts,resize
From: https://www.cnblogs.com/chen-cheng/p/17015278.html

相关文章

  • vue 中图片上传
    <template><div><h1>展示的内容:{{meg}}</h1><inputtype="text"v-model="inputValue"@keyup.enter="fn"/><hr/><imgwidth="200":src="img......
  • 自用对比vue2的vue3+vite 测试笔记
    目录基础对比研究子组件父组件scriptsetup极简父传子子传父父组件子组件基础对比研究子组件<scriptsetup>import{reactive,ref,computed,watch,watchEffect,o......
  • vue保留小数点后两位
    //保留小数点后两位,四舍五入numFilter(value){letrealVal=parseFloat(value).toFixed(2);returnrealVal;},//保留小数点后两位,不四舍五入numFilter(va......
  • vue3的shallowRef()和shallowReactive()
    1.shallowReactive():使用shallowReactive转化的对象只有对象的第一层级有响应式。   2.shallowRef():使用shallowRef转化的基本数据类型和使用ref没有差别,使用shallo......
  • 【新闻推荐系统】(task4)Vue基础与实战(更新ing)
    学习总结文章目录​​学习总结​​​​二、Vue简介​​​​2.1安装​​​​2.1.1通过<script>标签引入​​​​2.1.2通过CDN安装​​​​2.1.3通过NPM安装​​​​2.2......
  • vue 批量大文件上传下载
    ​ 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。这次项目的需求:支持大文件的上传和续传,要求续传支持......
  • C# Excel 生成图表,添加趋势线、误差线
    Excel图表能够将数据可视化,在图表中另行添加趋势线和误差线,可对数据进行进一步的数据分析和统计的可视化处理。Excel中的趋势线可用于趋势预测/回归分析,共6中类型:指数(X),线性(L......
  • vue elementui 表格内容不能自适应填充
    问题现象:   解决方式:<el-table-columnlabel="合同标题"align="center"prop="conTitle"/><el-table-columnlabel="合同内容"align="center"prop="conCont......
  • echartsX轴时间轴固定显示0-24小时
    时间格式化使用moment.js,按需求添加,如不需要请手动格式化至相应格式npminstallmoment--save获取当天起始时间moment().startOf('day').format('YYYY-MM-DDHH......
  • Zabbix与乐维监控对比分析(六)——图形图表篇
    前面我们详细介绍了乐维监控与Zabbix的架构与性能、Agent管理、自动发现、权限管理、对象管理、告警管理、可视化的对比分析,相信大家对二者的对比分析有了更加深入的了解,接......