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

<script>
import uuidv1 from "uuid/v1";
var echarts = require("echarts");
export default {
  props: [],
  components: {},
  data() {
    return {
      line: uuidv1(),
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    init_line_charts() {
      let bgColor = "#fff";
      let color = [
        "#0090FF",
        "#36CE9E",
        "#FFC005",
        "#FF515A",
        "#8B5CFF",
        "#00CA69",
      ];
      let echartData = [
        {
          name: "1",
          value1: 100,
          value2: 233,
        },
        {
          name: "2",
          value1: 138,
          value2: 233,
        },
        {
          name: "3",
          value1: 350,
          value2: 200,
        },
        {
          name: "4",
          value1: 173,
          value2: 180,
        },
        {
          name: "5",
          value1: 180,
          value2: 199,
        },
        {
          name: "6",
          value1: 150,
          value2: 233,
        },
        {
          name: "7",
          value1: 180,
          value2: 210,
        },
        {
          name: "8",
          value1: 230,
          value2: 180,
        },
      ];

      let xAxisData = echartData.map((v) => v.name);
      //  ["1", "2", "3", "4", "5", "6", "7", "8"]
      let yAxisData1 = echartData.map((v) => v.value1);
      // [100, 138, 350, 173, 180, 150, 180, 230]
      let yAxisData2 = echartData.map((v) => v.value2);
      // [233, 233, 200, 180, 199, 233, 210, 180]
      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;
      };

      option = {
        backgroundColor: bgColor,
        color: color,
        legend: {
          //   show:false,//是否显示图例
          right: "center",
          bottom: 10,
          itemWidth: 10,
          itemHeight: 10,
          icon: "roundRect",
          orient: "horizontal",
          backgroundColor: "#f4f7fc",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#c3caf8",
              width: 2,
            },
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false, //是否从起点开始画
            axisLabel: {
              textStyle: {
                color: "#0d1847",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#D9D9D9",
              },
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["#fff", "#f8f9fd"],
              },
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#a9aec0",
                fontSize: 16,
              },
            },
            nameTextStyle: {
              color: "#666",
              fontSize: 12,
              lineHeight: 40,
            },
            splitLine: {
              lineStyle: {
                color: "#f2f2f2",
              },
            },
            axisLine: {
              // show: false,
              lineStyle: {
                color: "#e3e5ef",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "2018",
            type: "line",
            smooth: true,
            showSymbol: false,
            // symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 5,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 10,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1),
                    },
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10,
              },
            },
            emphasis: {
              itemStyle: {
                borderWidth: 4,
              },
            },
            data: yAxisData1,
          },
          {
            name: "2019",
            type: "line",
            smooth: true,
            showSymbol: false,
            // symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1],
                shadowBlur: 5,
                shadowColor: hexToRgba(color[1], 0.5),
                shadowOffsetY: 10,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[1], 0.3),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[1], 0.1),
                    },
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[1], 0.1),
                shadowBlur: 10,
              },
            },
            emphasis: {
              itemStyle: {
                borderWidth: 4,
              },
            },
            data: yAxisData2,
          },
        ],
      };
    },
  },
};
</script>

<style scoped></style>
