Echarts 地图区域定时闪烁

echarts yekong 460℃

地图指定区域每隔1秒闪烁一次,大屏页面效果演示
Echarts 地图区域定时闪烁

        var name = ""
        var time = null
        function getecharts5() {
            var chartDom = document.getElementById('echarts5');
            var myChart = echarts.init(chartDom);
            var uploadedDataURL = "data/130900.json";
            var nameMap = '沧州市';
            window.dataList = [{name: '任丘市', value: 396},
                {name: '青县', value: 66},
                {name: '河间市', value: 222},
                {name: '肃宁县', value: 688},
                {name: '黄骅市', value: 75},
                {name: '新华区', value: 121},
                {name: '献县', value: 91},
                {name: '沧县', value: 91},
                {name: '泊头市', value: 479},
                {name: '孟村回族自治县', value: 34},
                {name: '海兴县', value: 631},
                {name: '运河区', value: 631},
                {name: '南皮县', value: 1203},
                {name: '盐山县', value: 988},
                {name: '吴桥县', value: 693},
                {name: '东光县', value: 693},
            ];
            var geoCoordMap = {};
            var convertData = function (data) {
                console.log('data', data)
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                        });
                    }
                }
                console.log('res', res)
                return res;
            };


            $.get(uploadedDataURL, function (gdMap) {
                echarts.registerMap(nameMap, gdMap);
                /*获取地图数据*/
                myChart.showLoading();
                var mapFeatures = echarts.getMap(nameMap).geoJson.features;
                myChart.hideLoading();
                mapFeatures.forEach(function (v) {
                    // 地区名称
                    var name = v.properties.name;
                    // 地区经纬度
                    geoCoordMap[name] = v.properties.center;

                });
                console.log(geoCoordMap)
                //GDP
                var optionMap = {
                    visualMap: [{
                        min: 0,
                        max: 1000,
                        show: false,
                        //   text: ['High', 'Low'],
                        realtime: false,
                        calculable: false,
                        seriesIndex: [0],
                        inRange: {
                            color: ['#116EE1', '#34B8F7', '#2ACAEF', '#1290EC', '#0A86EB', 'rgb(128,128,255)', 'rgb(236,128,141)', 'rgb(194,128,255)', 'rgb(245,154,35)', 'rgb(112,182,3)', 'rgb(0,182,128)', 'rgb(99,0,191)']
                        }
                    },
                        {
                            min: 0,
                            max: 1000,
                            seriesIndex: 1,
                            show: false,
                            splitNumber: 4,
                            right: '2%',
                            inRange: {
                                color: ['#116EE1', '#34B8F7', '#2ACAEF', '#1290EC', '#0A86EB',].reverse()
                            },
                            formatter: function (value) {
                                return ''
                            }
                        }],
                    geo: {
                        map: nameMap,
                        show: false,
                        roam: true,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        }
                    },
                    series: [
                        { // 地图块的相关信息
                            type: 'map',
                            map: nameMap,
                            zoom: 1.2,
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 12,
                                        fontWeight: 400,
                                        color: 'rgb(0,0,0) '
                                    }
                                }
                            },
                            data: window.dataList
                        },
                        {
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbol: 'pin',
                            symbolSize: [40, 40],
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#000',
                                        fontSize: 10,
                                        fontWeight: 600
                                    },
                                    formatter(value) {
                                        return value.data.value[2]
                                    }
                                }
                            },
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    color: 'pink' // 标志颜色
                                }
                            },
                            zlevel: 6,
                            data: convertData(window.dataList)
                        },
                        // {
                        //     // 水波纹
                        //     type: 'effectScatter',
                        //     coordinateSystem: 'geo',
                        //     data: convertData(
                        //         data
                        //             .sort(function (a, b) {
                        //                 return b.value - a.value;
                        //             })
                        //             .slice(0, 50)
                        //     ),
                        //     // symbolSize: function (val) {
                        //     //   return val[2] / 6;
                        //     // },
                        //     showEffectOn: 'render',
                        //     // symbolOffset: [-10, 10], //偏移
                        //     rippleEffect: {
                        //         period: 10, // 动画时间,值越小速度越快
                        //         scale: 4, // 波纹圆环最大限制,值越大波纹越大
                        //         brushType: 'fill', // 波纹绘制方式 stroke, fill
                        //     },
                        //     zlevel: 2,
                        // },
                    ]
                };
                myChart.clear()
                myChart.resize()
                myChart.setOption(optionMap, true);
                myChart.on('click', function (params) {
                    showwin()
                });

                time = window.setInterval(() => {
                    console.log(123)
                    if (name) {
                        myChart.dispatchAction({
                            type: 'highlight', // 高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
                            seriesIndex: 0,
                            name: name
                        })
                        name = ""
                    } else {
                        myChart.dispatchAction({
                            type: 'downplay', // 取消高亮指定的数据图形
                            seriesIndex: 0
                        })
                        name = '黄骅市'
                    }
                }, 1000)
            });
        }

        // 清除闪烁
        function getclear() {
            clearInterval(time);
        }
喜欢 (0)