{"id":941,"date":"2018-05-20T22:02:27","date_gmt":"2018-05-20T14:02:27","guid":{"rendered":"http:\/\/www.rain1024.com\/?p=941"},"modified":"2023-08-07T20:57:26","modified_gmt":"2023-08-07T12:57:26","slug":"article121","status":"publish","type":"post","link":"http:\/\/rain1024.com\/index.php\/2018\/05\/20\/article121\/","title":{"rendered":"\u5728Echarts\u4e2d\u8bbe\u7f6eTree\u7684\u5b50\u8282\u70b9\u70b9\u51fb\u4e8b\u4ef6"},"content":{"rendered":"

\u5728Echarts\u4e2d\u8bbe\u7f6eTree\u7684\u5b50\u8282\u70b9\u70b9\u51fb\u4e8b\u4ef6<\/h1>\n

\u4eca\u5929\u7528echarts\u505a\u4e00\u4e2a\u6811\u5f62\u56fe\uff0c\u9700\u8981\u5728\u70b9\u51fb\u67d0\u4e2a\u5b50\u8282\u70b9\u7684\u65f6\u5019\uff0c\u80fd\u591f\u5f39\u51fa\u8fd9\u4e2a\u8282\u70b9\u7684\u4fe1\u606f\u6216\u8005\u67e5\u8be2\u5230\u5176\u4ed6\u6570\u636e\uff0c\u5728\u767e\u5ea6\u4e0a\u67e5\u4e86\u4e00\u4e0b\uff0c\u6709\u5f88\u591a\u6709\u7684\u65b9\u6cd5\u548c\u6211\u4e0b\u8f7d\u7684echarts\u6e90\u7801\u90fd\u4e0d\u4e00\u6837\uff0c\u6700\u540e\u81ea\u5df1\u8bd5\u4e86\u5f88\u4e45\u624d\u627e\u5230\u65b9\u6cd5\uff0c\u7279\u6b64\u5199\u51fa\u6765\uff0c\u6709\u9700\u8981\u7684\u540c\u5b66\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b\uff0c\u548c\u7f51\u4e0a\u5927\u591a\u6570\u65b9\u6cd5\u4e0d\u4e00\u6837\uff0c\u4f46\u6211\u7528\u7684\u786e\u5b9e\u662fecharts\u7684\u6e90\u7801\uff0c\u4e0b\u9762\u662f\u4ee3\u7801,\u9002\u5408\u76f4\u63a5\u8c03\u7528json\u6587\u4ef6\u7684\uff0c\u4e0d\u662f\u6570\u636e\u5199\u5728HTML\u4e2d\u7684<\/h2>\n
 myChart.on(\"click\", clickFun);\n function clickFun(param) {\n    if (typeof param.seriesIndex == 'undefined') {\n        return;\n    }\n    if (param.type == 'click') {\n        alert(param.name);\n    }\n}\n<\/code><\/pre>\n
\u4e0b\u9762\u662f\u5b8c\u6574\u7684\u4ee3\u7801<\/h2>\n

<!DOCTYPE html>\n<html style=\"height: 100%\">\n   <head>\n       <meta charset=\"utf-8\">\n   <\/head>\n   <body style=\"height: 100%; margin: 0\">\n       <div id=\"container\" style=\"height: 100%\"><\/div>\n       <script type=\"text\/javascript\" src=\"\/public\/echarts.js\"><\/script>\n       <script type=\"text\/javascript\" src=\"\/public\/jquery-3.3.1.js\"><\/script>\n       <script type=\"text\/javascript\">\nvar dom = document.getElementById(\"container\");\nvar myChart = echarts.init(dom);\nvar app = {};\noption = null;\nmyChart.showLoading();\n$.get('\/public\/tree.json', function (data) {\n    myChart.on(\"click\", clickFun);\n    myChart.hideLoading();\n    myChart.setOption(\n        option = {\n        tooltip: {\n            trigger: 'item',\n            triggerOn: 'mousemove'\n        },\n        series:[\n            {\n                name:'\u6811\u56fe',\n                type: 'tree',\n                data: [data],\n                left: '2%',\n                right: '2%',\n                top: '12%',\n                bottom: '20%',\n                symbol: 'emptyCircle',\n                orient: 'vertical',\n                expandAndCollapse: true,\n                label: {\n                    normal: {\n                        position: 'top',\n                        rotate: -90,\n                        verticalAlign: 'middle',\n                        align: 'right',\n                        fontSize: 12\n                    }\n                },\n                leaves: {\n                    label: {\n                        normal: {\n                            position: 'bottom',\n                            rotate: -90,\n                            verticalAlign: 'middle',\n                            align: 'left'\n                        }\n                    }\n                },\n                animationDurationUpdate: 750\n            }\n        ]\n    });\n});\n;\nif (option && typeof option === \"object\") {\n    myChart.setOption(option, true);\n}\n\/\/\u5173\u952e\u70b9\uff01\nfunction clickFun(param) {\n    if (typeof param.seriesIndex == 'undefined') {\n        return;\n    }\n    if (param.type == 'click') {\n        alert(param.name);\n    }\n}\n       <\/script>\n   <\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u5728Echarts\u4e2d\u8bbe\u7f6eTree\u7684\u5b50\u8282\u70b9\u70b9\u51fb\u4e8b\u4ef6 \u4eca\u5929\u7528echarts\u505a\u4e00\u4e2a\u6811\u5f62\u56fe\uff0c\u9700\u8981\u5728\u70b9\u51fb\u67d0\u4e2a\u5b50\u8282\u70b9\u7684\u65f6\u5019\uff0c\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,14],"tags":[45],"class_list":["post-941","post","type-post","status-publish","format-standard","hentry","category-html","category-programme","tag-html"],"_links":{"self":[{"href":"http:\/\/rain1024.com\/index.php\/wp-json\/wp\/v2\/posts\/941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/rain1024.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/rain1024.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/rain1024.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/rain1024.com\/index.php\/wp-json\/wp\/v2\/comments?post=941"}],"version-history":[{"count":1,"href":"http:\/\/rain1024.com\/index.php\/wp-json\/wp\/v2\/posts\/941\/revisions"}],"predecessor-version":[{"id":1412,"href":"http:\/\/rain1024.com\/index.php\/wp-json\/wp\/v2\/posts\/941\/revisions\/1412"}],"wp:attachment":[{"href":"http:\/\/rain1024.com\/index.php\/wp-json\/wp\/v2\/media?parent=941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/rain1024.com\/index.php\/wp-json\/wp\/v2\/categories?post=941"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/rain1024.com\/index.php\/wp-json\/wp\/v2\/tags?post=941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}