<template>
  <div class="network">
    <div class="label">建设</div>
    <div id="network"></div>
  </div>
</template>

<script>
  export default {
    name: "net-work",
    props: {
      listenheight: String,
    },
    data() {
      return {
        xc: '',
        construction: {//建设数据
          Built: [200, 100, 30],//已建数据
          rebuilt: [20, 15, 66],//在建数据
          approved: [70, 50, 121],//审批数据
        },
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('network'))
        var scale = 0.8
        this.xc.setOption({
          title: {
            text: '',
            subtext: '',
            x: 'left'
          },
          colors: ['#6fd9d0', '#f7cb32', '#7395db'],
          tooltip: {
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;',
            axisPointer: {type: 'line', lineStyle: {width: 0}}
          },

          legend: {
            icon: 'circle',
            x: 'right',
            y: 'top',
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            padding: [0, 25, 0, 0],
            data: ['已建', '在建', '审批'],
            textStyle: {
              fontSize: 14 * scale,
              color: '#ffffff'          // 图例文字颜色
            }
          },
          grid: {left: '2%', top: "15%", bottom: "5%", right: "5%", containLabel: true},
          calculable: true,
          xAxis: [
            {
              type: 'category',

              axisLine: {
                show: true,
                lineStyle: {
                  color: '#004371'
                }
              },
              axisTick: {
                interval: 0,
                length: '100px',
              },
              data: ['高压', '中压', '家庭'],           //图分段的段名
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 14 * scale,
                  color: '#ffffff'
                }
              }
            }
          ],
          yAxis: [
            {
              name: '(km)',
              nameLocation: "end",
              type: 'value',
              nameTextStyle: {
                fontSize: 14 * scale,
                padding: [-10 * scale, 35 * scale, 0, 0],
                color: '#15dce2',
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 14 * scale,
                  color: '#15dce2'
                }
              },
              axisTick: {show: false},
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: '#004371',
                }
              },
            }
          ],
          barCategoryGap: '2%',
          series: [
            {
              name: '已建',
              type: 'bar',
              // barGap: 0,
              barCategoryGap: '1%',
              barWidth: '20%',
              data: this.construction.Built,
              hoverAnimation: false,
              label: {
                show: true,
                position: 'top',
                textStyle: { //数值样式
                  color: '#fefefe',
                  fontSize: 14 * scale
                }
              },
              itemStyle: {
                normal: {color: '#6fd9d0',},
              }
            },
            {
              name: '在建',
              type: 'bar',
              //  barGap: 0,
              barCategoryGap: '1%',
              barWidth: '20%',
              data: this.construction.rebuilt,
              hoverAnimation: false,
              label: {
                show: true,
                position: 'top',
                textStyle: { //数值样式
                  color: '#fefefe',
                  fontSize: 14 * scale
                }
              },
              itemStyle: {normal: {color: '#f7cb32'}},
            },
            {
              name: '审批',
              type: 'bar',
              //    barGap: 0,
              barCategoryGap: '1%',
              barWidth: '20%',
              data: this.construction.approved,
              hoverAnimation: false,
              label: {
                show: true,
                position: 'top',
                textStyle: { //数值样式
                  color: '#fefefe',
                  fontSize: 14 * scale
                }
              },
              itemStyle: {normal: {color: '#7393db'}},
            },
          ],
        }, true)
      },
    },
    watch: {
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            // this.$parent.$parent.changeresize(this.xc)
          }
        },
      }
    },
    ready() {
      this.setBar()
    }
  }
</script>

<style scoped>
  .label {
    margin-left: 6%;
    font-size: 0.85em;
    float: left;
    color: #fff;
    height: 8%;
  }

  #network {
    height: 91%;
    width: 100%;
  }

</style>
