vue整合echarts，动态改变宽高

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

牛虻~

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

阅读量2.8k

点赞数 1

分类专栏： vue js 文章标签： vue

本文链接：https://blog.csdn.net/qq_35134375/article/details/109164031

版权

vue js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

npm引入

npm install echarts --save

main.js中添加

import echarts from “echarts”
Vue.prototype.$echarts = echarts

echarts.vue

<template>
  <div :style="{width: width, height: height}">
    <div ref="echart" style="width: 100%; height: 100%"></div>
  </div>

</template>

<script>
  export default {
    props: {
      option: {
        type: Object,
        default: {}
      }
    },
    name: "echart",
    data() {
      return {
        id: 'chart',
        myChart: null,
      }
    },
    methods: {
      resize() {
        this.myChart.resize();
      }
    },
    watch: {
      option: {
        deep: true,
        handler() {
          if (this.myChart) {
            this.$nextTick(() => this.resize())
            this.myChart.setOption(this.option, true);
          }
        }
      },
    },
    computed: {
      width() {
        return this.option.width1? this.option.width1 : '100%'
      },
      height() {
        return this.option.height1? this.option.height1 : '100%'
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.myChart = this.$echarts.init(this.$refs.echart, 'shine');
        this.myChart.setOption(this.option);
        this.myChart.on('click', (params) => {
          this.$emit('click', params)
        });
      })
      window.addEventListener("resize", () => {
        this.resize();
      })
    }
  }
</script>

<style scoped>

</style>