客户要求

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

演示demo

Echarts 地图区域定时闪烁demo

关键代码

通过高亮与取消高亮定时切换来达到闪烁的效果。

myChart.dispatchAction({
    type: 'highlight', // 高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
    seriesIndex: 0,
    name: name
})
myChart.dispatchAction({
    type: 'downplay', // 取消高亮指定的数据图形
    seriesIndex: 0
})

完整代码

        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)
                },
            ]
        };
        myChart.clear()
        myChart.resize()
        myChart.setOption(optionMap, true);
        myChart.on('click', function (params) {
            showwin()
        });

        time = window.setInterval(() => {
            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);
}