隐藏

echarts中矩形树图treemap简单使用

发布:2025/2/22 10:59:55作者:管理员 来源:本站 浏览次数:7

option =  {

        tooltip: {
          show: true,
        },
        color: ['#C3D9F9', '#B9E6F9', '#C8EDF3', '#D0D3F6'],
        legend: {
          show: false,
        },
        series: [
          {
            width: '100%',
            height: '100%',
            name: '',
            data: [
              {
                name: '街口镇1',
                value: 6,
              },
              {
                name: '街口镇2',
                value: 20,
              },
              {
                name: '街口镇3',
                value: 30,
              },
              {
                name: '街口镇4',
                value: 21,
              },
              {
                name: '街口镇5',
                value: 22,
              },
              {
                name: '街口镇6',
                value: 23,
              },
              {
                name: '街口镇7',
                value: 24,
              },
            ],
            roam: false,
            nodeClick: false,
            breadcrumb: {
              show: false,
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: 'transparent',
            },
            label: {
              align: 'right',
              position: 'insideBottomRight',
              formatter: function (info) {
                const name = info.name;
                const value = info.value;
                return `${name}\n${value}`;
              },
              color: 'rgba(76, 76, 76, 0.8)',
              fontWeight: 400,
              fontSize: 10,
            },
            type: 'treemap',
          },
        ],
      };