diff --git a/src/chart/bar/BarSeries.ts b/src/chart/bar/BarSeries.ts
index d2b76ab3a7..eb838c11ff 100644
--- a/src/chart/bar/BarSeries.ts
+++ b/src/chart/bar/BarSeries.ts
@@ -27,7 +27,7 @@ import {
     SeriesSamplingOptionMixin,
     SeriesLabelOption,
     SeriesEncodeOptionMixin,
-    DefaultStatesMixinEmpasis,
+    DefaultStatesMixinEmphasis,
     CallbackDataParams
 } from '../../util/types';
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
@@ -49,7 +49,7 @@ export interface BarStateOption<TCbParams = never> {
 }
 
 interface BarStatesMixin {
-    emphasis?: DefaultStatesMixinEmpasis
+    emphasis?: DefaultStatesMixinEmphasis
 }
 
 export interface BarItemStyleOption<TCbParams = never> extends ItemStyleOption<TCbParams> {
diff --git a/src/chart/funnel/FunnelSeries.ts b/src/chart/funnel/FunnelSeries.ts
index b40ed8b253..152cdb37da 100644
--- a/src/chart/funnel/FunnelSeries.ts
+++ b/src/chart/funnel/FunnelSeries.ts
@@ -37,7 +37,7 @@ import {
     VerticalAlign,
     SeriesLabelOption,
     SeriesEncodeOptionMixin,
-    DefaultStatesMixinEmpasis,
+    DefaultStatesMixinEmphasis,
     CallbackDataParams
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
@@ -49,7 +49,7 @@ type FunnelLabelOption = Omit<SeriesLabelOption, 'position'> & {
 };
 
 interface FunnelStatesMixin {
-    emphasis?: DefaultStatesMixinEmpasis
+    emphasis?: DefaultStatesMixinEmphasis
 }
 
 export interface FunnelCallbackDataParams extends CallbackDataParams {
diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts
index 78601156d2..07bfcc470e 100644
--- a/src/chart/gauge/GaugeSeries.ts
+++ b/src/chart/gauge/GaugeSeries.ts
@@ -29,7 +29,7 @@ import {
     OptionDataValueNumeric,
     StatesOptionMixin,
     SeriesEncodeOptionMixin,
-    DefaultStatesMixinEmpasis,
+    DefaultStatesMixinEmphasis,
     CallbackDataParams
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
@@ -105,7 +105,7 @@ interface DetailOption extends LabelOption {
 }
 
 interface GaugeStatesMixin {
-    emphasis?: DefaultStatesMixinEmpasis
+    emphasis?: DefaultStatesMixinEmphasis
 }
 export interface GaugeStateOption<TCbParams = never> {
     itemStyle?: ItemStyleOption<TCbParams>
diff --git a/src/chart/heatmap/HeatmapSeries.ts b/src/chart/heatmap/HeatmapSeries.ts
index 700f0b439d..df68efdeb6 100644
--- a/src/chart/heatmap/HeatmapSeries.ts
+++ b/src/chart/heatmap/HeatmapSeries.ts
@@ -30,7 +30,7 @@ import {
     StatesOptionMixin,
     SeriesEncodeOptionMixin,
     SeriesOnCalendarOptionMixin,
-    DefaultStatesMixinEmpasis,
+    DefaultStatesMixinEmphasis,
     CallbackDataParams
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
@@ -43,12 +43,14 @@ type HeatmapDataValue = OptionDataValue[];
 
 export interface HeatmapStateOption<TCbParams = never> {
     // Available on cartesian2d coordinate system
-    itemStyle?: ItemStyleOption<TCbParams>
+    itemStyle?: ItemStyleOption<TCbParams> & {
+        borderRadius?: number | number[]
+    }
     label?: SeriesLabelOption
 }
 
 interface FunnelStatesMixin {
-    emphasis?: DefaultStatesMixinEmpasis
+    emphasis?: DefaultStatesMixinEmphasis
 }
 export interface HeatmapDataItemOption extends HeatmapStateOption,
     StatesOptionMixin<HeatmapStateOption, FunnelStatesMixin> {
diff --git a/src/chart/heatmap/HeatmapView.ts b/src/chart/heatmap/HeatmapView.ts
index 253fe50e6a..cd835ae048 100644
--- a/src/chart/heatmap/HeatmapView.ts
+++ b/src/chart/heatmap/HeatmapView.ts
@@ -205,6 +205,7 @@ class HeatmapView extends ChartView {
         let emphasisStyle = seriesModel.getModel(['emphasis', 'itemStyle']).getItemStyle();
         let blurStyle = seriesModel.getModel(['blur', 'itemStyle']).getItemStyle();
         let selectStyle = seriesModel.getModel(['select', 'itemStyle']).getItemStyle();
+        let borderRadius = seriesModel.get(['itemStyle', 'borderRadius']);
         let labelStatesModels = getLabelStatesModels(seriesModel);
         const emphasisModel = seriesModel.getModel('emphasis');
         let focus = emphasisModel.get('focus');
@@ -268,15 +269,21 @@ class HeatmapView extends ChartView {
                 });
             }
 
-            const itemModel = data.getItemModel<HeatmapDataItemOption>(idx);
-
             // Optimization for large datset
             if (data.hasItemOption) {
+                const itemModel = data.getItemModel<HeatmapDataItemOption>(idx);
                 const emphasisModel = itemModel.getModel('emphasis');
                 emphasisStyle = emphasisModel.getModel('itemStyle').getItemStyle();
                 blurStyle = itemModel.getModel(['blur', 'itemStyle']).getItemStyle();
                 selectStyle = itemModel.getModel(['select', 'itemStyle']).getItemStyle();
 
+                // Each item value struct in the data would be firstly
+                // {
+                //     itemStyle: { borderRadius: [30, 30] },
+                //     value: [2022, 02, 22]
+                // }
+                borderRadius = itemModel.get(['itemStyle', 'borderRadius']);
+
                 focus = emphasisModel.get('focus');
                 blurScope = emphasisModel.get('blurScope');
                 emphasisDisabled = emphasisModel.get('disabled');
@@ -284,6 +291,8 @@ class HeatmapView extends ChartView {
                 labelStatesModels = getLabelStatesModels(itemModel);
             }
 
+            rect.shape.r = borderRadius;
+
             const rawValue = seriesModel.getRawValue(idx) as OptionDataValue[];
             let defaultText = '-';
             if (rawValue && rawValue[2] != null) {
diff --git a/src/chart/lines/LinesSeries.ts b/src/chart/lines/LinesSeries.ts
index 03a08dfbbb..f97b6a0b97 100644
--- a/src/chart/lines/LinesSeries.ts
+++ b/src/chart/lines/LinesSeries.ts
@@ -35,7 +35,7 @@ import {
     StatesOptionMixin,
     SeriesLineLabelOption,
     DimensionDefinitionLoose,
-    DefaultStatesMixinEmpasis,
+    DefaultStatesMixinEmphasis,
     ZRColor,
     CallbackDataParams
 } from '../../util/types';
@@ -86,7 +86,7 @@ interface LegacyDataItemOption {
 }
 
 interface LinesStatesMixin {
-    emphasis?: DefaultStatesMixinEmpasis
+    emphasis?: DefaultStatesMixinEmphasis
 }
 export interface LinesStateOption<TCbParams = never> {
     lineStyle?: LinesLineStyleOption<(TCbParams extends never ? never : (params: TCbParams) => ZRColor) | ZRColor>
diff --git a/src/chart/parallel/ParallelSeries.ts b/src/chart/parallel/ParallelSeries.ts
index d3f94b0176..301b56c106 100644
--- a/src/chart/parallel/ParallelSeries.ts
+++ b/src/chart/parallel/ParallelSeries.ts
@@ -33,10 +33,10 @@ import {
     OptionEncodeValue,
     Dictionary,
     OptionEncode,
-    DefaultStatesMixinEmpasis,
+    DefaultStatesMixinEmphasis,
     ZRColor,
     CallbackDataParams
- } from '../../util/types';
+} from '../../util/types';
 import GlobalModel from '../../model/Global';
 import SeriesData from '../../data/SeriesData';
 import { ParallelActiveState, ParallelAxisOption } from '../../coord/parallel/AxisModel';
@@ -46,7 +46,7 @@ import ParallelModel from '../../coord/parallel/ParallelModel';
 type ParallelSeriesDataValue = OptionDataValue[];
 
 interface ParallelStatesMixin {
-    emphasis?: DefaultStatesMixinEmpasis
+    emphasis?: DefaultStatesMixinEmphasis
 }
 export interface ParallelStateOption<TCbParams = never> {
     lineStyle?: LineStyleOption<(TCbParams extends never ? never : (params: TCbParams) => ZRColor) | ZRColor>
diff --git a/src/chart/radar/RadarSeries.ts b/src/chart/radar/RadarSeries.ts
index 761f096abe..1405ac074b 100644
--- a/src/chart/radar/RadarSeries.ts
+++ b/src/chart/radar/RadarSeries.ts
@@ -33,7 +33,7 @@ import {
     OptionDataItemObject,
     SeriesEncodeOptionMixin,
     CallbackDataParams,
-    DefaultStatesMixinEmpasis
+    DefaultStatesMixinEmphasis
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import SeriesData from '../../data/SeriesData';
@@ -45,7 +45,7 @@ import {
 type RadarSeriesDataValue = OptionDataValue[];
 
 interface RadarStatesMixin {
-    emphasis?: DefaultStatesMixinEmpasis
+    emphasis?: DefaultStatesMixinEmphasis
 }
 export interface RadarSeriesStateOption<TCbParams = never> {
     lineStyle?: LineStyleOption
diff --git a/src/chart/themeRiver/ThemeRiverSeries.ts b/src/chart/themeRiver/ThemeRiverSeries.ts
index 64a01a004e..f1fb0bc495 100644
--- a/src/chart/themeRiver/ThemeRiverSeries.ts
+++ b/src/chart/themeRiver/ThemeRiverSeries.ts
@@ -35,7 +35,7 @@ import {
     Dictionary,
     SeriesLabelOption,
     CallbackDataParams,
-    DefaultStatesMixinEmpasis
+    DefaultStatesMixinEmphasis
 } from '../../util/types';
 import SingleAxis from '../../coord/single/SingleAxis';
 import GlobalModel from '../../model/Global';
@@ -51,7 +51,7 @@ interface ThemeRiverSeriesLabelOption extends SeriesLabelOption {
 type ThemerRiverDataItem = [OptionDataValueDate, OptionDataValueNumeric, string];
 
 interface ThemeRiverStatesMixin {
-    emphasis?: DefaultStatesMixinEmpasis
+    emphasis?: DefaultStatesMixinEmphasis
 }
 export interface ThemeRiverStateOption<TCbParams = never> {
     label?: ThemeRiverSeriesLabelOption
diff --git a/src/util/types.ts b/src/util/types.ts
index 4c00203ea0..dbaafc81b6 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -1471,7 +1471,7 @@ export interface DefaultStatesMixin {
 
 export type DefaultEmphasisFocus = 'none' | 'self' | 'series';
 
-export interface DefaultStatesMixinEmpasis {
+export interface DefaultStatesMixinEmphasis {
     /**
      * self: Focus self and blur all others.
      * series: Focus series and blur all other series.
diff --git a/test/heatmap-borderRadius.html b/test/heatmap-borderRadius.html
new file mode 100644
index 0000000000..f7cc584a4e
--- /dev/null
+++ b/test/heatmap-borderRadius.html
@@ -0,0 +1,328 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="lib/simpleRequire.js"></script>
+    <script src="lib/config.js"></script>
+    <script src="lib/jquery.min.js"></script>
+    <script src="lib/facePrint.js"></script>
+    <script src="lib/testHelper.js"></script>
+    <!-- <script src="ut/lib/canteen.js"></script> -->
+    <link rel="stylesheet" href="lib/reset.css" />
+</head>
+
+<body>
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+        }
+    </style>
+    <div id='main1'></div>
+    <div id='main2'></div>
+    <div id='main3'></div>
+    <div id='main4'></div>
+
+    <script>
+        require([
+            'echarts'
+        ], function (echarts) {
+            var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
+                '7a', '8a', '9a', '10a', '11a',
+                '12p', '1p', '2p', '3p', '4p', '5p',
+                '6p', '7p', '8p', '9p', '10p', '11p'];
+            var days = ['Saturday', 'Friday', 'Thursday',
+                'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+
+            var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];
+
+            data = data.map(function (item) {
+                return [item[1], item[0], item[2] || '-'];
+            });
+
+            var option = {
+                aria: {
+                    show: true
+                },
+                tooltip: {
+                    position: 'top'
+                },
+                animation: false,
+                grid: {
+                    height: 300
+                },
+                xAxis: {
+                    type: 'category',
+                    data: hours,
+                },
+                yAxis: {
+                    type: 'category',
+                    data: days
+                },
+                visualMap: {
+                    min: 1,
+                    max: 10,
+                    calculable: true
+                },
+                series: [{
+                    name: 'Punch Card',
+                    type: 'heatmap',
+                    data: data,
+                    label: {
+                        normal: {
+                            show: true
+                        }
+                    },
+                    itemStyle: {
+                        borderRadius: 10,
+                        emphasis: {
+                            shadowBlur: 10,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }]
+            }
+
+            var chart = testHelper.create(echarts, 'main1', {
+                option: option,
+                title: [
+                    'Heatmap borderRadius (number)',
+                ],
+            });
+        });
+    </script>
+
+    <script>
+        require([
+            'echarts'
+        ], function (echarts) {
+            var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
+                '7a', '8a', '9a', '10a', '11a',
+                '12p', '1p', '2p', '3p', '4p', '5p',
+                '6p', '7p', '8p', '9p', '10p', '11p'];
+            var days = ['Saturday', 'Friday', 'Thursday',
+                'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+
+            var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];
+
+            data = data.map(function (item) {
+                return [item[1], item[0], item[2] || '-'];
+            });
+
+            var option = {
+                aria: {
+                    show: true
+                },
+                tooltip: {
+                    position: 'top'
+                },
+                animation: false,
+                grid: {
+                    height: 300
+                },
+                xAxis: {
+                    type: 'category',
+                    data: hours,
+                    min: 2,
+                    max: 20
+                },
+                yAxis: {
+                    type: 'category',
+                    data: days,
+                    max: 6,
+                    min: 1
+                },
+                visualMap: {
+                    min: 1,
+                    max: 10,
+                    calculable: true
+                },
+                series: [{
+                    name: 'Punch Card',
+                    type: 'heatmap',
+                    data: data,
+                    label: {
+                        normal: {
+                            show: true
+                        }
+                    },
+                    itemStyle: {
+                        borderRadius: [10, 10],
+                        emphasis: {
+                            shadowBlur: 10,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }]
+            }
+
+            var chart = testHelper.create(echarts, 'main2', {
+                option: option,
+                title: [
+                    'Heatmap borderRadius(number[])',
+                ],
+            });
+        });
+    </script>
+
+    <script>
+        require([
+            'echarts'
+        ], function (echarts) {
+            var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
+                '7a', '8a', '9a', '10a', '11a',
+                '12p', '1p', '2p', '3p', '4p', '5p',
+                '6p', '7p', '8p', '9p', '10p', '11p'];
+            var days = ['Saturday', 'Friday', 'Thursday',
+                'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+
+            var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];
+            data = data.map(function (item) {
+                return {
+                    itemStyle: {
+                        borderRadius: [30, 30],
+                    },
+                    value: [item[1], item[0], item[2] || '-']
+                }
+            });
+
+            var option = {
+                aria: {
+                    show: true
+                },
+                tooltip: {
+                    position: 'top'
+                },
+                animation: false,
+                grid: {
+                    height: 300
+                },
+                xAxis: {
+                    type: 'category',
+                    data: hours,
+                },
+                yAxis: {
+                    type: 'category',
+                    data: days
+                },
+                visualMap: {
+                    min: 1,
+                    max: 10,
+                    calculable: true
+                },
+                series: [{
+                    name: 'Day',
+                    type: 'heatmap',
+                    data: data,
+                    label: {
+                        normal: {
+                            show: true
+                        }
+                    },
+                    itemStyle: {
+                        emphasis: {
+                            shadowBlur: 10,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }]
+            }
+
+            var chart = testHelper.create(echarts, 'main3', {
+                option: option,
+                title: [
+                    'Heatmap borderRadius by Each Item',
+                ],
+            });
+        });
+    </script>
+
+    <script>
+        require([
+            'echarts'
+        ], function (echarts) {
+            var year = new Date().getFullYear();
+            var getVirtualData = function (year) {
+
+                year = year || '2017';
+
+                var data = [];
+
+                var arr31 = [1, 3, 5, 7, 8, 10, 12];
+                var arr30 = [4, 6, 9, 11];
+                for (var i = 1; i <= 31; i++) {
+                    for (var j = arr31.length - 1; j >= 0; j--) {
+                        data.push([year + '-' + arr31[j] + '-' + i, Math.floor(Math.random() * 10000)]);
+                    }
+                }
+                for (var i = 1; i <= 30; i++) {
+                    for (var j = arr30.length - 1; j >= 0; j--) {
+                        data.push([year + '-' + arr30[j] + '-' + i, Math.floor(Math.random() * 10000)]);
+                    }
+                }
+                for (var i = 1; i <= 29; i++) {
+                    data.push([year + '-2-' + i, Math.floor(Math.random() * 10000)]);
+                }
+                return data;
+            }
+
+            var option = {
+                tooltip: {
+                    position: 'top',
+                    formatter (p) {
+                        var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]);
+                        return format + ': ' + p.data[1];
+                    }
+                },
+                visualMap: {
+                    show: false,
+                    min: 0,
+                    max: 10000
+                },
+                calendar: {
+                    range: year,
+                },
+                series: {
+                    type: 'heatmap',
+                    coordinateSystem: 'calendar',
+                    data: getVirtualData(year),
+                    itemStyle: {
+                        borderRadius: [10, 10],
+                    }
+                }
+            };
+
+            var chart = testHelper.create(echarts, 'main4', {
+                option: option,
+                title: [
+                    'Heatmap borderRadius in Calendar',
+                ],
+            });
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file