echarts 闪光_echarts热力图闪烁效果

最新推荐文章于 2024-09-10 15:13:00 发布

weixin_39706441

最新推荐文章于 2024-09-10 15:13:00 发布

阅读量1.5k

点赞数

文章标签： echarts 闪光

本文链接：https://blog.csdn.net/weixin_39706441/article/details/111931623

版权

本文介绍如何利用ECharts实现地图上的热力图闪烁效果，通过不断刷新热力图数据，模拟闪烁，详细讲解了代码实现过程，包括数据处理和ECharts配置。注意闪烁频率对浏览器性能的影响。

摘要由CSDN通过智能技术生成

需求：最近项目需要根据电话号码标记出是哪个地市的来电并在省级地图中高亮闪烁显示。

最初考虑到使用百度的在线地图，但是网上查询的方法都无法满足，于是想到用热力图实现闪烁效果。(现在的热力图所需的百度地图js已经无法下载了，可惜没有一一保存下来)

百度地图下载页面截图

visualMap: {

show:false,

min: 800,

max: 50000,

text:['High','Low'],

realtime: false,

calculable: true,

inRange: {

color: ['lightskyblue','yellow', 'orangered']

}

这个属性是定义显示的颜色范围，只要添加show:false,就可以隐藏图例，这样做的目的是为了得到一个纯地图，可以根据官网文档将一些属性设置一下，根据需求显示相应的展现方式。

重点是闪烁效果，换个思路其实就是不断刷新热力图(重点，圈起来要考！)因为visualMap属性是定义显示颜色的，min是最小值时应该显示的颜色，所以比如官网给出的香港下面有18个区域，series.data的数组里存放的是区域和对应的值，默认不闪烁时值都为0，哪个地区需要闪烁则给对应的区域赋个固定的值(该值影响闪烁的颜色)，以下是根据官网的示例做出的效果代码：

//全局变量data，初始值都为0

var data=[

{name: '中西区', value: 0},

{name: '湾仔', value: 0},

{name: '东区', value: 0},

{name: '南区', value: 0},

{name: '油尖旺', value: 0},

{name: '深水埗', value: 0},

{name: '九龙城', value: 0},

{name: '黄大仙', value: 0},

{name: '观塘', value: 0},

{name: '葵青', value: 0},

{name: '荃湾', value: 0},

{name: '屯门', value: 0},

{name: '元朗', value: 0},

{name: '北区', value: 0},

{name: '大埔', value: 0},

{name: '沙田', value: 0},

{name: '西贡', value: 0},

{name: '离岛', value: 0} ];

var v=1;

var flag=0;

//改变data值，达到闪烁效果

function changeData(){

if(v!==0)

{

if(flag===0){

flag=1;

data = [ {name: '中西区', value: 0}, {name: '湾仔', value: 0}, {name: '东区', value: 0}, {name: '南区', value: 0}, {name: '油尖旺', value: 0}, {name: '深水埗', value: 0}, {name: '九龙城', value: 0}, {name: '黄大仙', value: 0}, {name: '观塘', value: 0}, {name: '葵青', value: 0}, {name: '荃湾', value: 0}, {name: '屯门', value: 0}, {name: '元朗', value: 0}, {name: '北区', value: 0}, {name: '大埔', value: 0}, {name: '沙田', value: 0}, {name: '西贡', value: 0}, {name: '离岛', value: 0} ];}

else{

flag=0;

data = [ {name: '中西区', value: 0}, {name: '湾仔', value: 0}, {name: '东区', value: 0}, {name: '南区', value: 0}, {name: '油尖旺', value: 0}, {name: '深水埗', value: 0}, {name: '九龙城', value: 0}, {name: '黄大仙', value: 0}, {name: '观塘', value: 0}, {name: '葵青', value: 0}, {name: '荃湾', value: 0}, {name: '屯门', value: 0}, {name: '元朗', value: 0}, {name: '北区', value: 0}, {name: '大埔', value: 0}, {name: '沙田', value: 40000}, {name: '西贡', value: 0}, {name: '离岛', value: 40000} ];}

}

//这块可以再加个标志，否则不闪烁的时候也在一直刷新

else{

}

shengPhone();

}

function changeVule(){

if(v===0){v=1;}

else{v=0;}

}

setInterval(changeData,500);

setInterval(changeVule,3000);

function shengPhone(){

$.get('data/asset/geo/HK.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('HK', geoJson);

myChart.setOption(option = {

title: {

text: '香港18区人口密度 (2011)',

subtext: '人口密度数据来自Wikipedia',

sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12' },

tooltip: { trigger: 'item', formatter: '{b}{c} (p / km2)' },

toolbox: {

show: true,

orient: 'vertical',

left: 'right',

top: 'center',

feature: {

dataView: {readOnly: false},

restore: {},

saveAsImage: {}

}

visualMap: {

show:false,

min: 800,

max: 50000,

text:['High','Low'],

realtime: false,

calculable: true,

inRange: {

color: ['lightskyblue','yellow', 'orangered']

}

series: [ {

name: '香港18区人口密度',

type: 'map',

mapType: 'HK', // 自定义扩展图表类型

itemStyle:{

normal:{label:{show:true}},

emphasis:{label:{show:true}} },

data:data,

// 自定义名称映射

nameMap: {

'Central and Western': '中西区',

'Eastern': '东区',

'Islands': '离岛',

'Kowloon City': '九龙城',

'Kwai Tsing': '葵青',

'Kwun Tong': '观塘',

'North': '北区',

'Sai Kung': '西贡',

'Sha Tin': '沙田',

'Sham Shui Po': '深水埗',

'Southern': '南区',

'Tai Po': '大埔',

'Tsuen Wan': '荃湾',

'Tuen Mun': '屯门',

'Wan Chai': '湾仔',

'Wong Tai Sin': '黄大仙',

'Yau Tsim Mong': '油尖旺',

'Yuen Long': '元朗'

}

]

});

}

将以上代码直接复制到示例中，点击运行即可看到效果。

需要考虑闪烁的时间间隔以及停止闪烁时只需刷新一次，如果频繁刷新echarts热力图，会造成地图消失或者浏览器奔溃，总之就是消耗浏览器内存。

可惜的是现在的百度地图已经不提供地图json和js文件下载了？！