封装的Echarts组件

<template>
  <div class="echarts">
    <div style="width: 100%; height: 100%" :id="echarts" ref="echarts"></div>
  </div>
</template>

<script>
import "echarts/map/js/world";
export default {
  name: "echartscom",
  props: {
    options: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    drawCharts() {
      this.myChart = this.$echarts.init(document.getElementById(this.echarts));
      const other_options = {
        animation: false,
      };
      const all_options = Object.assign(other_options, this.options);
      this.myChart.setOption(this.options);
    },
  },
  computed: {
    echarts() {
      return "echarts" + Math.random() * 100000;
    },
  },
  mounted() {
    let self = this;
    self.$nextTick(() => {
      self.drawCharts();
    });
    window.addEventListener("resize", () => {
      self.myChart.resize();
    });
  },
  components: {},
  // watch: {
  //   //观察option的变化
  //   options: {
  //     handler(newVal, oldVal) {
  //       if (this.chart) {
  //         if (newVal) {
  //           this.chart.setOption(newVal);
  //         } else {
  //           this.chart.setOption(oldVal);
  //         }
  //       } else {
  //         this.drawCharts();
  //       }
  //     },
  //     deep: true, //对象内部属性的监听，关键。
  //   },
  // },
};
</script>

<style>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

　　

        <Eharts :options="options1" ref="charts1"></Eharts>

　　

  import Eharts from "@/components/echarts";
  import echarts from "echarts";

　　

        options1: {
          title: {
            text: "吞吐量日趋势图",
            textStyle: {
              color: "#fff",
              fontSize: 18,
              fontWeight: "normal",
            },
            left: "left",
            top: "top",
          },
          legend: {
            data: ["吞吐量（万吨）"],
            icon: "roundRect",
            right: 0,
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
            itemWidth: 14,
            itemHeight: 14,
          },
          grid: {
            left: 0,
            top: "25%",
            right: 0,
            bottom: 0,
            containLabel: true,
          },
          color: ["#2755B3"],
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#324570",
                width: "1",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
            data: [
              "10/18",
              "10/19",
              "10/20",
              "10/21",
              "10/22",
              "10/23",
              "10/24",
              "10/25",
              "10/26",
              "10/27",
              "10/28",
              "10/29",
              "10/30",
              "10/31",
              "11/01",
              "11/02",
              "11/03",
              "11/04",
              "11/05",
              "11/06",
              "11/07",
              "11/08",
              "11/09",
              "11/10",
              "11/11",
              "11/12",
              "11/13",
              "11/14",
              "11/15",
              "11/16",
              "11/17",
            ],
          },
          yAxis: {
            splitNumber: 3,
            axisLine: {
              lineStyle: {
                color: "#324570",
                width: "1",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#324570",
              },
            },
          },
          series: [{
            name: "吞吐量（万吨）",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#2F75F1",
              width: 2,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: "rgba(13, 174, 255, 0.8)",
                  },
                  {
                    offset: 1,
                    color: "rgba(13, 174, 255, 0)",
                  },
                ],
              },
            },
            data: [
              3.19,
              6.2,
              8.4,
              1.3,
              0.42,
              8.33,
              4.29,
              3.3,
              5,
              4.3,
              6,
              9.2,
              5.2,
              4,
              3,
              7.3,
              6.3,
              2.4,
              1.6,
              3.01,
              4.4,
              0.3,
              1.72,
              0.4,
              0.2,
              3.1,
              2.5,
              5.2,
              4.7,
              5.2,
              1.5,
            ],
          }, ],
          tooltip: {
            trigger: "axis",
            confine: true,
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
        },

　　

    this.options1.xAxis.data = dateList
            this.options1.series[0].data = sumThroughtList
            this.$refs.charts1.drawCharts();

　　搞定