不可下钻的矩形树图图表组件封装

前言

实现如下案例：

---

 

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

var dataname = [
    'aa',
    'bb',
    'cc',
    'dd',
    'ee',
    'ff',
    'gg',
    'hh',
];
var datvalue = [16.55, 13.61, 12.05, 11.19, 10.85, 9.73, 6.85, 6.85];
var colorList = ['#6998C4', '#69BBC4', '#93E3D6', '#86D76D', '#BFD76D','#D7B36D','#D78B6D','#CC98FF'];
var borderRadius = [[16, 0, 0, 0],[0,0,0,16],[0],[0],[0],[0,16,0,0],[0,0,16,0],[0]] 
// var colorList = [];
// for (var i = 0; i < dataname.length; i++) {
//     if (i <= 15) {
//         colorList[i] = color[i];
//     } else {
//         colorList[i] = color[i % 5];
//     }
// }

var data = [];
// var sum = 0;
// var datapercent = [];
// for (var i = 0; i < datvalue.length; i++) {
//         sum+= datvalue[i];
// }
for (var i = 0; i < dataname.length; i++) {
    data.push({
        value: datvalue[i],
        name: dataname[i],
        number:i+1,
        itemStyle: {
            color: colorList[i],
            // borderRadius:borderRadius[i]
        },
    });
}
// console.log(data);

option = {
    legend: {
        show: true,
        data: dataname,
        itemGap: 5,
        borderRadius: 5,
        symbolSize: 'auto',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'+'%',
    },
    series: [
        {
            type: 'treemap',
            width: '100%',
            height: '90%',
            nodeClick: "false",
            roam: false, //false是否开启拖拽漫游（移动和缩放）。
            breadcrumb: {
                show: false,
            },
            label: {
                normal: {
                    position:['50%', '30%'] ,
                    show: true,
                    width: 100,
                    overflow: "break",//truncate
                    ellipsis:'...',
                    align: "center",
                    // verticalAlign:"middle",
                    textStyle: {
                    color: "#FFFFFF", //label的字体颜色
                    fontSize: "16",
                    fontWeight: "400",
                    },
                    // formatter:'{b}:'+'/n'+ '{c}'
                    // formatter: function (param) {
                    //     console.log('param',param)
                    //     // var str ='';
                    //     // return str.concat(param.name + '\n\n' + '车辆数：' + param.percent.toFixed(0) + '\n\n' + param.value);
                    //     // return str.concat(param.name + '\n\n' + '车辆数：' + '\n\n' + param.value);
                    //     return (param.name + '\n\n' + param.value + '%' + '\n\n' + param.dataIndex
                    //     );
                    // },
                     formatter: function(param) { 
                        let name = param.name;
                        let value = param.value;
                        let number = param.dataIndex;
                           return  '{a|' + name + '}' + '\n\n' +'\n' +
                           '{b|' + value + '}' + '%' + '\n\n' 
                           +'{c|' + number + '}' 
                       
                    } , rich: {
                          a: {
                              color: '#FFFFFF',
                              fontSize:16, 
                            //   padding:[0,0,10,0]
                          },
                          b: {
                              color: 'rgba(255,255,255,0.5)',
                              fontSize:18, 
                              color: '#FFFFFF',
                              fontWeight: "600",
                          },
                          c: {
                              color: 'rgba(255,255,255,0.5)',
                              fontSize:28, 
                              align:'right',
                          },
                      } 
                },
               
            },
            itemStyle: {
                normal: {
                    show: true,
                    borderWidth: 1,
                    borderColor: '#fff',
                },
                emphasis: {
                    label: {
                        show: true,
                    },
                },
            },
            squareRatio :2.0,
            data: data,
        },
    ],
};

---

总结

不可下钻的矩形树图封装起来没什么难度，但是有一个问题一直没有找到方法，就是图表上的1,2,3,4...对数据排序的数字要求放置在所有方块的右下角，右边已实现，放在最下面还在找寻办法中，希望有大神指点。