commit 7cebeff40c30ad114c4a829f9eb2ac49de21a679
author stephenLYZ <750188453@qq.com> Sun May 16 18:43:42 2021 +0800
committer stephenLYZ <750188453@qq.com> Sun May 16 18:43:42 2021 +0800
tree e91e0e6d6bb69ed5fb4eeedd2f98aba17b82620d
parent 202bfcc066bab11ca4053e405b6914921b4e746f

feat(tree): add tree path info to tooltip

src/chart/tree/TreeSeries.ts

diff --git a/src/chart/tree/TreeSeries.ts b/src/chart/tree/TreeSeries.ts
index fb59ed9..1fee9f5 100644
--- a/src/chart/tree/TreeSeries.ts
+++ b/src/chart/tree/TreeSeries.ts
@@ -38,6 +38,7 @@
 import { LayoutRect } from '../../util/layout';
 import Model from '../../model/Model';
 import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
+import { wrapTreePathInfo } from '../helper/treeHelper';
 
 interface CurveLineStyleOption extends LineStyleOption{
     curveness?: number
@@ -112,6 +113,16 @@
     data?: TreeSeriesNodeItemOption[]
 }
 
+interface TreePathInfo {
+    name: string
+    dataIndex: number
+    value: number
+}
+
+interface TreeSeriesCallbackDataParams extends CallbackDataParams {
+    treePathInfo?: TreePathInfo[]
+}
+
 class TreeSeriesModel extends SeriesModel<TreeSeriesOption> {
     static readonly type = 'series.tree';
 
@@ -224,6 +235,16 @@
         });
     }
 
+    // Add tree path to tooltip param
+    getDataParams(dataIndex: number) {
+        const params = super.getDataParams.apply(this, arguments as any) as TreeSeriesCallbackDataParams;
+
+        const node = this.getData().tree.getNodeByDataIndex(dataIndex);
+        params.treePathInfo = wrapTreePathInfo(node, this);
+
+        return params;
+    }
+
     static defaultOption: TreeSeriesOption = {
         zlevel: 0,
         z: 2,

test/tree-basic.html

diff --git a/test/tree-basic.html b/test/tree-basic.html
index eae8c37..6ee3f67 100644
--- a/test/tree-basic.html
+++ b/test/tree-basic.html
@@ -37,10 +37,13 @@
         </style>
         <div id="main"></div>
         <script>
+            var formatUtil;
+
             require([
                 'echarts',
                 './data/flare.json'
             ], function (echarts, data) {
+                formatUtil = echarts.format;
                 var chart = echarts.init(document.getElementById('main'));
 
                 window.onresize = function () {
@@ -55,7 +58,21 @@
 
                     tooltip: {
                         trigger: 'item',
-                        triggerOn: 'mousemove'
+                        triggerOn: 'mousemove',
+                        formatter: function (info) {
+                            var value = info.value;
+                            var treePathInfo = info.treePathInfo;
+                            var treePath = [];
+
+                            for (var i = 1; i < treePathInfo.length; i++) {
+                                treePath.push(treePathInfo[i].name);
+                            }
+
+                            return [
+                                '<div>' + formatUtil.encodeHTML(treePath.join('/')) + '</div>',
+                                value ? 'value: ' + formatUtil.addCommas(value) : '',
+                            ].join('');
+                        }
                     },
 
                     series:[