feat(treemap): add borderRadius

fe0d94a2 · pissang · e6c0f31f · fe0d94a2 · fe0d94a2 · fe0d94a2
Showing with 54 addition and 10 deletion

src/chart/treemap/TreemapSeries.ts src/chart/treemap/TreemapSeries.ts +4 -2

src/chart/treemap/TreemapView.ts src/chart/treemap/TreemapView.ts +4 -3

test/treemap-obama.html test/treemap-obama.html +46 -5

未找到文件。
--- 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'
        },

--- 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;


--- a/test/treemap-obama.html
+++ b/test/treemap-obama.html
@@ -24,6 +24,8 @@ under the License.
        <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 @@ under the License.
                        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 @@ under the License.
                });

                chart.setOption({
+                    // backgroundColor: '#000',

                    legend: {
                        data: [SERIES_NAME]
@@ -315,10 +335,31 @@ under the License.
                            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)