<template>
  <div class="regionalEconomy">
    <div class="flex-box query-box">
      <div class="flex-box query-params">
        <span class="common-title">主要指标</span>
      </div>
      <div class="flex-box query-ability">
        <span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <div id="echarts"  style="height: 400px"></div>
      </div>
      <div class="content-right">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          border
          highlight-current-row
        >
          <el-table-column label="序号" width="60" align="left">
            <template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="产业类型" prop="type" width="200"></el-table-column>
          <el-table-column label="2022年">
            <el-table-column prop="je" label="金额（亿元）" sortable width="150"> </el-table-column>
            <el-table-column prop="zb" label="占比" sortable width="100"> </el-table-column>
          </el-table-column>
          <el-table-column label="2021年">
            <el-table-column prop="province" label="金额（亿元）" sortable width="150"> </el-table-column>
            <el-table-column prop="province" label="占比" sortable width="100"> </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
export default {
  name: 'industrialStructure',
  data() {
    return {
      tableData:[
        {
          type:'直接控股',
          je:'29,175.61',
          zb:'26%'
        }
      ],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 0,
      data:[
        {
          name: '房建工程',
          value: 11
        },
        {
          name: '市政工程',
          value: 22
        },
        {
          name: '公路工程',
          value: 33
        }
      ]
    }
  },
  created() {
    this.$nextTick(()=>{
      this.initChart()
    })
  },
  methods: {
    handleClick() {

    },
    initChart() {
      let myChart = echarts.init(document.getElementById("echarts"))
      let option ={
        label: {
          formatter: function (info) {
            var value = info.value
            var treePathInfo = info.treePathInfo
            var treePath = []
            for (var i = 1; i < treePathInfo.length; i++) {
              treePath.push(treePathInfo[i].name)
            }
            let arr=[treePath[0]]
            arr.push(value)
            return arr.join('\n');
          },
        },
        //鼠标悬停时显示的样式
        tooltip: {
          extraCssText:'width:100px!important;',
          formatter: function (params){
            var result = ''
            result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.name +'</p>'
            result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.value +'</p>'
            return result
          },
        },
        legend: {
          data: this.data,
        },
        series: [
          {
            type: 'treemap',
            data: this.data
          }
        ]
      }
      myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
  .regionalEconomy{
    width: 100%;
    background: #ffffff;
    padding: 16px;
    margin-top: 12px;
    border-radius: 4px;
    .el-form{
      margin-left: 24px;
      .el-form-item{
        margin: 0 !important;
        .form-content-width{
          width: 100px;
        }
      }
    }
    .content{
      margin-top: 22px;
      display: flex;
      justify-content: space-between;
      .content-left{
        width: 50%;
      }
    }
  }
</style>
