<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            body {
            }
            #main {
                height: 500px;
            }
        </style>

        <h1>visualMap should not work on area that no data (show show itemStyle color "light blue")</h1>

        <div id="main"></div>


        <script>

            var echarts;
            var colorTool;
            var chart;
            var myChart;
            var groupCategories = [];
            var groupColors = [];

            require([
                'echarts'
                // 'zrender/tool/color',
                // 'echarts/chart/line',
                // 'echarts/chart/map',
                // 'echarts/chart/line',
                // 'echarts/chart/parallel',
                // 'echarts/component/grid',
                // 'echarts/component/legend',
                // 'echarts/component/tooltip',
                // 'echarts/component/toolbox',
                // 'echarts/component/visualMap'
            ], function (ec) {
                echarts = ec;
                colorTool = echarts.color;
                require(['map/js/china'], function () {

                    var chart = echarts.init(document.getElementById('main'));

                    option = {
                        "tooltip": {
                            "trigger": "item",
                            "formatter":function(params,ticket,cb){ //自定义显示框
                                params.value=params.value||0;
                                var contentHTML=params.name+" - "+params.value;
                                return contentHTML;
                            }
                        },
                        "visualMap": {
                            "min": 0,
                            "max": 96.89,
                            "left": 20,
                            "align": "bottom",
                            "type": "piecewise",
                            "bottom": 25,
                            "text": ["覆盖率(高-低)"],
                            "calculable": true,
                            "inverse": true,
                            "orient": "horizontal",
                            "inRange": {
                                "color": ["#d1eaff", "#1a96f0"]
                            },
                            formatter: function (value) {
                                return  parseInt(value)||0; // 范围标签显示内容。
                            }
                        },
                        "series": [{
                            "name": "中国",
                            "type": "map",
                            "mapType": "china",
                            "selectedMode": "multiple",
                            "itemStyle": {
                                "normal": {
                                    "areaColor": "#d1eaff",
                                    "borderColor": "#fff"
                                },
                                "emphasis": {
                                    "areaColor": "#f1f5f8"
                                }
                            },
                            "data": [{
                                "name": "浙江",
                                "value": "96.89"
                            }, {
                                "name": "unknown",
                                "value": "2.67"
                            }, {
                                "name": "其它",
                                "value": "0.44"
                            }]
                        }]
                    }

                    chart.setOption(option);
                });
            });

        </script>
    </body>
</html>