Mall.vue

<template>
  <div class="live_item acea-row acea-column">
    <div class="ctit">
      <p class="tit">广场客流</p>
      <div class="line"></div>
    </div>
    <div class="live_chart">
      <div class="chart" :id="chartId"></div>
    </div>
  </div>
</template>
<script>
import { optionFormatter } from "@/utils/dealChart";
import echarts from "@/third-party/echart_lib";
export default {
  inject: ["addModule"],
  props: {
    mallId: Number,
  },
  data() {
    return {
      chartId: "chart_" + Math.random().toString(16).substr(2, 5),
    };
  },
  components: {},
  watch: {
    mallId: {
      handler(newVal) {
        if (newVal) {
          this.loadData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    initChart() {
      this.chart =
        echarts.getInstanceByDom(document.getElementById(this.chartId)) ||
        echarts.init(document.getElementById(this.chartId));
    },
    resizeChart() {
      this.chart.resize();
    },
    drawChart(options) {
      this.chart.setOption(options);
      window.addEventListener("resize", this.resizeChart);
    },
    dealData(datas) {
      const { xaxis, series } = datas;
      if (series.length == 0) {
        return this.chart.clear();
      }
      let options = {
        grid: {
          right: 0,
          bottom: 20,
        },
        tooltip: {
          trigger: "axis",
        },

        legend: {
          data: [
            series[0].name,
            series[1].name,
            { name: series[2].name, icon: "roundRect" },
          ],
          top: 8,
          right: 0,
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xaxis.data,
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4F575D",
              },
            },
            axisLabel: {
              show: true,
              color: "#fff",
              // interval: 0,
              // rotate: 40,
            },

            axisTick: {
              show: false,
              color: "#fff",
            },
          },
        ],
        yAxis: {
          axisLabel: {
            show: true,
            color: "#fff",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#4F575D",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: series[0].name,
            type: "line",
            barGap: "0%",
            barWidth: 10,
            itemStyle: {
              color: "#32C5FF",
            },
            data: series[0].data,
          },
          {
            name: series[1].name,
            barWidth: 10,
            itemStyle: {
              color: "#D39A00",
            },
            type: "line",
            data: series[1].data,
          },
          {
            name: series[2].name,
            type: "bar",
            itemStyle: {
              color: "#44D7B6",
            },
            data: series[2].data,
          },
        ],
      };
      this.drawChart(options);
    },
    loadData() {
      let dateStr = dateUnit.dateFormat(new Date(), "yyyy-MM-dd");
      // let params = {
      //   chartIds: 471,
      //   orgType: "mall",
      //   orgIds: this.mallId,
      //   dateType: "day",
      //   startDate: dateStr,
      //   endDate: dateStr,
      // };
      let params = {
        mallId: this.mallId,
        countDate: dateStr,
      };
      this.$api.bigScreen.getMallPassengerFlowChart(params).then((res) => {
        this.dealData(res.data.data);
      });
    },
  },
  created() {
    this.addModule(this);
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style lang="less" scoped>
</style>