<!-- 单折线图,带背景色 -->
<template>
  <div class="lineChart" @touchmove.stop>
    <div class="chart-box" ref="myChart"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { sizeScale } from "@/utils/mUtils";

import {
  ref,
  watch,
  nextTick,
  reactive,
  onMounted,
} from "vue";
export default {
  name: "lineChart",
  props: {
    //数据格式[{name:'x轴',value:'y轴'}]
    lineList: {
      required: true,
      type: Array,
    },
    title: {
      required: false,
      type: String,
    },
    legendData: {
      required: false,
      type: String,
      default: "票量",
    },
    unit: { type: String, default: "W" },
    subtext: {
      type: String,
    },
    chartTime: {
      type: Number,
    },
  },
  setup(props) {
    var lineChart = ref();
    var xAxisData = reactive([]);
    var yAxisData = reactive([]);
    const myChart = ref(null);
    onMounted(() => {
      // let ctx = getCurrentInstance();
      // let echarts = ctx.appContext.config.globalProperties.$echarts;
      console.log(echarts);
      lineChart = echarts.init(myChart.value);
      nextTick(() => {
        drawLine(lineChart, props.lineList);
      });
    });
    watch(
      () => props.lineList,
      (val) => {
        nextTick(() => {
          drawLine(lineChart, val);
        });
      }
    );
    const drawLine = (lineChart, lineList) => {
      xAxisData = lineList.map((v) => v.name);
      yAxisData = lineList.map((v) => v.value);
      let sizeArr = new Array(yAxisData.length).fill(5);
      sizeArr[yAxisData.length - 1] = 7;
      window.onresize = function () {
        lineChart.resize();
      };
      const option = {
        title: {
          subtext: props.subtext ? props.subtext : "",
          left: "2%",
          top: "-1%",
          subtextStyle: {
            fontSize: 14,
            color: "#3c3c3c",
          },
        },
        color: ["#E60012", "#426DFF", "#FFA53F"],
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {
              show: true,
            },
          },
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            let data = params[0];
            let date = data.name;
            let dom = "";
            dom = `<div>${date}</div><div>${props.legendData}：${data.value}${props.unit}</div>`;
            return dom;
          },
          backgroundColor: "rgba(0,0,0,0.65)",
          borderWidth: 0,
          padding: [2, 8],
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          confine: true, //容器内显示
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              // 直线指示器样式设置
              color: "#E6262C",
              type: "dashed",
            },
            width: 2,
          },
        },
        xAxis: {
          type: "category",
          axisTick: { show: true }, //x坐标轴刻线
          axisLabel: {
            show: true,
            // interval: 0,
            color: "#999999",
            fontSize: 10,
          },
          boundaryGap: false,
          splitLine: { show: false }, //网格线
          axisLine: {
            lineStyle: {
              color: "#e4e4e4",
            },
          },
          data: xAxisData,
        },
        yAxis: {
          // name: props.unit ? `(${props.unit})` : "",
          name: "",
          show: yAxisData.length ? true : false,
          nameTextStyle: {
            color: "#A0A4AA",
            padding: [0, 30, 0, 0],
          },
          type: "value",
          axisTick: { show: false }, //y坐标轴刻线
          axisLabel: {
            color: "#A0A4AA",
            fontSize: sizeScale(0.5),
            formatter(v) {
              v = v.toString();
              return `${v}${props.unit}`;
            },
          },
          min: 0,
          // scale: true,
          splitNumber: 4,
          axisLine: {
            lineStyle: {
              color: "#eee",
            },
          },
          splitLine: {
            show: true, //网格线
            lineStyle: {
              color: ["#eee"],
              width: 1,
              type: "dashed",
            },
          },
        },
        grid: {
          left: "4%",
          right: "8%",
          bottom: "8%",
          top: props.subtext ? "18%" : "10%",
          containLabel: true,
        },
        series: [
          {
            type: "line",
            smooth: true,
            emphasis: {
              itemStyle: {
                // 设置鼠标放在图上的圆点
                color: "#E6262C",
                borderWidth: 1,
                position: "center",
              },
            },
            symbolSize: (rawValue, params) => {
              if (props.chartTime !== 2) {
                params.symbolSize = sizeArr[params.dataIndex];
                return params.symbolSize;
              } else {
                return 5;
              }
            },
            label: {
              show: yAxisData.length < 8 ? true : false,
              fontSize: 10,
              color: "#E6262C",
              formatter(v) {
                if (props.unit == "%") {
                  if (v.dataIndex === yAxisData.length - 1) {
                    return "{a|" + `${v.value}${props.unit}` + "}";
                  } else {
                    return "{b|" + `${v.value}${props.unit}` + "}";
                  }
                } else {
                  if (v.dataIndex === yAxisData.length - 1) {
                    return "{a|" + v.value + "}";
                  } else {
                    return "{b|" + v.value + "}";
                  }
                }
              },
              rich: {
                a: {
                  fontSize: 12,
                  fontWeight: "bold",
                },
                b: {
                  fontSize: 10,
                },
              },
            },
            lineStyle: {
              width: 2,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#E6262C", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#E6262C", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: yAxisData,
          },
        ],
      };
      // 设置实例参数
      lineChart.setOption(option, true);
    };
    return { myChart };
  },
};
</script>
<style lang="less">
.lineChart {
  background: #fff;

  .chart-box {
    height: 240px;
  }
}
</style>
