<!--折线图 -->
<template>
  <div class="line-chart" ref="chartLine"></div>
</template>

<script>
export default {
  data() {
    return {
      turnObj: {
        u: "掉头",
        l: "左转",
        s: "直行",
        r: "右转",
      },
      dirObj: {
        "1": "北进口",
        "2": "东北进口",
        "3": "东进口",
        "4": "东南进口",
        "5": "南进口",
        "6": "西南进口",
        "7": "西进口",
        "8": "西北进口",
      },
    };
  },
  props: ["crossData"],
  mounted() {
    console.log(this.crossData);
    if (this.crossData) {
      this.initLineData(this.crossData);
    }
  },
  methods: {
    // getColor() {
    //   let randomRgb = [
    //     Math.round(Math.random() * 255),
    //     Math.round(Math.random() * 255),
    //     Math.round(Math.random() * 255),
    //   ];
    //   const lineColor = "rgb(" + randomRgb.join(",") + ")";
    //   const areaColor = "rgba(" + randomRgb.join(",") + ",0.4" + ")";
    //   const areaColor2 = "rgba(" + randomRgb.join(",") + ",0.4" + ")";
    //   return {
    //     lineColor,
    //     areaColor,
    //     areaColor2,
    //   };
    // },
    initLineData(data) {
      const seriesData = data.map((item) => {
        return {
          name: item.name,
          value: item.times,
        };
      });
      const xData1 = data.map((item) => item.name);
      const xData2 = data.map((item) => item.times);
      let myChart = this.$echarts.init(this.$refs.chartLine);
      let option = {
        color: "#FFC300",
        xAxis: {
          type: "value",
          data: [],
          axisLabel: {
            show: false,
            color: "#666",
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(153, 153, 153, 0.6)",
              type: "dashed",
            },
          },
          axisPointer: {
            snap: true,
          },
        },
        yAxis: [
          {
            type: "category",
            axisLabel: {
              show: true,
              // formatter: (params) => {
              //   console.log(params);
              //   return params;
              // },
              textStyle: {
                color: "#666",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#999",
              },
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: "#999",
              },
            },
            data: xData1,
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              formatter: function(params) {
                return params + "次";
              },
              textStyle: {
                color: "#666",
              },
            },
            data: xData2,
          },
        ],
        grid: {
          right: 50,
          bottom: 20,
          left: 130,
          top: 10,
        },
        series: [
          {
            data: seriesData,
            type: "bar",
            barMaxWidth: 20,
            // label: {
            //   show: true,
            //   position: "right",
            //   color: "#999",
            // },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(0, 0, 0, 0.1)",
            },
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.line-chart {
  height: 240px;
}
</style>
