当前位置： 移动技术网 > IT编程>开发语言>JavaScript > echarts玩转图表之矩形树图

echarts玩转图表之矩形树图

2019年11月23日  | 移动技术网IT编程  | 我要评论

前言

第一次用makedown编辑器写文章，感觉像得到一件利器，排版美观而且效率飙升。进入正题
echart官网文档地址

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矩形树图做成了我自已实现的树形图表的样子：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网