自定义热力地图echarts continuous配置项内容和展示
1、自定义svg地图； 2、自定义图片地图； 3、内置热力图渲染；
配置项如下
/* 实现功能：
* 1、实现自定义svg地图渲染（官方示例常用json格式地图）
* 2、实现自定义图片地图渲染
* 3、实现热力图渲染
*/
// 自定义svg地图，在实际项目中可以使用svg或json版本地图，echarts都支持
let mapWidth = myChart.getWidth(),
mapHeight = myChart.getHeight();
let svgXML = `
<svg width="${mapWidth}" height="${mapHeight}" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="${mapWidth}" height="${mapHeight}" fill="rgba(255,255,255,0.5)"/>
</svg>
`;
echarts.registerMap('mymap', {
svg: svgXML
});
// 自定义图片地图
// let testMapImage = 'https://logo.baidu.com/images/logo.png';
let testMapImage = 'data:image/png;base64,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'
// 更新热力图数据
let heatData=[
{name:'点位1',value:50,x:200,y:170},
{name:'点位2',value:60,x:200,y:200},
{name:'点位3',value:70,x:300,y:300},
{name:'点位4',value:80,x:400,y:400},
{name:'点位5',value:90,x:400,y:300},
{name:'点位5',value:70,x:400,y:400},
{name:'点位6',value:20,x:420,y:400},
{name:'点位7',value:20,x:450,y:300},
{name:'点位8',value:5,x:480,y:400},
{name:'点位9',value:100,x:170,y:90},
{name:'点位10',value:100,x:420,y:90},
{name:'点位11',value:100,x:170,y:600},
{name:'点位12',value:100,x:555,y:680},
{name:'点位13',value:100,x:0,y:0},
{name:'点位14',value:100,x:590,y:0},
{name:'点位15',value:100,x:0,y:776},
{name:'点位16',value:100,x:345,y:776}
];
let handleHeatData = heatData.map(a => {
let obj = [a.y, a.x, a.value]
obj.push(a.value);
return obj;
});
/* 配置项
* 1、geo组件：渲染已注册地图
* 2、series.custom图表：渲染自定义的图片地图
* 3、visualMap组件和series.heatmap图表：渲染热力图
*/
option = {
backgroundColor: 'rgba(0,0,0,1)',
title: {
top: 30,
left: 'center',
text: '自定义热力图',
textStyle: {
fontSize: 30,
color: '#f00',
}
},
geo: {
map: 'mymap',
roam: true,
top: 0,
bottom: 0,
left: 0,
right: 0,
},
// 与热力图heatmap搭配使用
visualMap: {
type: 'continuous',
show: false,
min: 0,
max: 100,
inRange: {
color: ['#00f', '#ff0', '#f00'],
}
},
series: [
{
type: 'custom',
name: '自定义图片地图',
coordinateSystem: 'geo',
animation: false,
renderItem: function(params, api) {
let pos = api.coord([params.coordSys.x, params.coordSys.y]);
let size = api.size([params.coordSys.width, params.coordSys.height]);
let item = {
type: 'image',
style: {
image: testMapImage,
x: pos[0],
y: pos[1],
width: size[0],
height: size[1],
}
};
return item;
},
data: [0]
},
{
type: 'heatmap',
name: '热力图',
coordinateSystem: 'geo',
pointSize: 30,
blurSize: 50,
zlevel: 2,
animation: false,
// data: [
// // [lng1, lat1, value1], // [经度, 维度, 值]
// ],
data: handleHeatData
}
]
};
myChart.setOption(option);
// 此平台升级后貌似仅能执行一次setOption方法，本地demo运行正常
// 更新热力图数据
// let heatData=[
// {name:'点位1',value:50,x:200,y:170},
// {name:'点位2',value:60,x:200,y:200},
// {name:'点位3',value:70,x:300,y:300},
// {name:'点位4',value:80,x:400,y:400},
// {name:'点位5',value:90,x:400,y:300},
// {name:'点位5',value:70,x:400,y:400},
// {name:'点位6',value:20,x:420,y:400},
// {name:'点位7',value:20,x:450,y:300},
// {name:'点位8',value:5,x:480,y:400},
// {name:'点位9',value:100,x:170,y:90},
// {name:'点位10',value:100,x:420,y:90},
// {name:'点位11',value:100,x:170,y:600},
// {name:'点位12',value:100,x:555,y:680},
// {name:'点位13',value:100,x:0,y:0},
// {name:'点位14',value:100,x:590,y:0},
// {name:'点位15',value:100,x:0,y:776},
// {name:'点位16',value:100,x:345,y:776}
// ];
// let handleHeatData = heatData.map(a => {
// let obj = myChart.convertFromPixel('geo', [a.x, a.y]);
// obj.push(a.value);
// return obj;
// });
// myChart.setOption({
// title: {
// top: 30,
// left: 'center',
// text: '自定义热力图--此平台升级后只能执行一次setOption???',
// textStyle: {
// fontSize: 30,
// color: '#f00',
// }
// },
// series: [
// {
// type: 'custom',
// data: [1]
// },
// {
// type: 'heatmap',
// data: handleHeatData
// }
// ]
// });
截图如下
