<template>
  <div id="barchart" style="height: 100%;width:100%">
  </div>
</template>

<script>
  export default {
    title: '收费',
    data() {
    },
    methods: {
      init() {
        var xData = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          yData1 = [7200, 7000, 6000, 2500, 2500, 5600, 7200, 7000, 6000, 2500, 2500, 5600],
          yData2 = [5200, 3000, 7000, 6000, 5600, 7000, 5200, 3000, 7000, 6000, 5600, 7000],
          yData3 = [5200, 3000, 4000, 6000, 5600, 7000, 5200, 3000, 3000, 2000, 5600, 7000],
          borderData = [],
          legend = ['民用', '非民用'],
          colorArr = [{
            start: 'rgba(242,153,97)',
            mid: 'rgba(242,153,97,0.7)',
            end: 'rgba(0, 0, 0,0.5)'
          },
            {
              end: 'rgba(0, 0, 0,0.5)',
              mid: 'rgba(111,217,208,0.7)',
              start: 'rgba(111,217,208)'
            },
            {
              color: '#00EAFF'
            }
          ]
        let normalColor = 'rgba(8,115,142)'
        let seriesData = []
        var borderHeight = 4
        xData.forEach(element => {
          borderData.push(borderHeight)
        });
        [yData1, yData2].forEach((item, index) => {
          var obj1 = {}
          obj1 = {
            name: legend[index],
            type: 'bar',
            stack: legend[index],
            data: item,
            barWidth: '15%',
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 30, 30],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: colorArr[index].start
                  },
                  {
                    offset: 0.7,
                    color: colorArr[index].mid
                  },
                  {
                    offset: 1,
                    color: colorArr[index].end
                  }
                  ],
                  globalCoord: false
                }
              }
            }
          }
          seriesData.push(obj1)
        })
        console.log(seriesData)
        // 更改柱状图位置
        let option = {
          backgroundColor: '#ffffff00',
          grid: {
            left: '2%',
            top: '20%',
            right: '10%',
            bottom: '2%',
            containLabel: true
          },
          legend: {
            show: true,
            icon: 'rect',
            itemWidth: 30,
            itemHeight: 20,
            right: '10%',
            top: '5%',
            textStyle: {
              color: '#fff'
            },
            data: legend
          },
          tooltip: {
            position: function (pos, params, dom, rect, size) {
              let yPos = '20%'
              let xPos = 0
              if (pos[0] < size.viewSize[0] / 2) {
                xPos = pos[0] + 10
              } else {
                xPos = pos[0] - dom.offsetWidth - 10
              }
              return [xPos, yPos]
            },
            trigger: 'axis',
            extraCssText: 'width:15%;height:30%;',
            formatter: function (params) {
              var str = ''
              for (var i = 0; i < params.length; i++) {
                if (params[i].seriesName !== '') {
                  str += `<span>${params[i].name}月:${params[i].seriesName}</span><span style="color:gold">${params[i].value}</span> <br />`
                }
              }
              return str
            }
          },
          xAxis: [{
            name: '月份',
            type: 'category',
            data: xData,
            interval: 0,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              textStyle: {
                color: normalColor,
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: normalColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }],
          yAxis: [{
            type: 'value',
            nameTextStyle: {
              color: normalColor,
              fontSize: 12
            },
            // 'min': 0,
            // 'max': 50,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: normalColor,
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: normalColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: normalColor
              }
            }
          }],
          series: seriesData
        }
        console.log(option)
        let barchart = this.$echarts.init(document.getElementById('barchart'))
        console.log(option)
        barchart.setOption(option)
        var index = 0
        var mTime = setInterval(function () {
          barchart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index
          })
          index++
          if (index > xData.length) {
            index = 0
          }
        }, 1000)
      }
    },
    ready() {
      this.init()
    },
    props: {}
  }
</script>
<style scoped>
  /*div{*/
  /*height: auto;*/
  /*}*/
</style>

