2014年中国耕地质量echarts treemap配置项内容和展示

数据来源:国土资源部

配置项如下
      myChart.setOption({
    title : {
        text: '2014年中国耕地质量',
        left: 'center',
        textStyle: {

            color: '#1a1b4e',

            fontStyle: 'normal',

            fontSize: 24
        },
        subtext: '数据来源:国土资源部'
    },
    tooltip: {
         formatter: '{b}:<br />耕地面积: {c}万公顷'
    },
    series: [{
        name: '耕地等级',
        type: 'treemap',
        visibleMin: 100,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    formatter: "{b}"
                },
                borderWidth:2
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        label: {
            normal: {
                fontSize: 14
            }
        },
        data: [ // 注意,最外层是一个数组,而非从某个根节点开始。
            {
                value: 13509.74,
                children: [{
                        value: 2389.25, // value字段的值,对应到面积大小。
                        // 也可以是数组,如 [2323, 43, 55],则数组第一项对应到面积大小。
                        // 数组其他项可以用于额外的视觉映射,详情参见 series-treemp.levels。
                        id: 'someid-1', // id 不是必须设置的。
                        // 但是如果想使用 API 来改变某个节点,需要用 id 来定位。
                        name: '低等地  17.69%', // 显示在矩形中的描述文字。
                        children: [
                            {   value: 1125.5,
                                id: 'someid-31',
                                name: '13等地',
                            }, {
                                value: 765.63,
                                id: 'someid-32',
                                name: '14等地',
                            }, {
                                value: 498.12,
                                id: 'someid-33',
                                name: '15等地',
                            }, 
                        ],
                        label: { // 此节点特殊的 label 定义(如果需要的话)。
                            // ...         // label的格式参见 series-treemap.label。
                        },
                        itemStyle: { // 此节点特殊的 itemStyle 定义(如果需要的话)。
                            // ...         // label的格式参见 series-treemap.itemStyle。
                        }
                    }, {
                        value: 7138.52,
                        id: 'someid-2',
                        name: '中等地  52.84%',
                        children: [
                            {   value: 1410.69,
                                id: 'someid-31',
                                name: '9等地',
                            }, {
                                value: 1790.55,
                                id: 'someid-32',
                                name: '10等地',
                            }, {
                                value: 2045.43,
                                id: 'someid-33',
                                name: '11等地',
                            }, {
                                value: 1891.85,
                                id: 'someid-34',
                                name: '12等地',
                            },
                        ],

                    }, {
                        value: 3584.6,
                        id: 'someid-3',
                        name: '高等地  26.53%',
                        children: [
                            {   value: 366.48,
                                id: 'someid-31',
                                name: '5等地',
                            }, {
                                value: 886.22,
                                id: 'someid-32',
                                name: '6等地',
                            }, {
                                value: 1143.89,
                                id: 'someid-33',
                                name: '7等地',
                            }, {
                                value: 1188.01,
                                id: 'someid-34',
                                name: '8等地',
                            },
                        ],

                    }, {
                        value: 397.38,
                        id: 'someid-4',
                        name: '优等地  2.94%',
                        children: [
                            {   value: 48.84,
                                id: 'someid-31',
                                name: '1等地',
                            }, {
                                value:59.93,
                                id: 'someid-32',
                                name: '2等地',
                            }, {
                                value: 115.85,
                                id: 'someid-33',
                                name: '3等地',
                            }, {
                                value: 172.76,
                                id: 'someid-34',
                                name: '4等地',
                            },
                        ],

                    }

                ]
            },
        ],
        leafDepth: 2,
        color: ["#FFA54F", "#FF8040", "#FFD39B", "#FF4500"]
}]
});
    
截图如下