<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'lineChart', //折线统计图
  props: {
    chartData: {}
  },
  data() {
    return { myChart: null }
  },
  watch: {
    chartData: {
      handler(n, o) {
        this.$nextTick(() => {
          this.initialChart()
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    initialChart() {
      this.destroyChart()
      const { month, profits, income, spending } = this.chartData
      let profitsData = profits
      let incomeData = income
      let spendingData = spending
      let option = {
        backgroundColor: 'transparent',
        grid: {
          left: '5%',
          right: '5%',
          top: '25%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },
          formatter: function (params) {
            //params[0].name表示x轴数据
            let str = params[0].name + '<br/>'
            //params是数组格式
            for (let item of params) {
              //设置浮层图形的样式跟随图中展示的颜色
              str +=
                "<span style='display:inline-block;width:10px;height:10px;border-radius:10px;background-color:" +
                (item.borderColor ? item.borderColor : item.color) +
                ";'></span>" +
                '\t' +
                item.seriesName +
                ' : ' +
                item.value +
                '<br/>'
            }
            return str
          },
          axisPointer: {
            lineStyle: {
              type: 'solid',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(126,199,255,0)' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(126,199,255,1)' // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(126,199,255,0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          backgroundColor: 'rgba(50,50,50,0.7)'
        },
        legend: {
          show: true,
          x: 'center',
          y: '5%',
          icon: 'inherit',
          itemWidth: 16,
          itemHeight: 10,
          textStyle: { color: '#82BAE2', fontSize: this.$listeners.fontSize(14) },
          data: [
            // { name: '收入', itemStyle: { color: 'black', borderColor: '#0092f6' } },
            // { name: '支出', itemStyle: { color: 'black', borderColor: '#CBB54C' } },
            // { name: '利润', itemStyle: { color: '#04BD88' } }
            { name: '累计对上结算', itemStyle: { color: 'black', borderColor: '#0092f6' } },
            { name: '累计对下结算', itemStyle: { color: 'black', borderColor: '#CBB54C' } }
          ]
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              color: 'rgba(130, 186, 226, 1)'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#397cbc'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#195384'
              }
            },
            data: month
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: 'rgba(130, 186, 226, 1)'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#11366e'
              }
            }
          }
        ],
        series: [
          {
            name: '累计对上结算',
            //  name: '收入',
            type: 'line',
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: 'rgba(13, 26, 43, 1)',
              borderColor: '#0092f6',
              borderWidth: 1
            },
            lineStyle: {
              color: '#0092f6',
              width: 2
            },
            data: incomeData
          },
          {
            name: '累计对下结算',
            //  name: '支出',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: 'rgba(13, 26, 43, 1)',
              borderColor: '#CBB54C',
              borderWidth: 1
            },
            lineStyle: {
              color: '#CBB54C',
              width: 2
            },
            data: spendingData
          }
          // {
          //   name: '利润',
          //   type: 'bar',
          //   barWidth: 14,
          //   itemStyle: {
          //     color: function (params) {
          //       if (params.data >= 0) {
          //         return '#05AD7E'
          //       } else {
          //         return '#E53031'
          //       }
          //     }
          //   },
          //   data: profitsData
          // }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      this.myChart = echarts.init(ref) //this.$refs.chart
      this.myChart.resize()
      this.myChart.setOption(option, {
        notMerge: true
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>