127.0.0.1:9200<br>URL: http://127.0.0.1:9200/likecs_art_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [text] => Array
                        (
                            [query] => 使用echarts画一个类似组织结构图的图表
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [text] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 8
    [from] => 0
)
</pre>RESPONSE:<pre>string(7750) "{"took":60,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":59.077175,"hits":[{"_index":"likecs_art_db","_type":"_doc","_id":"77381","_score":59.077175,"_source":{"id":"77381","text":"\u4f7f\u7528echarts\u753b\u4e00\u4e2a\u7c7b\u4f3c\u7ec4\u7ec7\u7ed3\u6784\u56fe\u7684\u56fe\u8868","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"tnnyang","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1639951581"},"highlight":{"text":["#em#使#/em##em#用#/em##em#echarts#/em##em#画#/em##em#一#/em##em#个#/em##em#类#/em##em#似#/em##em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em##em#的#/em##em#图#/em##em#表#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"448495","_score":36.62895,"_source":{"id":"448495","text":"JavaScript \u753b\u7ec4\u7ec7\u7ed3\u6784\u56fe","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"smallsong","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1639639794"},"highlight":{"text":["JavaScript #em#画#/em##em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"511677","_score":36.62895,"_source":{"id":"511677","text":"JavaScript \u753b\u7ec4\u7ec7\u7ed3\u6784\u56fe","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"smallsong","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1634533683"},"highlight":{"text":["JavaScript #em#画#/em##em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"358387","_score":33.20962,"_source":{"id":"358387","text":"\u624b\u628a\u624b\u6559\u4f60\u505aecharts\u56fe\u8868\u7cfb\u5217\u4e4b\u7ec4\u7ec7\u7ed3\u6784\u56fe","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"lingluo2017","tagsname":null,"tagsid":"","catesname":"","catesid":"","createtime":"1641123612"},"highlight":{"text":["手把手教你做#em#echarts#/em##em#图#/em##em#表#/em#系列之#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"481263","_score":32.740807,"_source":{"id":"481263","text":"\u7ec4\u7ec7\u7ed3\u6784\u56fe","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"onceweb","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1641123619"},"highlight":{"text":["#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"426266","_score":31.442493,"_source":{"id":"426266","text":"\u7ec4\u7ec7\u7ed3\u6784\u56fe\u53ef\u4ee5\u7528\u4ec0\u4e48\u8f6f\u4ef6\u753b\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"jags","tagsname":"","tagsid":"","catesname":"","catesid":"","createtime":"1638418849"},"highlight":{"text":["#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#可以#em#用#/em#什么软件#em#画#/em#？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"358386","_score":31.442493,"_source":{"id":"358386","text":"\u7ec4\u7ec7\u7ed3\u6784\u56fe\u53ef\u4ee5\u7528\u4ec0\u4e48\u8f6f\u4ef6\u753b\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"jags","tagsname":"","tagsid":"","catesname":"","catesid":"","createtime":"1641123613"},"highlight":{"text":["#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#可以#em#用#/em#什么软件#em#画#/em#？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"481264","_score":31.4341,"_source":{"id":"481264","text":"\u67b6\u6784\u7ec4\u7ec7\u7ed3\u6784\u56fe","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"ixiaoyang8","tagsname":null,"tagsid":"","catesname":"","catesid":"","createtime":"1641123618"},"highlight":{"text":["架#em#构#/em##em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#"]}}]}}"
</pre>127.0.0.1:9200<br>URL: http://127.0.0.1:9200/likecs_art_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [text] => Array
                        (
                            [query] => 使用echarts画一个类似组织结构图的图表
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [text] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 8
    [from] => 8
)
</pre>RESPONSE:<pre>string(7410) "{"took":65,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":59.077175,"hits":[{"_index":"likecs_art_db","_type":"_doc","_id":"430397","_score":31.378149,"_source":{"id":"430397","text":"js-\u7ec4\u7ec7\u7ed3\u6784\u56fe","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"fzhome","tagsname":"","tagsid":"","catesname":"","catesid":"","createtime":"1639277446"},"highlight":{"text":["js-#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"898043","_score":31.378149,"_source":{"id":"898043","text":"GoJS\u7ec4\u7ec7\u7ed3\u6784\u56fe","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"Alwaysbecoding","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1639639844"},"highlight":{"text":["GoJS#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"430405","_score":30.221058,"_source":{"id":"430405","text":"\u7ec4\u7ec7\u7ed3\u6784\u56fe\u6a21\u677f\u5206\u4eab\uff0c\u5728\u7ebf\u7ed8\u5236\u7ec4\u7ec7\u7ed3\u6784\u56fe","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1635307522"},"highlight":{"text":["#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#模板分享，在线绘制#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"430391","_score":30.124386,"_source":{"id":"430391","text":"\u7ec4\u7ec7\u7ed3\u6784\u56fe --- \u5546\u52a1","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"onelikeone","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1639639847"},"highlight":{"text":["#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em# --- 商务"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"358391","_score":30.124386,"_source":{"id":"358391","text":"jquery \u7ec4\u7ec7\u7ed3\u6784\u56fe(orgchart)","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"light-zhang","tagsname":"","tagsid":"","catesname":"","catesid":"","createtime":"1639277450"},"highlight":{"text":["jquery #em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#(orgchart)"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"381903","_score":30.124386,"_source":{"id":"381903","text":"\u7ec4\u7ec7\u7ed3\u6784\u6811\u72b6\u56fe","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"peipeiyu","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1639639846"},"highlight":{"text":["#em#组#/em##em#织#/em##em#结#/em##em#构#/em#树状#em#图#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"511673","_score":30.124386,"_source":{"id":"511673","text":"\u7ec4\u7ec7\u7ed3\u6784\u6811\u72b6\u56fe","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"peipeiyu","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1634533677"},"highlight":{"text":["#em#组#/em##em#织#/em##em#结#/em##em#构#/em#树状#em#图#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"976746","_score":30.124386,"_source":{"id":"976746","text":"GoJS\u7ec4\u7ec7\u7ed3\u6784\u56fe2","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"Alwaysbecoding","tagsname":"","tagsid":"","catesname":"","catesid":"","createtime":"1639874150"},"highlight":{"text":["GoJS#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#2"]}}]}}"
</pre>127.0.0.1:9200<br>URL: http://192.168.101.128/searchcore/index.php/cihere_cn_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [title] => Array
                        (
                            [query] => 使用echarts画一个类似组织结构图的图表
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [title] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [from] => 0
)
</pre>RESPONSE:<pre>bool(false)
</pre>127.0.0.1:9200<br>URL: http://127.0.0.1:9200/likecs_down_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [bool] => Array
                (
                    [must] => Array
                        (
                            [0] => Array
                                (
                                    [match] => Array
                                        (
                                            [title] => Array
                                                (
                                                    [query] => 使用echarts画一个类似组织结构图的图表
                                                )

                                        )

                                )

                        )

                    [must_not] => Array
                        (
                            [0] => Array
                                (
                                    [term] => Array
                                        (
                                            [cate1] => 电子书籍
                                        )

                                )

                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [title] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 5
    [from] => 0
)
</pre>RESPONSE:<pre>string(2964) "{"took":13,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":36.60089,"hits":[{"_index":"likecs_down_db","_type":"_doc","_id":"60224","_score":36.60089,"_source":{"id":"60224","title":"\u7528JavaScript\u5b9e\u73b0\u7684\u5458\u5de5\u7ec4\u7ec7\u7ed3\u6784\u56fe","spidertime":"1623067922","contenttime":"1624740037","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/userup\/1003\/19195A1GI.gif","tag":"javascript|\u5458\u5de5\u7ec4\u7ec7|\u7ed3\u6784\u56fe","cate1":"js\u6846\u67b6","cate2":"ajax\/javascript","attr1":"8KB"},"highlight":{"title":["#em#用#/em#JavaScript实现#em#的#/em#员工#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"60223","_score":31.485102,"_source":{"id":"60223","title":"jQuery OrgChart \u7ed8\u5236\u7ec4\u7ec7\u7ed3\u6784\u56fe\u63d2\u4ef6","spidertime":"1623067918","contenttime":"1678765861","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/120511\/_115301F1.gif","tag":"|OrgChart|jquery","cate1":"js\u6846\u67b6","cate2":"jQuery","attr1":"28KB"},"highlight":{"title":["jQuery OrgChart 绘制#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#插件"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"52445","_score":27.30572,"_source":{"id":"52445","title":"jQuery\u5b9e\u73b0\u7684\u9f20\u6807\u62d6\u62fd\u7ec4\u7ec7\u7ed3\u6784\u56fe\u7279\u6548\u6e90\u7801","spidertime":"1623057052","contenttime":"1624515326","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/160127\/1I50R31220.jpg","tag":"jquery|\u9f20\u6807\u62d6\u62fd|\u7ec4\u7ec7|\u7ed3\u6784\u56fe","cate1":"js\u6846\u67b6","cate2":"jQuery","attr1":"103KB"},"highlight":{"title":["jQuery实现#em#的#/em#鼠标拖拽#em#组#/em##em#织#/em##em#结#/em##em#构#/em##em#图#/em#特效源码"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"69009","_score":26.317587,"_source":{"id":"69009","title":"ECharts JavaScript\u56fe\u8868\u5e93 v5.1.1","spidertime":"1623080643","contenttime":"1625007205","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/200901\/1H40Q05K9.gif","tag":"\u56fe\u8868\u5e93|javascript|ECharts\u4e0b\u8f7d","cate1":"\u6e90\u7801\u4e0b\u8f7d","cate2":"\u8f6f\u4ef6\u5f00\u53d1","cate3":"java\u6e90\u7801","attr1":"7.8MB"},"highlight":{"title":["#em#ECharts#/em# JavaScript#em#图#/em##em#表#/em#库 v5.1.1"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"10545","_score":26.317587,"_source":{"id":"10545","title":"ECharts JavaScript\u56fe\u8868\u5e93 v5.1.1","spidertime":"1622877675","contenttime":"1622877675","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/200901\/1H40Q05K9.gif","tag":"\u56fe\u8868\u5e93|javascript|ECharts\u4e0b\u8f7d","cate1":"\u6e90\u7801\u4e0b\u8f7d","cate2":"\u8f6f\u4ef6\u5f00\u53d1","cate3":"java\u6e90\u7801","attr1":"7.8MB"},"highlight":{"title":["#em#ECharts#/em# JavaScript#em#图#/em##em#表#/em#库 v5.1.1"]}}]}}"
</pre><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title>使用echarts画一个类似组织结构图的图表 - 爱码网</title>
     
<meta name="keywords" content="使用echarts画一个类似组织结构图的图表" />
<meta name="description" content="目录ECharts异步加载ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/statics/css/base.css?v=2.7" />
<script src="/statics/js/detail.min.js?v=2.2"></script>   
<script>
   $(document).ready(function () { 
		$("img").error(function () {
			$(this).hide();
		}); 
	}); 
</script>
</head>
<body class="home-template dtpg">
<nav class="main-nav clearfix">
    <div class="inner">
        <ul class="nav">
            <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/" title="爱码网">首页</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/1.html" title="前端技术">前端技术</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/9.html" title="编程语言">编程语言</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/31.html" title="人工智能">人工智能</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/41.html" title="运维知识">运维知识</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/52.html" title="资源下载">资源下载</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/68.html" title="常用小工具">常用小工具</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/72.html" title="技术问答">技术问答</a></li>
                    </ul>            
	 
    </div>
</nav><div class="site-wrapper">
 
    <header style="height: auto;padding: 10px 0px;" class="main-header">
        <div style="max-width:910px" class="main-header-content inner">
                        <h1 class="page-title"><a href="/show-77381.html" title="使用echarts画一个类似组织结构图的图表">使用echarts画一个类似组织结构图的图表</a></h1>
            
        </div>

    </header>
    <main class="content" role="main">
	

        <div class="leftbox">
    <article class="post tag-uifont tag-webview">
        <header class="post-header">
            <footer class="tc"> tnnyang 
                <time class="post-date" datetime="2021-12-20">2021-12-20</time>
            </footer>
        </header>
        <section class="post-content">
            <div class="contentbef">  
                  
                              </div>

            
                                    
    <div id="topics">
        <div class="post">
            
            
            <div class="postBody">
                    <div id="likecs_post_description" style="display: none">
        
        <img src="/default/index/img?u=aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vdG5ueWFuZy82MjgxOTAvb18xMDIuanBn" class="desc_img">昨天，写了一篇关于圆环进度条的博客，已经烦不胜烦，今天又遇到了需要展示类似公司的组织结构图的功能需求，要冒了！！！这种需求，自己用div+css也是可以实现的，但是没有什么动画效果，我的css3又很差劲，而且项目中已经使用到了折线图、饼状图、柱状图之类的图表，用的还是百度的echarts，所以这个组织结构图之类的需求也就用了百度的echarts来实现了。
    </div>
<div id="likecs_post_body" class="blogpost-body cnblogs-markdown">
<p>昨天，写了一篇关于圆环进度条的博客（请移步：<a href="/default/index/url?u=aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vdG5ueWFuZy9wLzExNjU1MzE3Lmh0bWw%3D" target="_blank" rel="noopener">Vue/React圆环进度条</a>），已经烦不胜烦，今天又遇到了需要展示类似公司的组织结构图的功能需求，要冒了！！！</p>
<p>这种需求，自己用div+css也是可以实现的，但是没有什么动画效果，我的css3又很差劲，而且项目中已经使用到了折线图、饼状图、柱状图之类的图表，用的还是百度的echarts，所以这个组织结构图之类的需求也就用了百度的echarts来实现了。</p>
<p>以前用echarts写折线图、柱状图、饼状图的较多，它的API还算比较熟悉，但是画组织结构这样的树状图就很苦逼了，没用过啊，而且设计给的树状图的展示效果跟echarts树状图的展示效果相去甚远，我滴孩，又得一通费时费力的研究，设计图如下：</p>
<p><img src="/default/index/img?u=aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNjg4MDc0LzIwMTkxMC82ODgwNzQtMjAxOTEwMTIxODEyMDkzNDgtMjEzMzI0NTYwNC5wbmc%3D" alt="" loading="lazy"></p>
<p>如图所示，一个树节点中可能会有两种不同的背景色，还有两种不同的文字颜色，每个节点展示的还是圆角矩形。有同学说了，echarts有设置圆角的API啊，直接设置不就完事了。我想说的是，它是提供的有这样的API，但是按照正常的套路实现不了啊。</p>
<p>从图上还可以看到一个几乎实现不了的效果，就是连接每个节点之间的线的拐角处都是直角而不是平滑的，而且echarts没有给出可以设置拐角处是直角的API，只是给了一个curveness（API的描述是树图边的曲度），这玩意儿使用了之后，也还是实现不了的。</p>
<p>从网上查了资料，有人说可以修改echarts的源码，这种解决办法我不推荐，是因为在vue或react项目中，echarts是需要通过安装在package.json中的，如果是多人并行开发，那么别人安装的echarts就不是你修改后的echarts，这就是问题所在。</p>
<p>最后用echarts画出来的效果还是很不错的，唯一没有实现的就是连接每个节点的线的拐角处不是直角，有好的解决办法的，还望不吝赐教，谢谢！展示一下最终的成果：</p>
<p><img src="/default/index/img?u=aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNjg4MDc0LzIwMTkxMC82ODgwNzQtMjAxOTEwMTIxODE1NTQ2NDItMzExNTM2NzMyLnBuZw%3D%3D" alt="" loading="lazy"></p>
<p>说了那么多，还是上代码吧，该代码是基于vue的，如果要使用在react中，稍微修改一下就可以了。</p>
<p>组件tree.vue：</p>
<pre><code class="language-js">&lt;template&gt;
  &lt;div :class="className" :style="{height:height,width:width}" /&gt;
&lt;/template&gt;

&lt;script&gt;
import echarts from "echarts";
require("echarts/theme/macarons");
import { debounce } from "@/utils";

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "500px"
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.initChart();
    //是否需要自适应-加了防抖函数
    this.__resizeHandler = debounce(() =&gt; {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);

    // 监听侧边栏的变化以实现自适应缩放
    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
    sidebarElm.addEventListener("transitionend", this.sidebarResizeHandler);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;

    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
    sidebarElm.removeEventListener("transitionend", this.sidebarResizeHandler);
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    
      const nodes = this.chart._chartsViews[0]._data._graphicEls;
      let allNode = 0;
      for(let index = 0; index &lt; nodes.length; index++) {
        const node = nodes[index];
        if (node === undefined) {
          continue
        }
        allNode++;
      }
      
      const height = window.innerHeight;
      const width = window.innerWidth - 1000;
      const currentHeight = 85 * allNode;
      const currentWidth = 220 * allNode;
      const newHeight = Math.max(currentHeight, height);
      const newWidth = Math.max(currentWidth, width);
      const tree_ele = this.$el;
      // tree_ele.style.height = newHeight + \'px\';  //设置高度自适应
      tree_ele.style.width = newWidth + \'px\';   //设置宽度自适应
      this.chart.resize();

      this.chart.on(\'click\', this.chartData.clickCallback);   //节点点击事件
    },
    setOptions(data) {
      this.chart.setOption({
        //提供数据视图、还原、下载的工具
        // toolbox: {
        //   show : true,
        //   feature : {
        //     mark : {show: true},
        //     dataView : {show: true, readOnly: false},
        //     restore : {show: true},
        //     saveAsImage : {show: true}
        //   }
        // },
        series: [
          {
            name: "统一授信视图",
            type: "tree",
            orient: "TB", //竖向或水平   TB代表竖向  LR代表水平
            top: \'10%\',
            initialTreeDepth: 10,  //树图初始展开的层级（深度）
            expandAndCollapse: false,   //点击节点时不收起子节点，default: true
            symbolSize: [135, 65],
            itemStyle: {
              color: \'transparent\',
              borderWidth: 0,
            },
            lineStyle: {
              color: \'#D5D5D5\',
              width: 1,
              curveness: 1,
            },
            data: [data]
          }
        ]
      });
    },
    sidebarResizeHandler(e) {
      if (e.propertyName === "width") {
        this.__resizeHandler();
      }
    }
  }
};
&lt;/script&gt;
</code></pre>
<p>使用tree.vue的方法：</p>
<pre><code class="language-js">&lt;template&gt;
    &lt;tree :chartData="treeData" /&gt;
&lt;/template&gt;

&lt;script&gt;
import tree from \'./tree\';

export default {
  data() {
    return {
      treeData: {
        label: {
          backgroundColor: \'#F4F4F4\',
          borderRadius: [0, 0, 5, 5],
          formatter: [
            \'{first|综合授信额度}\',
            \'{second|(CR20190912000013)\n获批金额：100\n币种：人民币}\',
          ].join(\'\n\'),
          rich: {
            first: {
              backgroundColor: \'#078E34\',
              color: \'#fff\',
              align: \'center\',
              width: 135,
              height: 30,
              borderRadius: [5, 5, 0, 0],
            },
            second: {
              color: \'#888\',
              align: \'center\',
              lineHeight: 17,
            },
          }
        },
        children: [
          {
            label: {
              formatter: [
                \'{first|渠道额度}\',
              ].join(\'\n\'),
              rich: {
                first: {
                  backgroundColor: \'#3AC082\',
                  color: \'#fff\',
                  align: \'center\',
                  width: 135,
                  height: 65,
                  borderRadius: 5,
                },
              }
            },
            children: [{
              label: {
                formatter: [
                  \'{first|保理额度}\',
                ].join(\'\n\'),
                rich: {
                  first: {
                    backgroundColor: \'#3AC082\',
                    color: \'#fff\',
                    align: \'center\',
                    width: 135,
                    height: 65,
                    borderRadius: 5,
                  },
                }
              },
              children: [{
                label: {
                  backgroundColor: \'#F4F4F4\',
                  borderRadius: [0, 0, 5, 5],
                  formatter: [
                    \'{first|反向保理}\',
                    \'{second|(CR20190912000013)\n获批金额：100\n币种：人民币}\',
                  ].join(\'\n\'),
                  rich: {
                    first: {
                      backgroundColor: \'#078E34\',
                      color: \'#fff\',
                      align: \'center\',
                      width: 135,
                      height: 30,
                      borderRadius: [5, 5, 0, 0],
                    },
                    second: {
                      color: \'#888\',
                      align: \'center\',
                      lineHeight: 17,
                    },
                  }
                },
              }]
            }]
          },
          {
            label: {
              formatter: [
                \'{first|担保/(乐)集团/其他额度}\',
              ].join(\'\n\'),
              rich: {
                first: {
                  backgroundColor: \'#3AC082\',
                  color: \'#fff\',
                  align: \'center\',
                  width: 135,
                  height: 65,
                  borderRadius: 5,
                },
              }
            },
            children: [{
              label: {
                formatter: [
                  \'{first|保理额度}\',
                ].join(\'\n\'),
                rich: {
                  first: {
                    backgroundColor: \'#3AC082\',
                    color: \'#fff\',
                    align: \'center\',
                    width: 135,
                    height: 65,
                    borderRadius: 5,
                  },
                }
              },
              children: [{
                label: {
                  backgroundColor: \'#F4F4F4\',
                  borderRadius: [0, 0, 5, 5],
                  formatter: [
                    \'{first|正向保理}\',
                    \'{second|(CR20190912000013)\n获批金额：100\n币种：人民币}\',
                  ].join(\'\n\'),
                  rich: {
                    first: {
                      backgroundColor: \'#B8D87E\',
                      color: \'#fff\',
                      align: \'center\',
                      width: 135,
                      height: 30,
                      borderRadius: [5, 5, 0, 0],
                    },
                    second: {
                      color: \'#888\',
                      align: \'center\',
                      lineHeight: 17,
                    },
                  }
                },
              }]
            },
            {
              label: {
                formatter: [
                  \'{first|租赁额度}\',
                ].join(\'\n\'),
                rich: {
                  first: {
                    backgroundColor: \'#3AC082\',
                    color: \'#fff\',
                    align: \'center\',
                    width: 135,
                    height: 65,
                    borderRadius: 5,
                  },
                }
              },
              children: [
                {
                  label: {
                    backgroundColor: \'#F4F4F4\',
                    borderRadius: [0, 0, 5, 5],
                    formatter: [
                      \'{first|车辆租赁}\',
                      \'{second|(CR20190912000013)\n获批金额：100\n币种：人民币}\',
                    ].join(\'\n\'),
                    rich: {
                      first: {
                        backgroundColor: \'#FF6C6A\',
                        color: \'#fff\',
                        align: \'center\',
                        width: 135,
                        height: 30,
                        borderRadius: [5, 5, 0, 0],
                      },
                      second: {
                        color: \'#888\',
                        align: \'center\',
                        lineHeight: 17,
                      },
                    }
                  },
                },
              ]
            }]
          }
        ]
      }
    }
  },
  components: {
    tree,
  }
};
&lt;/script&gt;
</code></pre>
<p>看着代码不多，但是实现起来，各种查echarts的API和网上的资料，而且，由于效果图中一个节点处的文字可能会换行，文字的颜色也不同，同时有些节点处的背景色还会有两种，以及每个节点处显示的样式和文字都是不固定的，所以我们可能还要面临着将接口返回的数据再改造处理成我们想要的数据的繁琐问题，就如同传递给树节点的treeData的格式一样，相当麻烦，如果每个节点的样式都是一样的，那就好办多了，如官网的一个树状图的例子：<a href="https://www.echartsjs.com/examples/zh/editor.html?c=tree-vertical" target="_blank" rel="nofollow">https://www.echartsjs.com/examples/zh/editor.html?c=tree-vertical</a></p>
<p><img src="/default/index/img?u=aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvNjg4MDc0LzIwMjEwMS82ODgwNzQtMjAyMTAxMTgxNzE4NDAyMTQtMTI5ODk2MTg3Ny5qcGc%3D" alt="" loading="lazy"></p>
<p>以下更新于2021年1月18日：<br>
从echarts的<code>v4.7.0</code>版本开始，给配置项series中加入一个API：<code>edgeShape:\'polyline\'</code>可实现树形图表连接每个节点的线的拐角处呈直角。</p>

</div>



            </div>
            
        </div>
        

        <a id="!comments"></a>
<div id="blog-comments-placeholder"></div>
<div id="comment_form" class="commentform">
    <a name="commentform"></a>
    <div id="divCommentShow"></div>
    
    <div id="comment_form_container"></div>
    <div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
    <div id="likecs_ch"></div>
    <div id="opt_under_post"></div>
    <div id="likecs_c1" class="under-post-card">
            <div id="div-gpt-ad-1592365906576-0" style="width: 300px; height: 250px;"></div>
    </div>
    <div id="under_post_card1"></div>
        <div id="likecs_c2" class="under-post-card">
            <a href="https://cloud.baidu.com/campaign/2022developer/index.html?track=a3bf76b1cfd5f7267f7e29bd6952301957009407f6071b35#cloud" rel="nofollow" target="_blank" onclick="countCreativeClicks(\'C2-百度智能云-开年见礼\')">
                <img src="/default/index/img?u=aHR0cHM6Ly9pbWcyMDIyLmNuYmxvZ3MuY29tL2Jsb2cvMzU2OTUvMjAyMjAyLzM1Njk1LTIwMjIwMjE3MjI1MTMzMTg3LTEwMDkyNTk0NTguanBn" alt="" onload="countCreativeImpressions(\'C2-百度智能云-开年见礼\')"></a>
        </div>
    <div id="under_post_card2"></div>
    <div id="HistoryToday" class="under-post-card"></div>
    
</div>

    </div>
 
                    
            
                <div style="margin-top: 10px;">
                  </div> 
        </section>
	 
        <footer class="post-footer">
            <section class="author">
                                <p>分类：</p> 
                                                                <p>技术点：</p>
                                            </section>
        </footer>
        <p class="mt10">相关文章：</p>
        <div style="width: 100%;" class="contentcard">
      
            <div style="width: 100%;height: auto;" class="carditem litem clearfix"> 
                    <ul style="padding-left: 0rem;" class="cardcont">
                                                    <li>
                                <a  title="js-组织结构图" href='/show-430397.html' target="_blank"></a> 
                                <span>2021-12-12</span>
                            </li>
                                                        <li>
                                <a  title="GoJS组织结构图" href='/show-898043.html' target="_blank"></a> 
                                <span>2021-12-16</span>
                            </li>
                                                        <li>
                                <a  title="组织结构图模板分享，在线绘制组织结构图" href='/show-430405.html' target="_blank"></a> 
                                <span>2021-10-27</span>
                            </li>
                                                        <li>
                                <a  title="组织结构图 --- 商务" href='/show-430391.html' target="_blank"></a> 
                                <span>2021-12-16</span>
                            </li>
                                                        <li>
                                <a  title="jquery 组织结构图(orgchart)" href='/show-358391.html' target="_blank"></a> 
                                <span>2021-12-12</span>
                            </li>
                                                        <li>
                                <a  title="组织结构树状图" href='/show-381903.html' target="_blank"></a> 
                                <span>2021-12-16</span>
                            </li>
                                                        <li>
                                <a  title="GoJS组织结构图2" href='/show-976746.html' target="_blank"></a> 
                                <span>2021-12-19</span>
                            </li>
                                                </ul>
               </div>   
         </div>
    </article>

  

</div>

<div class="rigthbox contentcard mt10">
 
          <div style="height: auto;" class="carditem litem">
    <div class="cardtit">猜你喜欢 </div>
        <ul class="cardcont">
                                 <li>
                    <a title="JavaScript 画组织结构图" href="/show-448495.html" target="_blank"></a> 
                    <span>2021-12-16</span>
                </li>
                                     <li>
                    <a title="手把手教你做echarts图表系列之组织结构图" href="/show-358387.html" target="_blank"></a> 
                    <span>2022-01-02</span>
                </li>
                                     <li>
                    <a title="组织结构图" href="/show-481263.html" target="_blank"></a> 
                    <span>2022-01-02</span>
                </li>
                                     <li>
                    <a title="组织结构图可以用什么软件画？" href="/show-426266.html" target="_blank"></a> 
                    <span>2021-12-02</span>
                </li>
                                     <li>
                    <a title="架构组织结构图" href="/show-481264.html" target="_blank"></a> 
                    <span>2022-01-02</span>
                </li>
                            </ul>
   </div> 

<div style="height: auto;" class="carditem litem">
    <div class="cardtit">相关资源 </div>
        <ul class="cardcont">
              
                                         <li>
                        <a title="用JavaScript实现的员工组织结构图下载" href="/down-60224.html" target="_blank">下载</a> 
                        <span>2021-06-27</span>
                    </li>
                                             <li>
                        <a title="jQuery OrgChart 绘制组织结构图插件下载" href="/down-60223.html" target="_blank">下载</a> 
                        <span>2023-03-14</span>
                    </li>
                                             <li>
                        <a title="jQuery实现的鼠标拖拽组织结构图特效源码下载" href="/down-52445.html" target="_blank">下载</a> 
                        <span>2021-06-24</span>
                    </li>
                                             <li>
                        <a title="ECharts JavaScript图表库 v5.1.1下载" href="/down-69009.html" target="_blank">下载</a> 
                        <span>2021-06-30</span>
                    </li>
                                </ul>
   </div>
   
    <div style="height: auto;" class="carditem litem">
     <div class="cardtit">相似解决方案 </div>
         <ul class="cardcont">
                          </ul>
    </div>
  
   <div style="height: auto;background-color: #ddd;text-align: center;" class="carditem litem">
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140"  data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div> 
   <div  style="height: auto;" class="carditem litem mt20">
    <div class="cardtit">热门标签  </div>
    <div class="tagbox">
                    <a target="_blank" title="Java" href="/default/index/tags?cid=164&cname=Java" >Java</a>
                        <a target="_blank" title="Python" href="/default/index/tags?cid=367&cname=Python" >Python</a>
                        <a target="_blank" title="linux" href="/default/index/tags?cid=274&cname=linux" >linux</a>
                        <a target="_blank" title="javascript" href="/default/index/tags?cid=169&cname=javascript" >javascript</a>
                        <a target="_blank" title="Mysql" href="/default/index/tags?cid=237&cname=Mysql" >Mysql</a>
                        <a target="_blank" title="C#" href="/default/index/tags?cid=187&cname=C%23" >C#</a>
                        <a target="_blank" title="Docker" href="/default/index/tags?cid=243&cname=Docker" >Docker</a>
                        <a target="_blank" title="算法" href="/default/index/tags?cid=344&cname=%E7%AE%97%E6%B3%95" >算法</a>
                        <a target="_blank" title="前端" href="/default/index/tags?cid=160&cname=%E5%89%8D%E7%AB%AF" >前端</a>
                        <a target="_blank" title="SpringBoot" href="/default/index/tags?cid=168&cname=SpringBoot" >SpringBoot</a>
                        <a target="_blank" title="Redis" href="/default/index/tags?cid=227&cname=Redis" >Redis</a>
                        <a target="_blank" title="Vue" href="/default/index/tags?cid=236&cname=Vue" >Vue</a>
                        <a target="_blank" title="spring" href="/default/index/tags?cid=696&cname=spring" >spring</a>
                        <a target="_blank" title="设计模式" href="/default/index/tags?cid=632&cname=%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" >设计模式</a>
                        <a target="_blank" title=".net core" href="/default/index/tags?cid=381&cname=.net+core" >.net core</a>
                        <a target="_blank" title=".net" href="/default/index/tags?cid=300&cname=.net" >.net</a>
                        <a target="_blank" title="kubernetes" href="/default/index/tags?cid=2179&cname=kubernetes" >kubernetes</a>
                        <a target="_blank" title="c++" href="/default/index/tags?cid=312&cname=c%2B%2B" >c++</a>
                        <a target="_blank" title="数据库" href="/default/index/tags?cid=284&cname=%E6%95%B0%E6%8D%AE%E5%BA%93" >数据库</a>
                        <a target="_blank" title="数据结构" href="/default/index/tags?cid=247&cname=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84" >数据结构</a>
                        <a target="_blank" title="大数据" href="/default/index/tags?cid=888&cname=%E5%A4%A7%E6%95%B0%E6%8D%AE" >大数据</a>
                        <a target="_blank" title="js" href="/default/index/tags?cid=159&cname=js" >js</a>
                        <a target="_blank" title="机器学习" href="/default/index/tags?cid=171&cname=%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0" >机器学习</a>
                        <a target="_blank" title="微服务" href="/default/index/tags?cid=832&cname=%E5%BE%AE%E6%9C%8D%E5%8A%A1" >微服务</a>
                        <a target="_blank" title="Android" href="/default/index/tags?cid=282&cname=Android" >Android</a>
                        <a target="_blank" title="Go" href="/default/index/tags?cid=839&cname=Go" >Go</a>
                        <a target="_blank" title="程序员" href="/default/index/tags?cid=327&cname=%E7%A8%8B%E5%BA%8F%E5%91%98" >程序员</a>
                        <a target="_blank" title="面试" href="/default/index/tags?cid=637&cname=%E9%9D%A2%E8%AF%95" >面试</a>
                        <a target="_blank" title="JVM" href="/default/index/tags?cid=727&cname=JVM" >JVM</a>
                        <a target="_blank" title="ASP.net core" href="/default/index/tags?cid=179&cname=ASP.net+core" >ASP.net core</a>
                        <a target="_blank" title="云原生" href="/default/index/tags?cid=22056&cname=%E4%BA%91%E5%8E%9F%E7%94%9F" >云原生</a>
                        <a target="_blank" title="人工智能" href="/default/index/tags?cid=270&cname=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD" >人工智能</a>
                        <a target="_blank" title="后端" href="/default/index/tags?cid=1089&cname=%E5%90%8E%E7%AB%AF" >后端</a>
                        <a target="_blank" title="PHP" href="/default/index/tags?cid=281&cname=PHP" >PHP</a>
                        <a target="_blank" title="git" href="/default/index/tags?cid=226&cname=git" >git</a>
                        <a target="_blank" title="CSS" href="/default/index/tags?cid=817&cname=CSS" >CSS</a>
                        <a target="_blank" title="golang" href="/default/index/tags?cid=409&cname=golang" >golang</a>
                        <a target="_blank" title="k8s" href="/default/index/tags?cid=5067&cname=k8s" >k8s</a>
                        <a target="_blank" title="Nginx" href="/default/index/tags?cid=373&cname=Nginx" >Nginx</a>
                        <a target="_blank" title="Django" href="/default/index/tags?cid=634&cname=Django" >Django</a>
                        <a target="_blank" title="mybatis" href="/default/index/tags?cid=720&cname=mybatis" >mybatis</a>
                        <a target="_blank" title="深度学习" href="/default/index/tags?cid=345&cname=%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0" >深度学习</a>
                        <a target="_blank" title="多线程" href="/default/index/tags?cid=986&cname=%E5%A4%9A%E7%BA%BF%E7%A8%8B" >多线程</a>
                        <a target="_blank" title="React" href="/default/index/tags?cid=560&cname=React" >React</a>
                        <a target="_blank" title="架构" href="/default/index/tags?cid=2070&cname=%E6%9E%B6%E6%9E%84" >架构</a>
                        <a target="_blank" title="devops" href="/default/index/tags?cid=2662&cname=devops" >devops</a>
                        <a target="_blank" title="爬虫" href="/default/index/tags?cid=905&cname=%E7%88%AC%E8%99%AB" >爬虫</a>
                        <a target="_blank" title="云计算" href="/default/index/tags?cid=361&cname=%E4%BA%91%E8%AE%A1%E7%AE%97" >云计算</a>
                        <a target="_blank" title="Spring Boot" href="/default/index/tags?cid=201&cname=Spring+Boot" >Spring Boot</a>
                        <a target="_blank" title="LeetCode" href="/default/index/tags?cid=342&cname=LeetCode" >LeetCode</a>
                </div>
       
   </div>
   
        <div id="rightadbox" style="height: 300px;background-color: #ddd;text-align: center;" class="carditem litem">
            <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140"  data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        </div> 
</div>
<div class="clearfix"></div>
</main>
    
<div class="yllinks alink"></div>
 

<footer class="site-footer clearfix">
<section class="copyright">By &copy; 2026 <a href="/" title="www.likecs.com">likecs</a> 版权所有,<br/>本站所有数据收集于网络如有侵犯到您的权益请联系 进行下架处理1。 </section>
<section class="poweredby">  <a target="_blank" href="https://beian.miit.gov.cn/">粤ICP备22038628号</a>Powered By  WordPress </section>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id: "Je3PjbvUssp6BbvY",ck: "Je3PjbvUssp6BbvY"})</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?2eb031e42d29b7c1a1f16948d2ae2a9f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>  
</div>
<script>
    $(function(){
                    $(".post-content").append('<p style="padding: 20px;color: #cacaca;">原文链接：https://www.cnblogs.com/tnnyang/p/11663217.html</p>')  
            }) 
</script> 
</body>
</html>