<template>
  <!--  柱状图按降序排列，写了假数据，可复制直接跑-->
  <div>
    <div class="e-title">
    <div
      id="nationwideProvince"
      style="width:100%;height:295px"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      title: '',
      dataItem: [
        {
          key: '67af22b8682d43848043224d1cb6f5fb',
          label: '全国',
          total: 95,
          built: 92,
          children: [
            {
              key: '07daca2b7e77412ca2ec0a47c6a46ddb',
              label: '555',
              total: 95,
              built: 92,
            },
          ],
        },
        {
          key: 'be4daeaa5fa047c797db10cedb951c2b',
          label: '省份1',
          total: 95,
          built: 92,
          children: [
            {
              key: '53faa5e237b14753adaad7cda84d08e9',
              label: '广西',
              total: 95,
              built: 92,
              children: [
                {
                  key: 'f46227055d874079a43405310e78932e',
                  label: '444',
                  total: 95,
                  built: 92,
                },
              ],
            },
            {
              key: '53faa5e237b14753adaad7cda84d03e9',
              label: '广东',
              total: 95,
              built: 92,
              children: [
                {
                  key: 'f46227055d874079a43405310e78933e',
                  label: '县城',
                  total: 95,
                  built: 92,
                },
              ],
            },
          ],
        },
        {
          key: 'be4daeaa5fa047c797db10cedb952c2b',
          label: '省份2',
          total: 95,
          built: 92
          children: [
            {
              key: '53faa5e237b14754adaad7cda84d08e9',
              label: '北京',
              total: 95,
              built: 92
              children: [
                {
                  key: 'f56227055d874079a43405310e78932e',
                  label: '3333',
                  total: 95,
                  built: 92
                },
              ],
            },
            {
              key: '54faa5e237b14753adaad7cda84d03e9',
              label: '山东',
              total: 95,
              built: 92
              children: [
                {
                  key: 'f56227055d874079a43405310e78933e',
                  label: '2222',
                  total: 95,
                  built: 92
                },
              ],
            },
            {
              key: '54faa5e237b14853adaad7cda84d03e9',
              label: '河南',
              total: 95,
              built: 92
              children: [
                {
                  key: 'f56227055d874179a43405310e78933e',
                  label: '1111',
                  total: 95,
                  built: 92
                },
              ],
            },
          ],
        },
      ],
      legendData: {
        data: ['1', '2'],
      },
      xAxis: [],
      seriesData: [
        {
          name: '1',
          type: 'bar',
          stack: '数据',
          barWidth: 30,
          emphasis: { focus: 'series' },
          data: [0, 0],
        },
        {
          name: '2',
          type: 'bar',
          stack: '数据',
          barWidth: 30,
          emphasis: { focus: 'series' },
          data: [0, 0],
        },
      ],
    }
  },
  methods: {
    getNationwideProvince(title) {
      this.title = title
      this.xAxis = []
      this.seriesData = [
        {
          name: '其中符合价值标准的规模',
          type: 'bar',
          stack: '数据',
          barWidth: 30,
          emphasis: { focus: 'series' },
          data: [],
        },
        {
          name: '代建规模',
          type: 'bar',
          stack: '数据',
          barWidth: 30,
          emphasis: { focus: 'series' },
          data: [],
        },
      ]

      let da = []
      if (title === '全国') {
        da = this.dataItem.slice(1)
      } else {
        da = this.dataItem
      }
      //声明中间数组将需要进行排序的项加入到其中
      let tempArr = []
      for (let item of da) {
        for (let c of item.children) {
          let sum1 = c.total
          let sum2 = c.total
          //通过sum值的大小进行排序，首先将sum1/sum2加入到此对象中，作为后续排序的标准
          c.sum1 = sum1
          c.sum2 = sum2
          //添加完属性后，将此项添加进数组中
          tempArr.push(c)
        }
      }
      tempArr = this.bubbleSort(tempArr)
      console.log(tempArr)
      //将数据在排序好的数组中依次取出
      tempArr.forEach((item) => {
        this.xAxis.push(item.label)
        let index = this.xAxis.indexOf(item.label)
        this.seriesData[0].data[index] = item.sum1
        this.seriesData[1].data[index] = item.sum2
        // this.xAxis.push(item.label)
      })
      this.drawChart()
    },
    // 堆叠条形图
    drawChart() {
      let nationwideProvince = this.$echarts.init(
        document.getElementById('nationwideProvince')
      )

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
        },
        legend: this.legendData,
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxis,
          },
        ],
        yAxis: [{ type: 'value' }],
        series: this.seriesData,
        color: ['#5086eb', '#68bac3'],
      }
      // 页面自适应。
      nationwideProvince.setOption(option, true)
      window.addEventListener('resize', function () {
        nationwideProvince.resize()
      })
    },
    //冒泡排序算法
    bubbleSort(array) {
      let len = array.length
      //声明flag
      let exchange
      let result = array
      for (let i = 0; i < len; i++) {
        exchange = 0
        for (let j = len - 1; j > i; j--) {
          //通过比较sum1进行从小到大排序，如果有需要可以改为sum2，从而通过sum2从小到大排序
          if (result[j].sum1 < result[j - 1].sum1) {
            let tmp = result[j]
            result[j] = result[j - 1]
            result[j - 1] = tmp
            exchange = 1
          }
        }
        if (!exchange) return result
      }
      return result
    },
  },
  mounted() {
    this.getNationwideProvince()
    // this.drawChart();
  },
}
</script>

<style scoped>
.e-title {
  border-bottom: #eeeeee solid 1px;
  font-weight: bold;
  font-size: 16px;
  margin: 10px;
}
</style>