/******************************宏代码说明******************************
* 类型：ClientSide
* 对象：柱状地图
* 事件：onBeforeRender
* 效果描述：绘制两个地图, 实现伪3D样式以及外边框发光
* 简述实现步骤：
* (1) 通过添加geo组件，修改各个组件的样式以及位置从而达到效果
*********************************************************************/
/**
* 设置项
* borderColor:边框颜色
* borderWidth:边框宽度
* shadowBlur:发光大小
* shadowColor:发光颜色
* shadowOffsetX:较原位置的x轴偏移
* shadowOffsetY:较原位置的y轴偏移
*/
type GeoItemStyle = {
borderColor: string,
borderWidth: number,
shadowBlur: number,
shadowColor: string,
shadowOffsetX: number,
shadowOffsetY: number,
}
type DeviationItemStyle = {
areaColor: string,
shadowColor: string,
shadowOffsetX: number,
shadowOffsetY: number,
}
function main(page: IPage, portlet: IEChartsPortlet) {
let config = {
type: ['ECHARTS_MAP']
}
let type = portlet.getType();
if (config.type.indexOf(type) < 0) return;
let options = portlet.getChartOptions();
let geo;
if (options.geo instanceof Array) {
geo = options.geo[0];
} else {
geo = options.geo;
options.geo = [];
}
console.log(options.geo)
//最上层的地图样式
geo.label = {//区域标签设置
normal: {
show: false,
},
emphasis: {
textStyle: {
color: '#FFFFFF',//标签高亮颜色
},
},
};
geo.itemStyle = {
borderColor: 'rgba(43,155,216,0.5)', //新地图边框颜色
borderWidth: 0.8, //边框宽度
areaColor: '#1E4747', //区域颜色
shadowColor: 'rgba(0, 0, 0, 0.5)', //阴影颜色
shadowBlur: 0, //阴影模糊大小
shadowOffsetX: 0, //模糊大小水平偏移量
shadowOffsetY: 0,
emphasis: {
areaColor: '#B4F4FF'
}
}
geo.itemStyle = {
normal: {
borderColor: 'rgba(147, 235, 248, 0.2)',
borderWidth: 0.5,
areaColor: 'rgba(19, 68, 105, 1)',
opacity: 1,
},
emphasis: {
areaColor: '#2AB8FF'
}
}
geo.emphasis = {
label: {
color: '#fff',
},
itemStyle: {
shadowOffsetY: 0,
}
}
geo.tooltip = {
show: false
};
geo.zlevel = 0;//设置优先级
options.geo.push(geo);
//地图边框&阴影样式设置
/**********************开始配置*********************/
let geoFrameItemStyle: GeoItemStyle = {
borderColor: '#02e6f0',
borderWidth: 3,
shadowBlur: 12,
shadowColor: 'rgba(2,230,240,0.6)',
shadowOffsetX: 0,
shadowOffsetY: 0,
}
/**********************结束配置*********************/
let geoFrame = getGeoItemStyleShadow(-1, geoFrameItemStyle, options.geo[0]);
options.geo.push(geoFrame);
//地图图层偏移形成3D效果
/**********************开始配置*********************/
let deviationItemStyle: DeviationItemStyle = {
areaColor: '#013C62',
shadowColor: '#143b50',
shadowOffsetX: -1,
shadowOffsetY: 15,
}
/**********************结束配置*********************/
let geoShadow = getGeoItemStyleDeviation(-2, deviationItemStyle, options.geo[0]);
options.geo.push(geoShadow);
}
//获取geo的样式
function getGeoItemStyleShadow(zlevel: number, geoItemStyle: any, geo: any) {
return {
type: 'map',
map: geo.map,
zoom: geo.zoom,
zlevel: zlevel,//图层显示顺序，数值大的会覆盖在小的上面
roam: false,
tooltip: {
show: false
},
label: {//区域标签设置
normal: {
show: false,//若想地图上显示区域名称，设置为true
},
},
itemStyle: geoItemStyle,
}
}
/*
* 获取geo的样式
*/
function getGeoItemStyleDeviation(zlevel: number, geoItemStyle: any, geo: any) {
return {
type: 'map',
map: geo.map,
zoom: geo.zoom,
zlevel: zlevel,//图层显示顺序，数值大的会覆盖在小的上面
roam: false,
tooltip: {
show: false
},
label: {//区域标签设置
normal: {
show: false,//若想地图上显示区域名称，设置为true
},
},
itemStyle: geoItemStyle,
regions: hideRegions()
}
}
//返回隐藏右下角地图的信息
function hideRegions() {
let regions = [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}
]
return regions;
}
