Echarts在线免费图表

 
            /*
title: Basic Treemap
category: treemap
titleCN: 基础矩形树图
*/
option = {
  color: [
    '#afd860',
    '#7bc96f',
    '#2ca61f',
    '#43aa4e',
    '#63b265',
    '#1f9f48',
    '#08933b',
    '#307945'
  ],
  grid: {
    left: '10%'
  },
  backgroundColor: 'red',
  series: [
    {
      type: 'treemap',
      roam: false,
      nodeClick: false,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      breadcrumb: {
        show: false
      },
      // squareRatio:100,
      label: {
        overflow: 'break',
        fontSize: 24,
        formatter: function (params) {
          // console.log(params)
          let bfb = (
            (params.value / params.treePathInfo[0].value) *
            100
          ).toFixed(0);
          // return `${params.name}: ${params.value} (${bfb}%)`
          return params.name;
        }
      },
      data: [
        {
          name: '农业经济',
          value: 500
        },
        {
          name: '工业经济',
          value: 450
        },
        {
          name: '企业经济',
          value: 350
        },
        {
          name: '环境科学与资源利用',
          value: 300
        },
        {
          name: '建筑科学与工程',
          value: 250
        },
        {
          name: '矿业工程',
          value: 200
        },
        {
          name: '交通运输',
          value: 150
        },
        {
          name: '更多',
          value: 100
        }
      ]
    }
  ]
};