<template>
  <div>
    <div id="bottomLeftLine" style="width: 11rem;height: 3rem;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require('echarts')
export default {
  data() {
    return {
      chart: null
    };
  },
  mixins: [echartMixins],
  mounted() {},
  methods: {
    draw(echartData) {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("bottomLeftLine"));
      let xAxisData = echartData.map(v => v.monthTime)
      let yAxisData1 = echartData.map(v => v.inCount)
      let yAxisData2 = echartData.map(v => v.outCount)
      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
      }
      let color = [
        "#00CED1",
        "#0179b6",
        "#284527",
        "#2a770d",
        "#ebe8b1",
        "#dde5cb",
      ]
      let option = {
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            let html = ''
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
              <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
              ${v.name} - ${v.seriesName}
              <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
              件`
            })
            return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              shadowColor: 'rgba(225,225,225,1)',
              shadowBlur: 5
            }
          }
        },
        color: color,
        legend: {
          textStyle: {
            color: '#fff'  
          }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',  //更改坐标轴文字颜色
              fontSize : 16      //更改坐标轴文字大小
            }
          },
          axisLine:{
            lineStyle: {
              color:'#fff' //更改坐标轴颜色
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { show: false },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',  //更改坐标轴文字颜色
              fontSize : 16      //更改坐标轴文字大小
            }
          },
          axisLine:{
            lineStyle: {
              color:'#fff' //更改坐标轴颜色
            }
          }
        },
        series: [
          {
            name: "入库",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              color: "#00CED1",
              shadowBlur: 3,
              shadowColor: hexToRgba("#00CED1", 0.9),
              shadowOffsetY: 8
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                    offset: 0,
                    color: hexToRgba(color[0], 0.8)
                    },
                    {
                    offset: 1,
                    color: hexToRgba(color[0], 0.3)
                    }
                ],
                false
                ),
                shadowColor: hexToRgba(color[0], 0.9),
                shadowBlur: 10
            },
            data: yAxisData1
          },
          {
            name: "出库",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              color: "#0179b6",
              shadowBlur: 3,
              shadowColor: hexToRgba("#0179b6", 0.5),
              shadowOffsetY: 8
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                    offset: 0,
                    color: hexToRgba(color[1], 0.8)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[1], 0.4)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(color[1], 0.1),
              shadowBlur: 10
            },
            data: yAxisData2
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>