<!--
 * @Author: your name
 * @Date: 2021-10-26 13:37:46
 * @LastEditTime: 2021-12-08 14:18:58
 * @LastEditors: Please set LastEditors
 * @Description: 销售分析图
 * @FilePath: \hyyfScreen\src\views\Production\board\ChartSales.vue
-->
<template>
  <div class="sales-chart">
    <div id="salesChart"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "ChartWater",
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    id: {
      type: String,
      default: () => "0",
    },
    data: {
      type: Object,
      default: () => {},
    },
    // dataValue: {
    //   type: Array,
    //   default: () => [100, 75, 120, 200, 110, 40, 60]
    // }
  },
  computed: {
    ...mapState(["color"]),
  },
  methods: {
    init() {
      let dataAxis = this.data.timeList;
      let start = dataAxis.length - 12;
      let end = dataAxis.length - 1;
      let quantityList = this.data.quantityList;
      let moneyListTooltip = this.data.moneyList1;
      let options = {
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            var res = "<div>" + params[0].name + "</div>"; // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
            const index = this.data.moneyList.findIndex(
              (item) => item === params[0].value
            );
            for (var i = 0; i < params.length; i++) {
              //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
              res +=
                `<div>
                  <span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
                    params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
                  ]};"></span>
                  ${moneyListTooltip[index]}元
                </div>` +
                `<div><span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
                  params[i].color,
                ]};"></span>${quantityList[index]}头</div>`;
            }
            return res;
          },
        },
        color: ["#289df5"],
        dataZoom: [
          {
            type: "inside",
            startValue: start,
            endValue: end,
            show: false,
            // zoomOnMouseWheel: false,
            // zoomLock: true,
          },
        ],
        grid: {
          x: 65,
          // left: 50,
          right: "10%",
          top: "20%",
          bottom: "15%",
          // bottom: '30%',
          // containLabel: true
        },
        // dataZoom: [
        //
        //   {
        //     type: 'slider',
        //     startValue: start,
        //     endValue:end,
        //     zoomOnMouseWheel: false,
        //     zoomLock: true,
        //   },
        //   {
        //     type: 'inside'
        //   },
        // ],
        xAxis: [
          {
            type: "category",
            data: dataAxis,
            boundaryGap: false,
            axisPointer: {
              type: "none",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgb(102,255,255)",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "元",
            axisLabel: {
              // formatter: "{value} 元",
              show: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgb(102,255,255)",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            // name: "销售",
            type: "line",
            // stack: 'Total',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              color: "#289df5",
              borderColor: "#289df5",
              normal: {
                label: {
                  show: false,
                  textStyle: {
                    fontSize: 14,
                  },
                },
                areaStyle: {
                  type: "default",
                  opacity: 0.2,
                },
              },
            },
            data: this.data.moneyList,
          },
        ],
      };
      this.myChart.setOption(options, true);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("salesChart"));
    this.init();
  },
  watch: {
    data: {
      handler(newValue) {
        console.log(newValue);
        this.init();
      },
      deep: true,
    },
    color(newVal) {
      if (newVal) {
        this.myChart.clear();
        this.init();
      }
    },
  },
};
</script>
<style scoped>
.sales-chart {
  width: 100%;
  height: 100%;
}
#salesChart {
  width: 100%;
  height: 100%;
}
</style>
