echarts 矩形填充占比图treemap

Bertha 。 2021-07-24 20:39 1480阅读 0赞

1、配置数据
    
     第一层为最内层的环,第二层为第一层对应的children所构成的环
    	[
    		{
    		 	value:n,   数值,根据同层所有数值的占比,构成百分比矩形
    		 	name:'显示内容',
    		 	itemStyle:{  当前矩形样式
    		 	},
    		 	children:[
    			 {
    			 	value:n,
    				name:'显示内容'
    			 }
    			]
    		},
    		{
    			value:n,
    			name:''
    		}
    	]
    
    2、配置series:
    series:[
    	{
    		type:'treemap',
            leafDepth:1,  设置展示第几层级,默认不开启
            breadcrumb:{  底层显示层级关系的面包屑,默认开启
              show:true
            },
            visibleMin:n, 如果某个节点的面加px^2小于这个值就不显示内容
            data:data,
            levels:[  设置每层级样式
            	{}, 第一层显示样式
            	{
            		colorSaturation: [0.3, 0.5],  颜色饱和度,从0.3-0.5,这样设置能在每层形成渐变色
            		itemStyle: {
                        borderColorSaturation: 0.7,  边框饱和度
                        gapWidth: 2,
                    }
            	}, 第一层的子节点样式
            	{}, 第一层的子子节点样式
            ]
            
    	}
    ]

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]  
代码示例:

<template>
      <div id="app">
        
        <div class='map'>
    
        </div>
        <div class='map2'>
    
        </div>
    
        <div>
          <button @click="add">修改</button>
          <button @click="highLight">高亮</button>
        </div>
    
        
      </div>
    </template>
    
    <script>
    import echarts from 'echarts';
    import axios from 'axios';
    
    export default { 
      name: 'App',
      data()
      { 
        return{ 
          myMap:'',
          pieData:[{ name:'淘宝',value:'11231'},{ name:'京东',value:'22673'},{ name:'唯品会',value:'6123'},{ name:'1号店',value:'8989'},{ name:'聚美优品',value:'6700'}]
        }
      },
      methods:{ 
        add()
        { 
          this.pieData.push({ name:'苏宁',value:'9999'})
          var option={ 
            series:[
              { 
                data:this.pieData
              }
            ]
          }
          this.myMap.setOption(option);
    
        },
        highLight()
        { 
          this.myMap.dispatchAction({ 
            type: 'highlight',
            // seriesIndex:0,
            dataIndex: 2,
          })
        }
      },
      mounted:async function(){ 
    
    
        var myMap=echarts.init(document.querySelector('.map'));
        this.myMap=myMap;
        
        var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
        var yData1=[88,92,63,77,94,80,72,86];
        var yData2=[80,90,60,70,90,70,62,76];
        // var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]
        
        var radaData=[{ name: '华为手机1',value: [80, 90, 80, 82, 90]},{ name: '中兴手机1',value: [70, 82, 75, 70, 78]}]
        var dataMax = [
          { 
            name: '易用性',
            max: 100
          },
          { 
            name: '功能',
            max: 100
          },
          { 
            name: '拍照',
            max: 100
          },
          { 
            name: '跑分',
            max: 100
          },
          { 
            name: '续航',
            max: 100
          }
        ]
    
    
    
        var option = { 
          legen:{ 
            show:true,
    
          },
          series:[{ 
            type:'treemap',
            leafDepth:1,  //设置展示第几层级,默认不开启
            breadcrumb:{   //底层显示层级关系的面包屑,默认开启
              show:true
            },
            data:
                [{ 
                  name: 'parent1',
                  value: 10,          // 可以不写父元素的 value，则为第一层子元素之和；
                                      // 如果写了，并且大于子元素之和，可以用来表示还有其他子元素未显示
                  children: [
                    { 
                        value: 5,
                        name: 'child1',
                        children: [{ 
                            value: 8,  //根据第一层节点的value数值,来进行占比绘制,若第一层无value,则根据第一层子节点的value进行占比
                            name: 'grandchild1',
                        }]
                    }, 
                    { 
                        value: 3,
                        name: 'child2',
                    }
                  ],
              }, { 
                  name: 'parent2',
                  value: 8,
                  children:[
                    { 
                      value:8,
                      name:'p2child',
                      itemStyle:{ 
                        color:'purple'
                      },
                      children:[
                        { 
                          value:4,
                          name:'pp2child'
                        },
                        { 
                          value:5,
                          name:'pp2child2'
                        }
                      ]
                    },
                    { 
                      value:5,
                      name:'p2child2'
                    },
                    { 
                      value:4,
                      name:'p2child3'
                    }
                  
                  
                  ]
            },
            { 
              value:'5',
              name:'p3'
            },
            { 
              value:'7',
              name:'p4'
            },
            { 
              value:'5',
              name:'p5'
            },
            { 
              value:'7',
              name:'p6'
            }
            
          ],
          levels:[
                    { 
                        itemStyle: { 
                            borderColor: '#555',
                            borderWidth: 4,
                            gapWidth: 4
                        }
                    },
                    { 
                        colorSaturation: [0.3, 0.5],
                        itemStyle: { 
                            borderColorSaturation: 0.7,
                            gapWidth: 2,
                        }
                    },
                    { 
                        colorSaturation: [0.3, 0.5],
                        
                        itemStyle: { 
                            borderColorSaturation: 0.6,
                            gapWidth: 1,
                        }
                    },
                    { 
                        colorSaturation: [0.3, 0.5]
                    }
                ]
          
        }]
    
    
        };
    
        myMap.setOption(option);
    
    
      }
    }
    </script>
    
    <style>
    .map{ 
      height:400px;
      width: 100%;
      /* width:700px; */
    }
    
    .map2{ 
      height:400px;
      width: 100%;
      /* width:700px; */
    }
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/5ac7a3720ac84dd185dd9f7f00d992d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/45dc21c0578248bf8b57cfaf81b63712.png