echarts折线图组件

---

一、安装依赖

npm install echarts --save

二、页面

子组件页面，通过props向id传值，this.$bus.$on会监听到父组件往query传递的值

<template>
  <div :id="id" style="width: 100%; height: 400px"></div>
</template>
<script>
import echarts from "echarts";

export default {
  props: {
    id: { type: String },
  },
  data() {
    return {};
  },
  mounted() {
    //收到父组件传递query时的回调方法，response为折线图数据
    this.$bus.$on("query", (response) => {
      this.queryData(response);
    });
  },
  methods: {
    queryData(response) {
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["报警数量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: response.data.dateList,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "报警数量",
            type: "line",
            stack: "总量",
            data: response.data.countList,
          },
        ],
      });
    },
  },
  created() {
    //初始化折线图
    this.$nextTick(() => {
      this.charts = echarts.init(document.getElementById(this.id));
    });
  },
  beforeDestroy() {
    // 销毁监听事件
    this.$bus.$off("query");
  },
};
</script>

父组件通过getChat方法向子组件传递数据

<template>
  <line-chart :id="chartId" />
</template>
<script>
import LineChart from "@/components/lineChart";
export default {
  components: {
    LineChart,
  },
  data() {
    return {
      chartId: "commercialMain",
    };
  },
  methods: {
    //查折线图
    getChat() {
      this.$nextTick(() => {
        this.$bus.$emit("query", 折线图数据);
      });
    },
  },
};
</script>

效果如下