smartmeter-app/echarts-for-weixin-master/pages/treemap/index.js

import * as echarts from '../../ec-canvas/echarts';

const app = getApp();

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var data = [];

  for (var i = 0; i <= 360; i++) {
    var t = i / 180 * Math.PI;
    var r = Math.sin(2 * t) * Math.cos(2 * t);
    data.push([r, i]);
  }

  var option = {
    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
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() { }
});