echarts地图添加图片

需求：地图的各区域添加图标

解决方案：

通过散点图与地图的结合，为地图添加上图片；

option: {geo: [{map: 'xx省',//要显示地图的地区名roam: false,zlevel: 1,zoom: 1.2,label: {normal: {show: false},emphasis: {show: false}},itemStyle: {normal: {borderColor: '#052783',borderWidth: 1,areaColor: '#052783',shadowColor: '#052783',shadowBlur: 0,shadowOffsetX: 0,shadowOffsetY: 20},emphasis: {borderWidth: 1,areaColor: '#052783',borderColor: '#052783'}}}],series: [{type: 'map',zlevel: 3,map: 'xx省',zoom: 1.2,label: {show: true,color: '#fff',fontSize: 12},itemStyle: {normal: {borderColor: '#5AC3EB',borderWidth: 1},emphasis: {areaColor: 'rgba(39, 196, 153, 1)'}},data: []},{type: 'scatter',coordinateSystem: 'geo',//自定义图片的 位置（lng, lat）data: [{value: xxx,symbolSize:30,symbol:图片,symbolOffset:[0,0]},{value: xxx,symbolSize:30,symbol:图片,symbolOffset:[0,0]},...],zlevel: 3}],...}

效果图

完整代码请加我微信

echarts地图添加图片相关推荐

echarts饼图添加图片
饼图添加图片只需要配置两部分 option = {graphic: { // 这个属性可以在饼图内部填充图片,文字等elements: [{type: 'image',//需要填充图片,配置image ...
Echarts地图添加引导线效果(labelLine)
最近有粉丝问我能不能出个案例:地图上的地区文字,或其他标示类的图层,因为区块面积相对太小,想放在地图之外,通过labelLine连接到对应的区块上.今天就分享一个类似简单的案例,铺设散点形式铺设lab ...
ECharts地图应用图片定位
function CityMaptwo(){ var qmyChartCity = echarts.init(document.getElementById('boxMap')); ...
高德地图添加图片覆盖物，限制拖拽缩放范围
第一步 : 初始化地图 // 创建地图creatMap() {this.map = new AMap.Map("mapView", {rotateEnable: true,pit ...
echarts 地图添加纹理贴图
// 初始化地图 this.$echarts.registerMap("zj", zj); // 获取dom节点 var openingChart = this.$echarts. ...
echarts坐标轴添加图片
"水精帘动微风起,满架蔷薇一院香" 先上图,看结果: 如上图,4月和7月下有个红色图片,那是预警的. 需求是这样的:如果这个月的办理量比上个月降了50%就需要预警,也就是环比预警. ...
Echarts地图实现散点配置
关于Echarts地图添加散点,以及地图label的显示,记录如下: 需求: 关于这个地图的需求: 地图label上体现对比效果,差值大于0 红色,小于0 绿色散点图要求涟漪效果,并默认只展示TOP ...
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图
前言最近几天用echarts做中国地图,就把以前写的demo:在vue中实现中国地图拿来用,结果到项目里直接报错了,后来发现是因为版本的问题,没办法只能从头进行踩坑了.以下内容基于vue3 和 e ...
ECharts Title文字前添加图片
项目需要被逼无奈开始了对ECharts研究和使用问题:在ECharts Title前添加图片废话不多说,直接上代码 : title: {text: ' {a| 动态数据}',show: true, ...
echarts 环状图中添加图片
echarts 环状图中添加图片由于业务需要,我们可以在饼图内加入图片.图标或文字等让单调的饼图变得美观,这里我是在环状图里添加图片. 代码如下: option = {graphic: {//图形中 ...

echarts地图添加图片

echarts地图添加图片相关推荐

最新文章

热门文章