树图ECharts Gallery

20:11:45图表已生成
代码
var data={"children":[{"children":[{"name":"阴阳水火气血论","value":"阴阳水火气血论"}],"name":"中医理论","value":"中医理论"},{"children":[{"name":"咳血","value":"咳血"},{"name":"伤寒汗多亡阳","value":"伤寒汗多亡阳"},{"name":"眩晕","value":"眩晕"},{"name":"腹痛","value":"腹痛"}],"name":"病证","value":"病证"},{"children":[{"name":"真武汤","value":"真武汤"}],"symbolSize":40,"name":"方名","value":"方名"},{"children":[{"name":"肾经...能镇水","value":"肾经阳虚不能镇水"},{"name":"伤寒...方主之","value":"伤寒发汗过多，其人心下悸，头眩身瞤，振振欲擗地者，此方主之"}],"symbolSize":40,"name":"功用主治","value":"功用主治"},{"children":[{"name":"附子","value":"附子"},{"name":"生姜","value":"生姜"},{"name":"白芍","value":"白芍"},{"name":"茯苓","value":"茯苓"},{"name":"白术","value":"白术"},{"name":"茯苓、甘草","value":"茯苓、甘草"},{"name":"熟附...、生姜","value":"熟附子、白茯苓、白芍、甘草、生姜"},{"name":"茯苓...枚，制","value":"茯苓去皮 芍药炒 生姜各三两 白术二两，炒 附子一枚，制"}],"symbolSize":40,"name":"组成","value":"组成"},{"children":[{"name":"茯苓...生津液","value":"茯苓、白术，补土利水之物也，可以伐肾而疗心悸；生姜、附子，益卫回阳之物也，可以壮火而祛虚邪；芍药之酸，收阴气也，可以和荣而生津液"}],"symbolSize":40,"name":"方解","value":"方解"},{"children":[{"name":"五味","value":"五味"},{"name":"干姜","value":"干姜"},{"name":"细辛","value":"细辛"}],"name":"药物","value":"药物"},{"children":[{"name":"真武...以主之","value":"真武，北方之神，司水火者也。今肾气凌心，虚邪内动，有水火奔腾之象，故名此汤以主之"}],"symbolSize":40,"name":"释名","value":"释名"}],"name":"真武汤","value":"真武汤"}

option = {
                        title:{
                            text:'方剂',
                            textStyle:{
                                fontSize:40,
                        
                                
                            },
                        },

                        tooltip: {
                            trigger: 'item',
                            triggerOn: 'click',
                            textStyle: {
                                fontSize: 24,
                                lineHeight: 28,
                                width: 400
                            },
                            position: 'top',
                            confine: true,
                            // formatter: "{a} <br/> "+ "<div style='display:block;word-break: break-all;word-wrap: break-word;white-space:pre-wrap'>" + "{b} " + "</div>" + " <br/>{c}" ,
                        },

                        series: [
                            {
                                type: 'tree',
                                id: 0,
                                name: 'tree1',
                                data: [data],
                                left: '8%',
                                right: '20%',
                                roam: 'move',

                                draggable: true,

                                edgeShape: 'curve',
                                edgeForkPosition: '63%',
                                initialTreeDepth: 3,

                                textStyle: {
                                    fontSize: 40,
                                },

                                lineStyle: {
                                    width: 1,
                                },

                                label: {
                                    fontWeight:'bolder',
      
                                    position: 'left',
                                    verticalAlign: 'middle',
                                    align: 'right',
                                    fontSize: 25,
                                },

                                leaves: {
                                    label: {
                                        position: 'right',
                                        verticalAlign: 'middle',
                                        align: 'left'
                                    }
                                },

                                expandAndCollapse: true,
                                initialTreeDepth: 1,
                                animationDuration: 550,
                                animationDurationUpdate: 750,
                                tooltip: {
                                    formatter: function (node) { // 区分连线和节点，节点上额外显示其他数字
                                        var newParamsName = '';
                                        var title = '';
                                        var titleLength = node.data.value.length;
                                        var rowCount = 20;
                                        var rowNumber = Math.ceil(titleLength / rowCount);
                                        if (titleLength > rowCount) {
                                            for (var i = 0; i < rowNumber; i++) {
                                                var tempStr = "";
                                                var start = i * rowCount;
                                                var end = start + rowCount;
                                                if (i == rowNumber - 1) {
                                                    tempStr = node.data.value.substring(start, titleLength);
                                                } else {
                                                    tempStr = node.data.value.substring(start, end) + "</br>";
                                                }
                                                newParamsName += tempStr;
                                            }
                                        } else {
                                            newParamsName = node.data.value;
                                        }
                                        //返回小圆圈和后面的数量
                                        return newParamsName
                                        // return (newParamsName+"</br>"
                                        //     +"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;'></span>");
                                    }
                                },
                            },

                        ]
                    };
myChart.setOption(option);
if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                        myChart.on('mousedown', (e) => {
                            const name = e.data.name;
                            const curNode = myChart._chartsViews[0]._data.tree._nodes.find(item => {
                                return item.name === name;
                            });
                            const depth = curNode.depth;
                            const curIsExpand = curNode.isExpand;
                            myChart._chartsViews[0]._data.tree._nodes.forEach((item, index) => {
                                if (item.depth === depth && item.name !== name && !curIsExpand) {
                                    item.isExpand = false;
                                }
                            });
                        })
                    }
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
