echarts玩轉圖表之矩形樹圖

前言

第一次用makedown編輯器寫文章，感覺像得到一件利器，排版美觀而且效率飆升。進入正題

 

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: [...] },

資源搜索網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com

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>' + 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矩形樹圖做成了我自已實現的樹形圖表的樣子：