vue整合echarts，动态改变宽高

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>

下载链接(免费):https://download.csdn.net/download/qq_35134375/13008296