circle packing-lineecharts circle配置项内容和展示

      var uploadedDataURL = "/asset/get/s/data-1498994055008-rJJ5SUU4W.csv";


var stratify = d3.stratify()
    .parentId(function(d) {
        return d.id.substring(0, d.id.lastIndexOf("."));
    });


d3.csv(uploadedDataURL, function(error, rawData) {
    if (error) throw error;

    var root = stratify(rawData)
        .sum(function(d) {
            return d.value;
        })
        .sort(function(a, b) {
            return b.value - a.value;
        });
    var maxDepth = 0;
    var seriesData = root.descendants().map(function(node) {
        maxDepth = Math.max(maxDepth, node.depth);
        return [
            node.value,
            node.depth,
            node.id
        ];
    });
    var pieces = [];
    for (var i = 0; i <= maxDepth; i++) {
        pieces.push({
            value: i,
            label: 'Level ' + i
        });
    }

    function renderItem(params, api) {
        var context = params.context;
        if (!context.layout) {

            d3.pack()
                .size([api.getWidth() - 2, api.getHeight() - 2])
                .padding(3)(root);

            context.layout = {};
            root.descendants().forEach(function(node) {
                context.layout[node.id] = {
                    x: node.x,
                    y: node.y,
                    r: node.r,
                    isLeaf: !node.children || !node.children.length
                };
            });
        }

        var nodePath = api.value(2);
        var itemLayout = context.layout[nodePath];

        var nodeName = '';
        var textFont = api.font({
            fontSize: 10,
            fontFamily: 'Arial'
        });

        if (itemLayout.isLeaf && itemLayout.r > 10) {
            nodeName = nodePath.slice(nodePath.lastIndexOf('.') + 1).split(/(?=[A-Z][^A-Z])/g).join('\n');
            nodeName = echarts.format.truncateText(nodeName, itemLayout.r, textFont, '.');
        }

        return {
            type: 'circle',
            shape: {
                cx: itemLayout.x,
                cy: itemLayout.y,
                r: itemLayout.r
            },
            z2: api.value(1) * 2,
            style: api.style({
                text: nodeName,
                textFont: textFont,
                textPosition: 'inside',
                fill: 'transparent',
                stroke: '#fff',
                lineDash: [1, 3]
            }),
            styleEmphasis: api.style({
                text: nodeName,
                textPosition: 'inside',
                textFont: textFont,
                // stroke: 'rgba(0,0,0,0.5)',
                fill: 'rgba(255,255,255,0.65)',
                lineWidth: 0
            })
        };
    }

    var option = {
        backgroundColor:"#000000",
        xAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        tooltip: {},
        visualMap: {
            show: false,
            type: 'piecewise',
            bottom: 40,
            pieces: pieces,
            dimension: 1,
            inRange: {
                color: ['#000000', '#ffffff']
            }
        },
        series: {
            type: 'custom',
            renderItem: renderItem,
            encode: {
                tooltip: 0,
                itemName: 2
            },
            data: seriesData
        }
    };

    myChart.setOption(option);

});