<template>
  <div id="opera"></div>
</template>

<script>
  export default {
    name: "operational",
    data() {
      return {
        construction:{//管网数据
          Built:[100,10,121],//已建数据
        },
      }
    },
    methods:{
      setHistogram() {
        this.xc = this.$echarts.init(document.getElementById('opera'))
        this.xc.setOption({
          title: {
            text: '',
            subtext: '',
            x: 'left'
          },
          colors:['#6fd9d0','#f7cb32','#7395db'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
            position: function (p) {              //其中p为当前鼠标的位置
              return [p[0] + 10, p[1] - 10];
            },
            extraCssText: 'width:30%;height:50%;'
          },
          legend: {
            x: 'right',
            y: 'top',
            itemWidth:20,
            itemHeight:10,
            data:['门站总气量', '总供气量', '加气站'],
            textStyle: {
              color: '#6f8ba8'          // 图例文字颜色
            }
          },
          grid: {
            top: '18%',
            x: '3%',
            x2: '3%',
            width: '90%',
            height: '80%',
            containLabel: true,
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              axisTick: {
                interval: 0,
                length: '100px',
              },
              data: ['门站总气量', '总供气量', '加气站'],           //图分段的段名
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#6f8ba8'
                }
              }
            }
          ],
          yAxis: [
            {
              name: 'km',
              nameLocation:"end",
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#6f8ba8'
                }
              }
            }
          ],
          barCategoryGap:'2%',
          series: [
            {
              type: 'bar',
              // barGap: 0,
              barCategoryGap:'1%',
              barWidth:'20%',
              data: this.construction.Built,
              itemStyle:{ normal:{ color:'#6fd9d0' } },
            }
          ],
        }, true)
      },

    },
    ready(){
      this.setHistogram()
    }
  }

</script>

<style scoped>

</style>
