vue项目中使用echarts 地图自定义图标

在开发过程中，需要做一个数据可视化的大屏展示，其中有一个模块用到了 echarts的地图，自定义图标展示相关内容。

大概效果图如下：

步骤如下：

1.下载并引入echarts

npm install echarts --save

在需要的使用echarts的文件中引入

import echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
import imgUrl from '@/assets/images/qiye.png' //引入自定义图标的图片，后面会用到

2.获取dom元素，创建option

let res_data=[{name1: "张三丰让那个公司",coordinates: [120.571526,31.350885],value: {yanglao: {count: 384,base: 4324,Should: 738.98,already: 738.98},yiliao: {count: 384,base: 4324,Should: 738.98,already: 738.98}}},{name1: "李四的公司",coordinates: [120.587049,31.34299],value: {yanglao: {count: 384,base: 4324,Should: 738.98,already: 738.98},yiliao: {count: 384,base: 4324,Should: 738.98,already: 738.98}}},{name1: "王五的公司",coordinates: [120.63721,31.366796],value: {yanglao: {count: 384,base: 4324,Should: 738.98,already: 738.98},yiliao: {count: 384,base: 4324,Should: 738.98,already: 738.98}}}, {name1: "钱老的公司",coordinates: [120.64799,31.428812],value: {yanglao: {count: 324,base: 4624,Should: 738.98,already: 738.98},yiliao: {count: 384,base: 4324,Should: 738.98,already: 738.98}}}, {name1: "hei 责任公司",coordinates: [120.667825,31.319547],value: {yanglao: {count: 324,base: 4624,Should: 738.98,already: 738.98},yiliao: {count: 384, base: 4324,Should: 738.98,already: 738.98}}}]
let ginsengMap = echarts.init(document.getElementById('ginsengMap'))
let option = {title: {text: '标题的文字内容',left: 'center',top: '0',textStyle: {fontSize: 14,fontWeight: 400,color: "rgb(37,234,255)"}},tooltip: {transitionDuration: 0,trigger: 'item',formatter: function (val) {    //返回tooltip的内容及布局样式let obj = val.data.valuereturn `<div style="padding:0 20px"><h5 style="color:#D4A41D;font-size:18px">${val.data.name1}</h5><h6 style="color:#9FD7FC;font-size:16px;margin:5px 0;">缴费数目</h6><ul ><li>人数：${obj.yanglao.count}位</li><li>缴费基数：${obj.yanglao.base}元</li><li>本期应缴：${obj.yanglao.Should}万元</li><li>本期已缴：${obj.yanglao.already}万元</li></ul><h6 style="color:#9FD7FC;font-size:16px;margin:5px 0;">保险</h6><ul><li>人数：${obj.yiliao.count}位</li><li>缴费基数：${obj.yanglao.base}元</li><li>本期应缴：${obj.yanglao.Should}万元</li><li>本期已缴：${obj.yanglao.already}万元</li></ul></div>`},},bmap: {center: [120.648278, 31.373826],  //地图的中心点zoom: 12,    //地图的等级roam: true,mapStyle: {  //地图的样式，可根据需要配置style: "midnight",}},series: [{name: '这些点的分布分布',type: 'custom',  //type的值为'custom'时，表示自定义图标coordinateSystem: 'bmap',data: res_data,renderItem(params, api) {let coordinates = res_data[params.dataIndex].coordinates //把坐标数据取出来//具体实现自定义图标的方法return {type: 'image',style: {image: imgUrl, // 自定义的图片地址（上面引入，也可直接写图片的网络地址）x: api.coord(coordinates)[0], // 图标的经度    必须使用 api.coord（）方法对坐标进行转化之后位置才正确y: api.coord(coordinates)[1], //图标的纬度width: 32, // 图标大小设置height: 32,},};},}]}ginsengMap.setOption(option)

欢迎访问个人博客歌洞章

vue项目中使用echarts 地图自定义图标相关推荐

Vue项目中使用Echarts地图（精确到区）
使用地图需要获取地图的json文件这里是免费获取地图json 在原本Echarts图变中你看到的代码是这样的: var uploadedDataURL = "https://geo.dat ...
vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇. 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排 ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示文章目录 0.前言 1.引用模块 2.界面设计 3.数据准备 4.实例地图 5.动态修改气泡图标 6.结束语 0.前言实现的效果 ...
在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答代码我放在了gith ...
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
vue项目中使用百度地图轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...

vue项目中使用echarts 地图自定义图标

vue项目中使用echarts 地图自定义图标

大概效果图如下：

步骤如下：

1.下载并引入echarts

2.获取dom元素，创建option

vue项目中使用echarts 地图自定义图标相关推荐

最新文章

热门文章

vue项目中使用echarts 地图 自定义图标

vue项目中使用echarts 地图 自定义图标

大概效果图如下：

步骤如下：

1.下载并引入echarts

2.获取dom元素，创建option

vue项目中使用echarts 地图 自定义图标相关推荐

最新文章

热门文章

vue项目中使用echarts 地图自定义图标

vue项目中使用echarts 地图自定义图标

vue项目中使用echarts 地图自定义图标相关推荐