echarts 矩形填充占比图treemap

1、配置数据

 第一层为最内层的环,第二层为第一层对应的children所构成的环
	[
		{
		 	value:n,   数值,根据同层所有数值的占比,构成百分比矩形
		 		[n,n2,n3]	当为数组时,默认第一项为数据,也可用于visualDimension进行数据映射
		 	name:'显示内容',
		 	itemStyle:{  当前矩形样式
		 	},
		 	children:[
			 {
			 	value:n,
				name:'显示内容'
			 }
			]
		},
		{
			value:n,
			name:''
		}
	]

2、配置series:
series:[
	{
		type:'treemap',
        leafDepth:1,  设置展示第几层级,默认不开启,层次更深的节点则被隐藏起来,点击则可下钻看到层次更深的节点
        drillDownIcon 当节点可以下钻时的提示符,只能是字符。
        breadcrumb:{  底层显示层级关系的面包屑,默认开启
          show:true
        },
        squareRatio:0.5 * (1 + Math.sqrt(5))	期望矩形长宽比率,布局计算时会尽量向这个比率靠近,默认黄金比
        visibleMin:n, 如果某个节点的面加px^2小于这个值就不显示内容
        childrenVisibleMin:n,	如果某个节点的矩形面积,小于这个数值(单位:px平方)则不显示这个节点的子节点
        data:data,
        nodeClick	点击节点后的行为
        	false：节点点击无反应。
			'zoomToNode':点击节点后缩放到节点。
			'link':如果节点数据中有link点击节点后会进行超链接跳转
		zoomToNodeRatio:0.32*0.32	点击某个节点,会自动放大那个节点到合适的比例(节点占可视区域的面积比例)
		visualDimension:0,	当value为数组时,映射哪个维度的数据,该属性可在多处配置
			于sereis-treemap根下,表示本系列全局的统一设置。
			于series-treemap.levels的每个数组元素中,表示树每个层级的统一设置。
			于series-treemap.data的每个节点中,表示每个节点的特定设置。
		colorMappingBy	表示同一层级节点,在颜色列表中(参见 color 属性)选择时,按照什么来选择
			'value':根据节点的值(即 series-treemap.data.value)映射到颜色列表中,可以使用visualDimension属性来设置,用data中哪个纬度的值来映射。
			'index':同一层级中,第一个节点取颜色列表中第一个颜色,第二个节点取第二个。
			'id':将节点的id(即series-treemap.data.id)映射到颜色列表中,同一 id 映射到同一颜色,保持一致性
			于sereis-treemap根下,表示本系列全局的统一设置。
			于series-treemap.levels的每个数组元素中,表示树每个层级的统一设置。
			于series-treemap.data的每个节点中,表示每个节点的特定设置。
		upperLabel:{	用于显示矩形的父节点的标签
			show:true,
			
			于sereis-treemap根下,表示本系列全局的统一设置。
			于series-treemap.levels的每个数组元素中,表示树每个层级的统一设置。
			于series-treemap.data的每个节点中,表示每个节点的特定设置。
		},
        levels:[  设置每层级样式	
        	{}, 第一层显示样式
        	{
        		colorSaturation: [0.3, 0.5],  颜色饱和度,从0.3-0.5,这样设置能在每层形成渐变色
        		itemStyle: {
                    borderColorSaturation: 0.7,  边框饱和度
                    gapWidth: 2,
                }
        	}, 第一层的子节点样式
        	{}, 第一层的子子节点样式
        ]
        
	}
]

效果图:


代码示例:

<template>
  <div id="app">
    
    <div class='map'>

    </div>
    <div class='map2'>

    </div>

    <div>
      <button @click="add">修改</button>
      <button @click="highLight">高亮</button>
    </div>

    <!-- <router-view/> -->
  </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>