echarts热力图 高德地图市级区域，自动轮播显示数量

原图：

地图显示市级区域，按照设置参数不同热力图颜色不同，自动循环显示所有热力图信息

代码：

 //订单热力图接口
        function OrderMap() {
            getOrdermap().then(res => {
                console.log(res);
                var center1 = []
                for (var i = 0; i < res.length; i++) {
                    for (var j = 0; j < city.length; j++) {
                        if (res[i].cityname == city[j].name) {
                            city[j].value = res[i].totalprice
                        }
                    }
                }
                var chart5 = echarts.init(document.getElementById('ddrlt'));
                //最重要的'chinaCity'
                echarts.registerMap('china', chinaCity);
                var option5 = {
                    tooltip: {
                        trigger: "item",
                        formatter: function (e, t, n) {
                            return .5 == e.value ? e.name + "：数量" : e.seriesName + "<br />" + e.name + "：" + e.value
                        }
                    },
                    // layoutCenter: ['50%', '50%'],//位置
                    // layoutSize:'80%',//大小
                    visualMap: {                //设置热力图参数
                        min: 0,                 //最小值
                        max: 1000,              //最大值
                        right: 26,              //位置
                        bottom: 40,
                        showLabel: !0,
                        text: ["高", "低"],
                        pieces: [{
                            gt: 10000,          //参数值
                            label: "> 10000",   //显示的文本
                            color: "#0066ff"     //颜色
                        }, {
                            gte: 1000,
                            lte: 10000,
                            label: "1000 - 10000",
                            color: "#0078ff"
                        }, {
                            gte: 100,
                            lt: 1000,
                            label: "100 - 1000",
                            color: "#4a9cfe"
                        }, {
                            gt: 1,
                            lt: 100,
                            label: "1 - 100",
                            color: "#79baff"
                        }, {
                            value: 0,
                            color: "#a5c2e2"
                        }],
                        textStyle: {
                            color: '#0078ff',
                            fontSize: 14
                        },
                        show: !0
                    },
                    geo: {
                        map: "china",  //必须，地图名称
                        roam: !1,
                        scaleLimit: {
                            min: 1,
                            max: 2
                        },
                        zoom: 1.05,
                        top: 105,
                        left: 'center',
                        label: {
                            normal: {
                                show: false,
                                fontSize: "12",
                                color: "rgba(0,0,0,0.3)"
                            }
                        },
                        // 这里是重点！！！
                        // 不希望地图展示哪些部分
                        regions: [
                            {
                                name: "南海诸岛",
                                itemStyle: {
                                    // 隐藏地图
                                    normal: {
                                        opacity: 0, // 为 0 时不绘制该图形
                                    }
                                },
                                label: {
                                    show: false // 隐藏文字
                                }
                            },

                        ],
                        itemStyle: {
                            normal: {
                                //shadowBlur: 50,
                                //shadowColor: 'rgba(0, 0, 0, 0.2)',
                                borderColor: "rgba(0, 0, 0, 0.2)"
                            },
                            emphasis: {
                                areaColor: "#F3D958",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                borderWidth: 0
                            }
                        }
                    },
                    series: [{
                        name: "数量",
                        type: "map",
                        geoIndex: 0,
                        data: city
                    }]
                };

                chart5.setOption(option5);
               //监听
                window.addEventListener("resize", chart5);
              // 循环
                var index1 = -1;
                var timer1;
                if(!isMap1){
                     timer1 = setInterval(function () {
                        //隐藏提示框
                        chart5.dispatchAction({
                            type: 'hideTip',
                            seriesIndex: 0,
                            dataIndex: index1
                        });
                        // 显示提示框
                        chart5.dispatchAction({
                            type: 'showTip',
                            seriesIndex: 0,
                            dataIndex: index1 + 1
                        });
                        // 取消高亮指定的数据图形
                        chart5.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: index1
                        });
                        // 高亮指定的数据图形
                        chart5.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: index1 + 1
                        });
                        index1++;
                        if (index1 === 730) {
                            index1 = -1;
                        }
                    }, 2000);
                    isMap1 = true
                }
                    
                    
                    
                
            })

        }

chinaCity 市级地图json包

链接: https://pan.baidu.com/s/1tDNWYtYN_wbUO3GVIuSIOA

提取码: wcg9 

下载完成直接新建一个js文件

在页面引用js，直接用chinaCity变量就可以