Use tree to do the organization chart in echaert2, formatting label does not work! Help!


< html >

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="main" style="width: 1000px;height:1000px"></div>
</body>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    function eConsole(e) {
        console.log(e)
    }
    require.config({
        paths: {
            echarts: "http://echarts.baidu.com/build/dist"
        }
    });
    // 
    require(
        [
            "echarts",
            "echarts/chart/tree" // tree,
        ],
        function(ec) {
            // dom,echarts
            var myChart = ec.init(document.getElementById("main"));
            var commonStyle = {

            }
            var ecConfig = require("echarts/config");
            myChart.on(ecConfig.EVENT.CLICK, eConsole);
            var option = {
                title: {
                    text: ""
                },
                tooltip: {
                    show: false
                },
                calculable: false,
                itemStyle: {
                    normal: {
                        color: "-sharpfff", //
                        label: {
                            show: true,
                            position: "right",
                            textStyle: {
                                color: "black",
                                fontSize: 15,
                                baseline: "top"
                            },
                            formatter: function(a, b, c) {
                                console.log(a)
                                console.log(b)
                                console.log(c)
                                return ""
                            }
                        },
                        lineStyle: {
                            color: "-sharp000",
                            width: 1,
                            type: "broken" // "curve"|"broken"|"solid"|"dotted"|"dashed"
                        },
                        textStyle: {
                            baseline: "bottom"
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                        }
                    }
                },
                series: [{
                    roam: true,
                    name: "",
                    type: "tree",
                    orient: "vertical", // vertical horizontal
                    rootLocation: {
                        x: "50%",
                        y: "15%"
                    }, //   {x: "center",y: 10}
                    nodePadding: 120,
                    layerPadding: 100,
                    symbol: "image://http://www.iconpng.com/png/ecommerce-business/iphone.png",
                    symbolSize: [50, 80],
                    borderColor: "black",
                    itemStyle: {
                        normal: {
                            color: "-sharpfff", //
                            label: {
                                show: true,
                                position: "right",
                                textStyle: {
                                    color: "black",
                                    fontSize: 15,
                                    baseline: "top"
                                },
                                formatter: function(a, b, c) {
                                    console.log(a)
                                    console.log(b)
                                    console.log(c)
                                    return ""
                                }
                            },
                            lineStyle: {
                                color: "-sharp000",
                                width: 1,
                                type: "broken" // "curve"|"broken"|"solid"|"dotted"|"dashed"
                            },
                            textStyle: {
                                baseline: "bottom"
                            }
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        }
                    },
                    data: [{
                        name: "",
                        itemStyle: {
                            normal: {
                                color: "-sharpfff", //
                                label: {
                                    show: true,
                                    position: "right",
                                    textStyle: {
                                        color: "black",
                                        fontSize: 15,
                                        baseline: "top"
                                    },
                                    formatter: function(a, b, c) {
                                        console.log(a)
                                        console.log(b)
                                        console.log(c)
                                        return ""
                                    }
                                },
                                lineStyle: {
                                    color: "-sharp000",
                                    width: 1,
                                    type: "broken" // "curve"|"broken"|"solid"|"dotted"|"dashed"
                                },
                                textStyle: {
                                    baseline: "bottom"
                                }
                            },
                            emphasis: {
                                label: {
                                    show: false
                                }
                            }
                        },
                        children: [{
                            name: ""
                        }, {
                            name: ""
                        }, {
                            name: "",
                            children: [{
                                name: ""
                            }, {
                                name: ""
                            }]
                        }]
                    }]
                }]
            }
            // echarts 
            myChart.setOption(option);
        });
</script>

< / html >

Mar.13,2021
Menu