html里icone图标移动,china.html

中国地图

const data = [...'.'.repeat(10)].map((o, i, a) => {

return {

name: 'name',

value: 123

}

});

console.log(data);

const oMap = echarts.init(document.querySelector('#map-box'));

// echarts.registerMap('wuhan', require('../map/wuhan.json'));

oMap.setOption({

title: {

text: '中国 地理图形',

left: 'center',

textStyle: {

color: 'white',

fontStyle: 'normal',

fontWeight: 'bold',

fontSize: 32,

lineHeight: 80,

textBorderColor: 'green',

textBorderWidth: 1,

textShadowColor: 'green',

textShadowBlur: 10,

textShadowOffsetX: 2,

textShadowOffsetY: 2

}

},

// 提示框组件(可以设置在多种地方)

tooltip: {

show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。

trigger: 'item', //触发类型。item,axis,none

enterable: true,//鼠标是否可进入提示框浮层中，默认为false，

showContent: true, //是否显示提示框浮层

triggerOn: 'mousemove',//提示框触发的条件(mousemove|click|none)

showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。

textStyle: {

color: 'white',

fontSize: 12

},

padding: [0, 8],

hideDelay: 10, //浮层隐藏的延迟

formatter: (o) => (o.data) ? `

建筑地址：${o.name}

` : '',

backgroundColor: '#00a2e3', //提示框浮层的背景颜色。

alwaysShowContent: true,

transitionDuration: 1, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。

},

//地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。

geo: {

show: true,

map: 'china',

roam: false,

top: 90,

left: 145,

zoom: 1.02,

aspectScale: 0.9,

itemStyle: {

normal: {

opacity: 1, //图形透明度 0 - 1

borderColor: "#0e3c6d", //图形的描边颜色

borderWidth: 2, //描边线宽。为 0 时无描边。

borderType: 'solid', //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。

areaColor: "rgba(11, 28, 63, 0.8)", //图形的颜色 #eee

areaColor: "#0063cc", //图形的颜色 #eee

}

}

},

//系列列表。每个系列通过 type(map, scatter, bar, line, gauge, tree.....) 决定自己的图表类型

series: [{

name: '自定义图标',

map: 'china',

type: "scatter",

coordinateSystem: "geo",

symbolSize: 0,

silent: 'none',

data: chinaData.map(item => {

return {

name: item.name,

value: [item.lng, item.lat]

};

})

},

{

map: 'china',

type: "map",

zoom: 1, //当前视角的缩放比例。

aspectScale: 0.9, //这个参数用于 scale 地图的长宽比。geoBoundingRect.width / geoBoundingRect.height * aspectScale

roam: false, //是否开启鼠标缩放和平移漫游。默认不开启

label: {

show: false,

textStyle: {

color: "white",

fontSize: 12,

backgroundColor: '' //文字背景色

}

},

itemStyle: {

normal: {

borderColor: "#4b93da", //图形的描边颜色

borderWidth: 2, //描边线宽。为 0 时无描边。

borderType: 'solid', //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。

areaColor: "rgba(11, 28, 63, 0.8)", //图形的颜色 #eee

shadowBlur: 100, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

shadowColor: '#133988', //阴影色

shadowOffsetX: 20, //X轴阴影

shadowOffsetY: -20, //Y轴阴影

label: {

show: true,

textStyle: {

color: "white",

fontSize: 14

}

}

},

//鼠标移入时

emphasis: {

borderColor: "#005b89",

borderWidth: "1",

areaColor: "#17beed",

label: {

show: false,

textStyle: {

color: "yellow",

fontSize: 14

}

}

},

effect: {

show: true,

shadowBlur: 10,

loop: true

},

},

//自定义图片数组对象[{}, {}...]

}, ...chinaData.map((item, index) => {

return {

type: "scatter",

coordinateSystem: "geo",

//自定义图片的 位置(lng, lat)

data: [{ name: item.name, value: [item.lng, item.lat] }],

//自定义图片的 大小

symbolSize: [80, 60],

//自定义图片的 路径(注：必须以image://开头)

symbol: `image://img/icon/icon (${index}).png`

}

})

]

});

let timer = null, nows = -1;

const autoShow = (length) => {

nows = (nows + 1) % length;

oMap.dispatchAction({

type: 'showTip',

seriesIndex: 0,

dataIndex: nows

});

};

autoShow(chinaData.length);

clearInterval(timer);

timer = window.setInterval(() => {

autoShow(chinaData.length);

}, 5000);

一键复制

编辑

Web IDE

原始数据

按行查看

历史