数据产品之热力表格图开发详解

原型如图

常规显示

点击文字后显示弹框

经分析，表格左侧和底部标题都为维度，文章数量及对应文章标题为数值部分，所以需要两个维度，两个数值。为了容易控制，打算用div+table的方式来渲染该图。

html部分

  <div  ref="chart" :style="chartStyle" style="height: auto; padding: 10px 0;font-size:1rem"> 
    <ul class="legendbox"><li v-for="(legend,i) in legendList" :key="legend"><span :style="{background:legendColor[i%23]}"></span>{{legend}}</li></ul>
    <section class="hotbox" style="max-height:100%; overflow:auto;">
        <table class="hotTable" style="font-size:12px">
            <thead>
                <tr><th>{{legendTitle}}</th><th :colspan="hotData.hotFoot.length" align="center">{{hotData.hotTitle}}</th></tr>
            </thead>
            <tfoot>
                <tr>
                    <td>{{footTitle}}</td><td v-for="item in hotData.hotFoot" :key="item">{{item}}</td>
                </tr>
            </tfoot>
            <tbody>
                <tr v-for="(legend,i) in legendList" :key="legend">
                    <td :style="{borderColor:legendColor[i%23]}">{{legend}}</td>
                    <template  v-for="(col,index) in hotData.hotList[i]">
                      <td :key="index" :style="{borderColor:col.value == '-'?'transparent':legendColor[i%23], background:col.value == '-'? 'rgba(239,239,239,0.4)':toRGB(legendColor[i%23]).replace('rgb', 'rgba').replace(')', ',.4)'),cursor:col.value == '-'?'default':'pointer'}" 
                          :class="(col.category == hotActive.category && col.project == hotActive.project)?'yuansu-active':''"
                           :data-category="col.category"  :data-project="col.project"
                           @click="overShow(col.category,col.project)"
                          >
                            <div class="area" v-if="col.value != '-'"> {{col.value}}</div>   
                            <div class="hot-tooltip" v-if="col.value != '-'">
                                <div class="hot-tooltip-close" @click="outHide($event)"></div>
                                <div class="hot-tooltip-conbox">
                                    <div class="hot-tooltip-title">{{col.project}} {{col.category}}</div>
                                    <!-- <div class="hot-tooltip-content">{{col.name}}:{{col.value}}</div> -->
                                </div>
                                <ul class="hot-tooltip-tipbox" v-if="col.tips && col.tips.data">
                                    <li v-for="(tip,k) in col.tips.data" :key="tip.count">
                                        <a :href="tip.url" target="_blank">{{k+1}}.{{tip.title}}</a><span>{{tip.count}}</span>
                                    </li>
                                </ul>
                            </div>                    
                      </td>                          
                    </template>
                </tr>
            </tbody>
        </table>
    </section>
  </div>

css部分

.hotTable td,.hotTable th{min-width: 220px; height:60px; padding: 2px;}
.hotTable td{border-left: 2px solid; text-align: center; position: relative;}
.hotTable tfoot td{border-left: 2px solid transparent;}
.hot-tooltip{display:none; position: absolute;  bottom: 20px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 300px;
    padding: 8px 10px;
    line-height: 24px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 3px;
    text-align: center;
    font-style: normal;
    z-index: 999;
    .hot-tooltip-close{position: absolute;
        right: 10px;
        top: 10px;
        height: 16px;
        width: 16px;
        cursor: pointer;}
    .hot-tooltip-close::before{content: '';
        display: block;
        position: absolute;
        height: 1px;
        width: 100%;
        background: #fff;
        top: 50%;
        transform: rotate(45deg);}
    .hot-tooltip-close::after{
            content: '';
            display: block;
            position: absolute;
            height: 1px;
            width: 100%;
            background: #fff;
            top: 50%;
            transform: rotate(-45deg);
    }
    .hot-tooltip-conbox{display: flex; justify-content: space-around; border-bottom: 1px solid #8c8c8c;padding-bottom: 5px;
    .hot-tooltip-tipbox{margin-top:10px}
    .hot-tooltip-tipbox a:hover{text-decoration: underline;}
  }
.yuansu-active .hot-tooltip{display: block;}
//.hotTable td .area{width: 60px;}
.legendbox{width: 100%; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; overflow-y: auto; max-height: 40px;}
.legendbox li{font-size: 14px; height: 50px; line-height: 50px; padding-right: 10px;}
.legendbox li span{display: inline-block; width: 26px; height: 14px; border-radius: 3px; margin-right: 3px; vertical-align: middle;}

js部分

import {defaultColor,toRGB} from '@/utils/chart/base/color'
export default {
          data() {
              return {
                   hotData:{
                         hotTitle:'',
                         hotFoot:[],
                         hotList:[]
                   },
                   legendList:[],
                   legendTitle:'',
                   footTitle:'',
                   showActive:false,
                   hotActive:{category:'',project:''},
                   legendColor:[]
              }
        },
        mounted() {
           this.renderChart(this.data)
       },
       methods: {
            toRGB(color){
                return toRGB(color)
            },
        renderChart(data) {
            if (!this.$refs.chart) return
            if (data.length == 0) {
                if (!this.chart) {
                    return
                }      
            }
            let hotTitle = ''
            let hotList = []
            let hotFoot = []
            let seriesObj ={}
            let legendList = []  //左侧名称数组
            let tipsList = []  //有提示框的时候，提示框的数据
            const dimensions = this.schema.filter(schema => schema.asxAxis) //维度
            const dataSchema = this.schema.filter(schema => !schema.asxAxis) //数值
            this.legendTitle = (dimensions && dimensions.length>=2)?dimensions[1].detail.alias:''
            this.footTitle = (dimensions && dimensions.length>=1)?dimensions[0].detail.alias:''
            data.forEach((item, i) => {
                legendList.push(item[dimensions[1].name])
            })
            legendList = Array.from(new Set(legendList))
            dataSchema.forEach((schema, index) => {
                seriesObj[schema.name] = {
                    name: schema.label || schema.detail.alias,
                    term: schema.name,
                    projectList:[]}
            })
            
            data.forEach((item,index) =>{
              hotFoot.push(item[dimensions[0].name])
              hotList.push([])

              dataSchema.forEach((schema, i) => {
                legendList.forEach((lege, m) => {
                    var itlt = {
                        name:  schema.detail.alias,
                        project:lege,
                        category:  item[dimensions[0].name],
                        value: item[schema.name]
                    }
                    if(item[dimensions[1].name] == lege){
                        seriesObj[schema.name].projectList.push(itlt)
                    }                   
                    })
              })
      })
      let newHotList = Object.values(seriesObj);
      let newLegendList = []
      hotFoot = Array.from(new Set(hotFoot))
      let selectList = []
      if(this.dispose.barQuota == ''){
             hotTitle = newHotList[0].name;
             selectList = newHotList[0].projectList
      }else{
         newHotList.forEach((hot,i) => {
            if (this.dispose.barQuota !='' && hot.term == this.dispose.barQuota){
                hotTitle = hot.name;
                selectList = hot.projectList
            }
      })
      }
      if(this.dispose.chooseIndex){
        newHotList.forEach((hot,i) => {
            if (hot.term == this.dispose.chooseIndex){
                tipsList = hot.projectList
            }
        })        
      }
       legendList.forEach((lege, m) => {
           let newArr=[]
           selectList.forEach((item,n) => {               
                if(lege === item.project){
                    if(this.dispose.chooseIndex){
                        item['tips'] = JSON.parse(tipsList[n].value)
                    }
                   // console.log(item,'item')
                    newArr.push(item)
                }    
          })
            newLegendList.push(newArr) //首页将数据组装到newLegendList二维数组
        })
        
        let dataArr=[]
        let hotFoot1 = JSON.parse(JSON.stringify(hotFoot))
        newLegendList.forEach((item)=>{
           dataArr.push(hotFoot1)
        })

        let hotListArray = JSON.parse(JSON.stringify(dataArr))
        for(let i = 0; i< newLegendList.length;i++){   //使用两个for循环遍历矩阵
            for(let j = 0; j < hotFoot.length; j++){
             let flag = newLegendList[i].find((item) => {return item.category == hotFoot[j]})
             if(flag){
                 hotListArray[i][j] = { 
                     name:flag.name,
                     category: flag.category,   
                     project:flag.project,
                     value:flag.value,
                     tips:flag.tips? flag.tips:null
                     }
             }
             else{
                 hotListArray[i][j] = { 
                     name:newLegendList[i][0].name,
                     category: hotFoot[j],   
                     project:legendList[i],
                     value:'-'}
             }
            }
        }
      this.hotData.hotTitle = hotTitle
      this.hotData.hotFoot =  hotFoot
      this.hotData.hotList = hotListArray
      this.legendList =legendList
      this.legendColor = defaultColor
        },
        overShow(a,b){
            this.hotActive.category = a
            this.hotActive.project = b
        },
        outHide(e){
            let that = this;
            that.hotActive.category = '',
            that.hotActive.project = '',
            e.stopPropagation()
        },
    }
}