ECharts Treemap Chart

by kelvinau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.js "></script>
<div id="main" style="width: 600px;height:600px;"></div>

JavaScript

var myChart = echarts.init(document.getElementById('main'));


var rawData = [{"name":"US","value":14964.4},{"name":"China","value":6039.547},{"name":"Japan","value":5498.719},{"name":"Germany","value":3423.466},{"name":"France","value":2651.772},{"name":"UK","value":2407.351},{"name":"Brazil","value":2209.266},{"name":"Italy","value":2130.586},{"name":"India","value":1708.46},{"name":"Canada","value":1614.072},{"name":"Russia","value":1524.917},{"name":"Span","value":1434.257},{"name":"Australia","value":1244.973},{"name":"Korea","value":1094.499},{"name":"Mexico","value":1051.128},{"name":"Netherland","value":837.949},{"name":"Indonesia","value":755.256},{"name":"Turkey","value":731.539},{"name":"Sweden","value":580.764},{"name":"New Zealand","value":526.811}];



var option = {
    tooltip: {},
    series: [{
        name: 'option',
        type: 'treemap',
        data: rawData,
        width: '100%',
        height: '100%',
        roam: false,
        nodeClick: false,
        breadcrumb: {
        	show: false,
        },
        label: {
        	normal: {
          	show: false
          }
        },
        
        levels: [
            {
                itemStyle: {
                    normal: {
                        borderColor: '#555',
                        borderWidth: 4,
                        gapWidth: 4
                    }
                }
            },
            {
                colorSaturation: [0.3, 0.6],
                itemStyle: {
                    normal: {
                        borderColorSaturation: 0.7,
                        gapWidth: 1,
                        borderWidth: 2
                    }
                }
            },
            {
                colorSaturation: [0.3, 0.5],
                itemStyle: {
                    normal: {
                        borderColorSaturation: 0.6,
                        gapWidth: 1
                    }
                }
            },
            {
               ...