Vue——封装echarts

components/echarts

<template>
  <div
    :id="id"
    :style="{
   
      width: 'chartWidth',
      height: '100%',
      backgroundImage:
        'url(' +
        (empty
          ? require('empty.png')    //当option中没有数据时显示的背景图片（暂无数据）
          : require('1.png')) +     //当option中存在数据时显示的背景图片（透明，或者白色背景）
        ')',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundSize: 'contain'
    }"
  ></div>//动态设置echarts的背景图片
</template>
<script>
export default {
   
  props: ["id", "option",'chartWidth'],
  data() {
   
    return {
   
      myChart: {
   }
    };
  },
 /* created() {
    this.$nextTick(() => {
      this.loadEchart();
    });
  },*/
  mounted() {
   
    var chart = document.getElementById(this.id);
    chart.style.width =
      ((window.innerWidth - 280) *
        this.chartWidth.slice(0, this.chartWidth.length - 1)) /
        100 +
      'px';
    if (Object.keys(this.