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

<script>
import * as echarts from 'echarts'
export default {
  name: 'ComBarChart', //项目统计柱状图
  mounted() {
    this.$nextTick(() => {
      this.initialChart()
    })
  },
  methods: {
    initialChart() {
      var charts = {
        // 按顺序排列从大到小
        cityList: ['项目名称', '38号点（2）', '15号点', '16号点', '24号点'],
        cityData: [7500, 6200, 5700, 4200, 3500]
      }
      var top10CityList = charts.cityList
      var top10CityData = charts.cityData
      let lineY = []
      for (var i = 0; i < charts.cityList.length; i++) {
        var x = i
        if (x > 1) {
          x = 2
        }
        var data = {
          name: charts.cityList[i],
          value: top10CityData[i],
          itemStyle: {
            show: true,
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: 'rgba(181, 60, 231, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(17, 156, 255, 1)'
                }
              ],
              false
            ),
            barBorderRadius: 7,
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
        lineY.push(data)
      }
      let option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          textStyle: {
            color: '#fff'
          },
          borderWidth: 0,
          backgroundColor: 'rgba(50,50,50,0.7)'
          // formatter: (p) => {
          //   if (p.seriesName === 'total') {
          //     return ''
          //   }
          //   return `${p.name}<br/>${p.value}`
          // }
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '5%',
          right: '20%',
          bottom: '3%'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false,
              inside: false
            },
            data: top10CityList
          },
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              inside: false,
              verticalAlign: 'middle',
              textStyle: {
                color: '#b3ccf8',
                fontSize: '14'
              },
              formatter: function (val) {
                return `${val}`
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: top10CityData
          }
        ],
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            // name: 'bar',
            type: 'bar',
            zlevel: 2,
            barWidth: '14px',
            data: lineY,
            label: {
              show: true,
              position: [0, '-24px'],
              formatter: function (a) {
                let region = '湖南'
                let str = ''

                if (a.dataIndex === 0) {
                  str = `{color0|${region}} {b|${a.name}}`
                } else if (a.dataIndex === 1) {
                  str = `{color1|${region}} {b|${a.name}}`
                } else if (a.dataIndex === 2) {
                  str = `{color2|${region}} {b|${a.name}}`
                } else {
                  str = `{color|${region}} {b|${a.name}}`
                }
                return str
              },
              rich: {
                b: {
                  color: 'rgba(130, 186, 226, 1)',
                  fontSize: 14
                },
                color0: {
                  width: 32,
                  height: 18,
                  color: '#fff',
                  align: 'center',
                  fontWeight: 400,
                  fontSize: 12,
                  backgroundColor: 'rgba(29, 130, 203, 1)'
                },
                color1: {
                  width: 32,
                  height: 18,
                  color: '#fff',
                  align: 'center',
                  fontWeight: 400,
                  fontSize: 12,
                  backgroundColor: 'rgba(4, 181, 206, 1)'
                },
                color2: {
                  width: 32,
                  height: 18,
                  color: '#fff',
                  align: 'center',
                  fontWeight: 400,
                  fontSize: 12,
                  backgroundColor: 'rgba(198, 164, 30, 1)'
                },
                color: {
                  width: 32,
                  height: 18,
                  color: '#fff',
                  align: 'center',
                  fontWeight: 400,
                  fontSize: 12,
                  backgroundColor: 'rgba(6, 174, 97, 1)'
                }
              }
            }
          }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      let myChart = echarts.init(ref) //this.$refs.chart
      myChart.setOption(option, { notMerge: true })
      var autoHeight = option.yAxis[1].data.length * 50 + 30
      myChart.getDom().style.height = autoHeight + 'px'
      myChart.getDom().childNodes[0].style.height = autoHeight + 'px'
      myChart.getDom().childNodes[0].childNodes[0].setAttribute('height', autoHeight)
      myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + 'px'
      myChart.resize()
      //图表大小自适应
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
}
</style>