<template>
  <div :id="line" class="dashboard"></div>
</template>

<script>
import uuidv1 from "uuid/v1";
var echarts = require("echarts");
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          xAxisData: [],
          seriesData: [
            {
              name: "",
              data: []
            },
            {
              name: "",
              data: []
            }
          ]
        };
      }
    },
    targetValue: {
      type: Number,
      default: () => 0
    }
  },
  components: {},
  data() {
    return {
      line: uuidv1()
    };
  },
  watch: {
    data() {
      this.init_line_charts(this.data.xAxisData, this.data.seriesData);
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.init_line_charts(this.data.xAxisData, this.data.seriesData);
  },
  methods: {
    init_line_charts(xAxisData, yarr) {
      let bgColor = "#fff";
      let color = [
        "#0090FF",
        "#36CE9E",
        "#FFC005",
        "#FF515A",
        "#8B5CFF",
        "#00CA69"
      ];
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      };

      var series = [];
      yarr.forEach((e, idx) => {
        series.push({
          name: e.name,
          type: "line",
          smooth: true,
          showSymbol: false,
          // symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[idx],
              shadowBlur: 5,
              shadowColor: hexToRgba(color[idx], 0.5),
              shadowOffsetY: 10
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color[idx], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[idx], 0.1)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(color[idx], 0.1),
              shadowBlur: 10
            }
          },
          emphasis: {
            itemStyle: {
              borderWidth: 5
            }
          },
          data: e.data
        });
      });

      var option = {
        backgroundColor: bgColor,
        color: color,
        legend: {
          //   show:false,//是否显示图例
          right: "center",
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          icon: "roundRect",
          orient: "horizontal",
          backgroundColor: "#f4f7fc"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#c3caf8",
              width: 2
            }
          }
        },
        grid: {
          top: 10,
          left: 15,
          right: 30,
          bottom: 30,
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false, //是否从起点开始画
            axisLabel: {
              textStyle: {
                color: "#0d1847"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#D9D9D9"
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["#fff", "#f8f9fd"],
                opacity: 0.5
              },
              interval: 0
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#a9aec0",
                fontSize: 16
              }
            },
            nameTextStyle: {
              color: "#666",
              fontSize: 12,
              lineHeight: 40
            },
            splitLine: {
              lineStyle: {
                color: "#f2f2f2"
              }
            },
            minInterval: 1,
            axisLine: {
              // show: false,
              lineStyle: {
                color: "#e3e5ef"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: series
      };
      window[this.line] = echarts.init(document.getElementById(this.line));
      window[this.line].setOption(option, true);
    }
  }
};
</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100%;
}
</style>
