多个Echart表实现自适应

最新推荐文章于 2024-03-03 15:54:12 发布

my sweet heart

最新推荐文章于 2024-03-03 15:54:12 发布

阅读量456

点赞数

文章标签： vue echarts

本文链接：https://blog.csdn.net/qq_41552648/article/details/110403857

版权

本文探讨如何在Vue项目中让Echarts图表根据容器大小实现自适应布局，确保在不同设备和窗口尺寸下保持良好的显示效果。

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

Echart表实现自适应

<template>
  <div id="lineAndBarChart" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '220%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      chart: null,
      data1:
      datacity: 
    }
  },
  watch: {
    data1(newData, oldData){
      this.$nextTick(() => {
        this.initChart()
      })
    },
    datacity(newData, oldData){
      this.$nextTick(() => {
        this.initChart()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      this.getList()
    }