<template>
  <div align="center">
    <div class="text-profit1">利润总额&nbsp;&nbsp;<span>165255万</span>
    </div>
    <div class="text-profit2">
      <span class="title-1">营业收入</span>
      <div class="text-1">
        <div id="textprofit" style="text-align: left"></div>

      </div>
      <img class="img-bottom" src="../../../../static/NewManageHome/3.gif" />
    </div>

  </div>
</template>

<script>
  export default {
    name: "TextProfit",
    props: {
      listenheight: String,
    },
    data() {
      return {
        xc: '',
        construction: {//建设数据
          Built: [200, 100, 60,111],//已建数据
          rebuilt: [20, 15, 40,60],//在建数据
          approved: [180, 85, 20,51],//审批数据
        },
        timer:'',
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('textprofit'))
        var scale=this.$parent.$parent.scale
        this.xc.setOption({
          title: {
            text: '',
            subtext: '',
            x: 'left'
          },
          colors: ['#6fd9d0', '#f7cb32', '#7395db'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle:{
                color:'#2c4257',
                opacity:0.3
              }
            },
            padding:10*scale,
            show: true,
            alwaysShowContent:true,
            backgroundColor:'#01396d',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth:0,
            hideDelay:100,

            triggerOn:'mousemove',
            enterable:true,
              textStyle:{
                  fontSize:16*scale
              },
            formatter: function (params) {
              if (params[0].axisValue == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                  result +="<span style=\"text-align: left;font-weight: normal\">"+  item.marker + " " + item.seriesName + "&nbsp;&nbsp;  <span style=\"color:#e1e52a;font-weight: bolder\">" +  item.value + "</span></span></br>";
              });
              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '</div><br/>' + result
            },
            position: function(point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              var x = point[0]; //
              var y = point[1];
              var viewWidth = size.viewSize[0];
              var viewHeight = size.viewSize[1];
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];
              var posX = 0; //x坐标位置
              var posY = 0; //y坐标位置
              if (x < boxWidth) { //左边放不开
                posX = 5;
              } else { //左边放的下
                posX = x - boxWidth;
              }

              if (y < boxHeight) { //上边放不开
                posY = 5;
              } else { //上边放得下
                posY = y - boxHeight;
              }
              posX=posX-20
              return [posX, posY];
            },
            extraCssText:'width: auto;height:auto;',
          },

          legend: {
            // icon: 'circle',
            // icon: 'diamond',
            y: 'top',
            right:'2%',
            itemGap: 20,
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            padding: [0, 25, 0, 0],
            data: ['收入', '支出', '利润'],
            textStyle: {
              fontSize: 14 * scale,
              color: '#95bad7'          // 图例文字颜色
            }
          },
          grid: {left: '5%', top: "20%",  right: "5%",bottom:'5%', containLabel: true},
          calculable: true,
          xAxis: [
            {
              type: 'category',

              axisLine: {
                show: true,
                lineStyle: {
                  color: '#004371'
                }
              },
              boundaryGap:true,
              axisTick: {
                interval: 0,
                length: '100px',
              },
              data: ['城燃', '汉投', '安康','商洛'],           //图分段的段名
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 14 * scale,
                  color: '#95bad7'
                }
              }
            }
          ],
          yAxis: [
            {
              name: '(千万/元)',
              nameLocation: "end",
              type: 'value',
              nameTextStyle: {
                fontSize: 14 * scale,
                padding: [50, 35 * scale, 0, 0],
                color: '#15dce2',
              },
              axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: '#08738e',
                  }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 14 * scale,
                  color: '#95bad7'
                }
              },
              axisTick: {show: false},
              splitLine: {
                show: true,
                lineStyle: {
                  type:'dashed',
                  color: '#004371',
                }
              },
            }
          ],
          barCategoryGap: '2%',
          series: [
            {
              name: '收入',
              type: 'bar',
              // barGap: 0,
              barCategoryGap: '1%',
              barWidth: '18%',
              data: this.construction.Built,
              hoverAnimation: false,
              label: {
                show: true,
                position: 'top',
                textStyle: { //数值样式
                  color: '#95bad7',
                  fontSize: 14 * scale
                }
              },
              itemStyle: {
                normal: {color: '#6fd9d0',},
              }
            },
            {
              name: '支出',
              type: 'bar',
              //  barGap: 0,
              barCategoryGap: '1%',
              barWidth: '18%',
              data: this.construction.rebuilt,
              hoverAnimation: false,
              label: {
                show: true,
                position: 'top',
                textStyle: { //数值样式
                  color: '#95bad7',
                  fontSize: 14 * scale
                }
              },
              itemStyle: {normal: {color: '#f7cb32'}},
            },
            {
              name: '利润',
              type: 'bar',
              //    barGap: 0,
              barCategoryGap: '1%',
              barWidth: '18%',
              data: this.construction.approved,
              hoverAnimation: false,
              label: {
                show: true,
                position: 'top',
                textStyle: { //数值样式
                  color: '#95bad7',
                  fontSize: 14 * scale
                }
              },
              itemStyle: {normal: {color: '#7393db'}},
            },
          ],
        }, true)

        let idx = -1;
        var oroptionmapjsonr_charts1=this.xc
        this.timer=setInterval(()=>{
          idx = (idx+ 1) % 4;
          oroptionmapjsonr_charts1.dispatchAction({
            type: 'showTip',
            seriesIndex: 1,
            dataIndex: idx
          });

        }, 3000)
      },
    },
    watch: {
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            // this.$parent.$parent.changeresize(this.xc)
          }
        },
      }
    },
    ready() {
      this.setBar()
    }
  }
</script>

<style scoped>
</style>
