feat(treemap): add borderRadius

apache · Jul 15, 2020 · fe0d94a · fe0d94a
1 parent e6c0f31
commit fe0d94a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 10 deletions.
diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts
@@ -52,6 +52,8 @@ interface TreemapSeriesLabelOption extends LabelOption {
 }
 
 interface TreemapSeriesItemStyleOption extends ItemStyleOption {
+    borderRadius?: number | number[]
+
     colorAlpha?: number
     colorSaturation?: number
 
@@ -253,7 +255,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             position: 'inside', // Can be [5, '5%'] or position stirng like 'insideTopLeft', ...
             // formatter: null,
             color: '#fff',
-            ellipsis: true
+            overflow: 'truncate'
             // align
             // verticalAlign
         },
@@ -263,7 +265,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             height: 20,
             // formatter: null,
             // color: '#fff',
-            ellipsis: true,
+            overflow: 'truncate',
             // align: null,
             verticalAlign: 'middle'
         },

diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts
@@ -767,6 +767,7 @@ function renderNode(
     const itemStyleEmphasisModel = nodeModel.getModel(['emphasis', 'itemStyle']);
     const itemStyleBlurModel = nodeModel.getModel(['blur', 'itemStyle']);
     const itemStyleSelectModel = nodeModel.getModel(['select', 'itemStyle']);
+    const borderRadius = itemStyleNormalModel.get('borderRadius') || 0;
 
     // End of closure ariables available in "Procedures in renderNode".
     // -----------------------------------------------------------------
@@ -843,7 +844,7 @@ function renderNode(
         ecData.dataIndex = thisNode.dataIndex;
         ecData.seriesIndex = seriesModel.seriesIndex;
 
-        bg.setShape({x: 0, y: 0, width: thisWidth, height: thisHeight});
+        bg.setShape({x: 0, y: 0, width: thisWidth, height: thisHeight, r: borderRadius});
 
         if (thisInvisible) {
             // If invisible, do not set visual, otherwise the element will
@@ -901,7 +902,8 @@ function renderNode(
             x: borderWidth,
             y: borderWidth,
             width: contentWidth,
-            height: contentHeight
+            height: contentHeight,
+            r: borderRadius
         });
 
         if (thisInvisible) {
@@ -981,7 +983,6 @@ function renderNode(
 
         const textEl = rectEl.getTextContent();
         const textStyle = textEl.style;
-        textStyle.overflow = 'truncate';
         textStyle.truncateMinChar = 2;
         textStyle.width = width;
 

diff --git a/test/treemap-obama.html b/test/treemap-obama.html
@@ -24,6 +24,8 @@
         <script src="lib/esl.js"></script>
         <script src="lib/config.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <!-- <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet"> -->
+        <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300&family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
     </head>
     <body>
         <style>
@@ -234,14 +236,31 @@
                         colorMappingBy: 'id',
                         itemStyle: {
                             borderWidth: 3,
-                            gapWidth: 3
+                            gapWidth: 3,
+                            borderRadius: 5,
+                            shadowBlur: 20,
+                            shadowColor: 'rgba(20, 20, 40, 1)',
                         }
                     },
                     {
                         colorAlpha: mode === 2
-                            ? [0.5, 1] : null,
+                            ? [0.3, 0.5] : null,
                         itemStyle: {
-                            gapWidth: 1
+                            borderWidth: 2,
+                            gapWidth: 1,
+                            borderRadius: 5,
+                            shadowBlur: 5,
+                            shadowColor: 'rgba(20, 20, 40, 0.5)'
+                        }
+                    },
+                    {
+                        upperLabel: {
+                            show: false
+                        },
+                        itemStyle: {
+                            borderWidth: 0,
+                            gapWidth: 0,
+                            borderRadius: 1
                         }
                     }
                 ];
@@ -297,6 +316,7 @@
                 });
 
                 chart.setOption({
+                    // backgroundColor: '#000',
 
                     legend: {
                         data: [SERIES_NAME]
@@ -315,10 +335,31 @@
                             label: {
                                 show: true,
                                 formatter: "{b}",
-                                ellipsis: true
+                                fontSize: 10,
+                                fontWeight: 100,
+                                fontFamily: 'Barlow Condensed',
+                                overflow: 'break'
+                            },
+                            labelLayout: function (params) {
+                                if (params.rect.width < 5 || params.rect.height < 5) {
+                                    return {
+                                        fontSize: 0
+                                    };
+                                }
+                                return {
+                                    fontSize: Math.min(Math.sqrt(params.rect.width * params.rect.height) / 10, 20)
+                                };
                             },
                             itemStyle: {
-                                borderColor: 'black'
+                                borderColor: 'rgba(100, 100, 200, 0.2)',
+                                borderWidth: 0
+                            },
+                            upperLabel: {
+                                show: true,
+                                height: 15,
+                                fontSize: 10,
+                                fontFamily: 'Barlow Condensed',
+                                color: null
                             },
                             levels: getLevelOption(0),
                             data: buildData('2012 Amount', window.obama_budget_2012)