echarts-treemap学习记录

option = {
  color:['#409eff'],
   title: {
        text: '水调歌头',
        left: 'center'
      },
 tooltip: {
      formatter: (info) => {
         let {name,value,rate:r} = info.data;
         return  `<div style='color:red;'>${name}</div><div>分布:${value}</div><div>比率:${r}</div>`;
        }
      },
      
  series: [
    {
      type: 'treemap',
      name: '水调歌头', //面包屑名称
      data: [
         {
          name: '明月几时有',
          value: 30,
          rate:'30%',
        },
        {
          name: '把酒问青天',
          value: 20,
          rate:'20%'
        },
        {
          name: '不知天上宫阙',
          value: 5,
          rate:'20%'
        },
        {
          name: '今夕是何年',
          value: 5,
          rate:'30%'
        },
      ],
      label: {
        position: ['10%', '10%'],
        lineHeight:30,
        width:20,
        fontSize:14,
        formatter: function (a) {
          let arr = [
            '{title|'+ a.name +'}',
            '{middle|' + '分布:' + a.value + '}',
            '{bottom|' + '比率:' + a.data.rate + '}',
            ];
            return arr.join('\n');
        },
        rich:{
          title:{
            color:'black',
            fontSize:16,
          },
          middle:{
            color:'red',
            fontSize:14,
          },
          bottom:{
            color:'yellow',
            fontSize:14,
          },
        },
        
    },
    
      emphasis :{ //鼠标移动到上面的效果
       itemStyle:{
          color:'#4c4c4c'
       },
       focus:'self', //只展示自己
    },
      select:{ //搭配selectedMode使用
      itemStyle:{
        color:'#4c4c4c'
      },
    },
    itemStyle:{
        gapWidth:5, //格子间隙
      },
    selectedMode:true,
    breadcrumb:{
       itemStyle:{
         color:'#409eff',
       },
     },
    }
  ]
};

效果:

 ​​​​​​​