echarts 地图点位图标为动图,且可以多个不同图标

2024-07-16 13:21| 来源: 网络整理| 查看: 265

根据项目需求,echarts地图点位图标要是动图,且可以设置不同图标,经过多方查找,找到解决方案,可以用svg使gif动起来

请添加图片描述

let myChartChina = echarts.init(document.getElementById("myChartChina"), "transparent", { renderer: "svg" });

其中transparent是地图背景色,可设置其他颜色

也可以设置多个不同图标

series: [ { name: "数据", type: "map", mapType: "chinaJson", roam: false, //可缩放、拖动 zoom: 1.2, //视觉比例大小,1.2即为原有大小的1.2倍 // aspectScale: 0.8, // 拉伸地图值为0-1 label: { normal: { show: false //省份名称 }, emphasis: { show: true, color: "#fff" } }, itemStyle: { normal: { areaColor: "#272235", borderColor: "#043C6A", fontWeightL: 700, borderWidth: 1 } }, emphasis: { show: true, itemStyle: { areaColor: "#457efa" // 鼠标hover省份颜色 } }, data: regionsData //数据 }, { type: "scatter", //类型：散点 coordinateSystem: "geo", //使用地理坐标系 geoIndex: 0, symbol: "image://" + img1, symbolSize: 40, //散点大小 encode: { tooltip: 2 }, data: yiji, zlevel: 1 }, { type: "scatter", //类型：散点 coordinateSystem: "geo", //使用地理坐标系 geoIndex: 0, symbol: "image://" + img2, symbolSize: 40, //散点大小 encode: { tooltip: 2 }, data: erji, zlevel: 1 }, { type: "scatter", //类型：散点 coordinateSystem: "geo", //使用地理坐标系 geoIndex: 0, symbol: "image://" + img3, symbolSize: 40, //散点大小 encode: { tooltip: 2 }, data: sanji, zlevel: 1 } ]

【本文地址】

公司简介

联系我们