echarts简单复用组件

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

<script>
const echarts = require("echarts");

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "pie-chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    option: {
      type: Object,
      default:{
        tooltip: {
            trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
            backgroundColor: 'rgba(0, 10, 26, 0.8)',
            borderRadius: 8,  
            borderWidth: 0,
            shadowColor:'rgba(13, 148, 255, 0.8)',
            axisPointer: {// 坐标轴指示器，坐标轴触发有效
              type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
                color: '#fff'
            },
          },
      }
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    let myChart = echarts.init(this.$refs.echarts);
    this.myChart = myChart
      
    this.myChart.setOption(this.option,true);

    window.addEventListener("resize", () => {
            this.myChart.resize();
    });
  },
  // beforeDestroy() {
  //   if (!this.myChart) {
  //     return;
  //   }
  //   this.myChart.dispose();
  //   this.myChart = null;
  // },
  methods: {
    
  },
  watch: {
      option: function(newData, oldData) {
      this.myChart.clear()
      this.myChart.setOption(newData,true);
    },
  },
};
</script>

使用时引入组件,在计算属性中返回option配置，可以实现动态更新图表，组件中监听屏幕大小变化。如果有不对的地方，请指出

<Charts id="chart" :option="option"></Charts>

componted:{
    option(){
        return{
            tooltip: {
                position: 'top',
                formatter: function (params) {
                    // console.log(params);
                    let str = `${parseInt(params.name) - 1}点-${params.name}<br/>`;
                    str += `${params.marker}能耗： <b style='font-size:18px;'>${params.data[2]}</b><b style='font-size:14px;'> kWh</b>`;
                    
                    return str
                },
            },
            grid: {
                height: '85%',
                top: '0%',
                right:'4%',
                left:'2%'
            },
            xAxis: {
                type: 'category',
                data: [
                    '2点', '4点', '6点', '8点', '10点', '12点',
                    '14点', '16点', '18点', '20点', '22点', '24点',
                ],
                splitArea: {
                    show: true
                },
                axisLine:{
                    show:false
                },
                axisTick: {
                    show: false ,
                },
                boundarGap:true
            }, 
            yAxis: {
                type: 'category',
                data: [
                    '六', '五', '四',
                    '三', '二', '一', '日'
                ],
                splitArea: {
                    show: true
                },
                position:"right",
                axisLine:{
                    show:false,
                },
                axisTick: {
                    show: false ,
                },
            },
            visualMap: {
                min: 0,
                max: this.maxValue,
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '5%',
                show:false,
                inRange: {
                    color: ['#E6F8FF', '#0070D9'],
                    symbolSize: [30, 100]
                },
            },
            mytextStyle:{
                fontSize:30
            },
            series: [
                {
                    // name: 'Punch Card',
                    type: 'heatmap',
                    
                    data:this.currentFormatArr,
                    label: {
                        show: false
                    },
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    itemStyle:{
                        borderWidth:2,
                        borderColor:'#fff'
                    }
                }
            ]
        }
    }
}