echarts玩轉圖表之矩形樹圖

前言

第一次用makedown編輯器寫文章，感覺像得到一件利器，排版美觀而且效率飆升。進入正題
Echart官網文檔地址
針對於矩形樹圖api配置項鏈接

1. 完全從數據定義圖形

$.get( "{% static 'json/rectTreeData.json' %}", function (obama_budget) {
    myChart.hideLoading();

//obama_budget數據裡面的參數可以決定option裡面需要用到的參數，可以直接在後端完整定義這個data，來自定義前端顯示的圖形形狀，pyecharts的實現應該也是這種思路，echarts的api介面不是對所有問題需求都是可以很好滿足的，幸好這裡圖形配置項定義可以直接在從原始數據中操作，前端自定義可以用下麵的方式
第一種

obama_budget[4]["itemStyle" ]= {    //
        color : '#0000ff',
        ...
    };

第二種

data.children[0].itemStyle = {
        color : '#0000ff',
        borderColor:'#0000ff'
        ...
    };

後端自定義每個方塊顏色可以這樣實現

   rectDictnode["name"]=node[0]
   rectDictnode["value"]=nodebuf
   rectDictnode["absName"]=filedir+node[0]
   color=gerColorOfWeight(node[1][0],node[1][3])
   color1="rgb("+str(color['red'])+','+str(color['green'])+','+str(color['blue'])+')'
   #print(color1)
   rectDictnode["itemStyle"]={"color":color1 } 

最終形成echarts中需要的格式就可以

 {
      value: [1212, 4943, 5453],
      absName:'root'
      name: 'description of this node',
      children: [...]
  },

2. 利用Api配置項定義圖表

一些常用配置項代碼中做註釋：

    function isValidNumber(num) {
        return num != null && isFinite(num);
    }
 myChart.setOption(option = {
        title: {
            left: 'left',    //標題顯示位置
            text: '缺陷分佈',    //主標題，副標題
            subtext: '缺陷密度=缺陷數量/代碼行數*1000 \n綠色表示該模塊缺陷密度為0,紅色越深的模塊缺陷密度越大'
        },
        tooltip: {
            formatter: function (info) {    //自定義tooltip滑鼠浮動提示，返回HTML
                var value = info.value;

                var lines = value[0];
                lines = isValidNumber(lines)
                    ? echarts.format.addCommas(lines )
                    : '-';

                var errors = value[1];
                errors = isValidNumber(errors)
                    ? echarts.format.addCommas(errors) 
                    : '-';

                var warningsOrWeight = value[2];
                warningsOrWeight = isValidNumber(warningsOrWeight)
                    ? warningsOrWeight.toFixed(2) + '%'
                    : '-';

                return [
                    '<div class="tooltip-title">' + echarts.format.encodeHTML(info.name) + '</div>',
                    '代碼行數: &nbsp;&nbsp;' + lines + '<br>',
                    '缺陷數量: &nbsp;&nbsp;' + errors + '<br>',
                    '缺陷率: &nbsp;&nbsp;' + warningsOrWeight
                ].join('');
            }
        },
        series: [{        
            name: 'root',    //這些配置項是對全局屬性配置
            top: 80,
            type: 'treemap',    //樹形圖類型
            leafDepth: 1,   //一次下鑽深度
            roam:'false',  //不能縮放平移
            label: {        //顯示文字標簽定義
                show: true,
                formatter: "{b}",    //定義顯示的內容 {b}表示name
                normal: {
                    textStyle: {
                        ellipsis: true    //圓角
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'black'    //方塊分割邊框顏色
                }
            },

borderWidth, gapWidth, borderColor 的解釋

            visualDimension: 2, //指定2『視覺映射』使用的是value數組的第3項
            levels: [  //https://blog.csdn.net/dtq007/article/details/87879790
            
                {   //鑽入矩形樹圖的頂層
                   // colorSaturation: [0.1, 0.5],    //設置顏色飽和度
                    color:['#269f3c', '#ca6872','#942e38'], //顏色列表，對於定義每個分塊顏色不太理想
                    colorMappingBy: 'value',    //顏色根據value設置
                    itemStyle: {
                        normal: {
                            borderWidth: 2,    //方塊外邊框粗細
                            borderColor: '#333',    //邊框顏色
                            gapWidth: 1  //方塊內部邊框粗細
                        }
                    }
                },
                {   //鑽入矩形樹圖的第二層
                    //color: ['#269f3c', '#ca6872','#942e38'],
                    //colorMappingBy: 'value',
                    itemStyle: {
                        normal: {
                            gapWidth: 1
                        }
                    }
                },
                {   //鑽入矩形樹圖的第三層
                    //color: ['#269f3c', '#ca6872','#942e38'],
                   // colorMappingBy: 'value',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                          
                        }
                    }
                },
                {   //鑽入矩形樹圖的第四層，沒有的話就不用寫了
                    //color: ['#269f3c', '#ca6872','#942e38'],
                   // colorMappingBy: 'value',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                          
                        }
                    }
                }
            ],
            data: obama_budget        //設置數據來源
        }]
    });

最終效果，自己定義每個小方塊的顏色

也將echarts矩形樹圖做成了我自已實現的樹形圖表的樣子：