xChart demo -- heatmap

//构建数据
    let creatives=['创意A创意A创意A创意A','创意B创意B创意B创意B创意B','创意C','创意D','创意E','创意F'];
    let targets=['定向一定向一定向一定向一定向一定向一','定向二','定向三','定向四','定向五','定向六','定向七','定向八','定向九','定向十','定向十一'];
    let resources=['PC购物链路','淘好物活动','首页猜你喜欢','购中猜你喜欢','购后猜你喜欢'];             
    let  data=  [];

computeData();

//为空的色块填充f5f5f6试试看   
 var options = {
        coord : {
            type : "cube",
            xAxis : {
                field : "target",
                label:{
                    rotation:20,
                    maxLength:6
                 },
               
               // dataSection:targets   
            },
            yAxis :{
                   field : "creative",
                   label:{
                    //textAlign:"right",

//rotation:20,
                    //maxLength:4
                 },
                 //  dataSection:creatives
                },
            zAxis:{
                field : "resource", 
                label:{
                    //rotation:20,
                    //maxLength:6
                 },
                //dataSection:resources 
            },
            controls:{
                alpha: 5,    //绕X轴旋转
                beta: 5,      //绕Y轴旋转
                gamma: 0      //绕Z轴旋转
            }
          
        },
        graphs : [
            { 
                type : "heatmap",    
                field:'score',
                face:'front',          //绘制在box的那个面上 
                colorScheme: "#0A2A91",
                area:{
                    highColor:'#9254de'
                }   
            },
          { 
            type : "heatmap",   
            field:'score',
            face:'top',      
            colorScheme: "#910044",
            area:{
                highColor:'#5278f8'
            }   
            
        },
        { 
            type : "heatmap",     
            field:'score',
            face:'right',        
            colorScheme: "#33007A",
            area:{
                highColor:'#E05A99'
            }   
        }
    
        ],
        tips:{
            content(e){ 
             let str='<div style="padding:5px">'
              str+='<div><span style="color:#333">质量分:</span><span style="margin-left:5px">'+e.data.score+'</span></div>';
             str+='<div><span style="color:#333">创意:</span><span style="margin-left:5px">'+e.data.creative+'</span></div>';
             str+='<div><span style="color:#333">定向:</span><span style="margin-left:5px">'+e.data.target+'</span></div>';
             str+='<div><span style="color:#333">资源包:</span><span style="margin-left:5px">'+e.data.resource+'</span></div>';
             str+="</div>"
             return str;
            }
        },
        // legend:{
            //     mode:'radio',
            //     data:[{
            //         color:'#385ACC',
            //         name:'创意-定向',
            //         face:'front',
            //         enabled:true
            //     },{
            //         color:'#CC377C',
            //         name:'创意-资源包',
            //         face:'right',
            //         enabled:false
            //     },{
            //         color:'#FA7836',
            //         name:'资源包-定向',
            //         face:'top',
            //         enabled:false
            //     }]
            // }
          
    };

window.heatmap = Chartx3d.create("canvasTest" , data , options)

heatmap.getCoord().on('planeclick',(e)=>{
                alert(JSON.stringify(e.data.rowData));
            })

function resetData(){
               computeData();
               heatmap.resetData(data);
            }

魔方-热力图（bar chart）

联系人：@不决

创意-定向创意-资源包资源包-定向