echarts树图根据值设置节点大小及颜色

大小

实现效果

数据为echarts官方数据
本例使用数据为其中的片段：

如何实现

echarts tree官方文档写法
如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：

(value: Array|number, params: Object) => number|Array

其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。

故配置参数，参数值为箭头函数，箭头函数参数为data中的数据值。

symbolSize: x => 0.01*x,

完整代码：

import * as echarts from 'echarts';

var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

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

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
  myChart.hideLoading();
  data.children.forEach(function (datum, index) {
    index % 2 === 0 && (datum.collapsed = true);
  });
  myChart.setOption(
    (option = {
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
      },
      series: [
        {
          type: 'tree',
          data: [data.children[2].children[0]],
          top: '1%',
          left: '7%',
          bottom: '1%',
          right: '20%',
          symbol: 'circle',
          symbolSize: x => 0.01*x,
          label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 9
          },
          leaves: {
            label: {
              position: 'right',
              verticalAlign: 'middle',
              align: 'left'
            },
            itemStyle: {
              color: 'pink',
              // borderWidth:Math.floor(Math.random()*10+1)
            }
          },
          emphasis: {
            focus: 'descendant'
          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750
        }
      ]
    })
  );
});

option && myChart.setOption(option);

颜色

实现效果

如何实现

需修改原数据，在最内层中增加

"itemStyle": {"color": "blue"}

对于数据庞大的，我们可以在后端写一个随机生成颜色的函数，然后将其返回值放入到该数据的最内层。