vue中使用echarts实现地图自定义浮窗内容及样式

芝士焗红薯

已于 2022-05-31 17:34:07 修改

阅读量7.4k

点赞数 7

分类专栏： # echarts 前端文章标签： echarts vue.js javascript

于 2022-05-26 18:02:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44320032/article/details/124988930

版权

本文介绍了如何在Vue项目中利用ECharts实现地图功能，并自定义浮窗内容和样式。首先从DataV.GeoAtlas下载地图文件，然后全局导入ECharts并创建地图容器。通过配置backgroundColor、tooltip、formatter和series属性，实现鼠标悬浮时显示定制的浮窗数据。在formatter中，根据params.data.value获取所需数据，展示kjnumber和ljnumber。最后展示了实现效果和完整代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需要用到地图，echarts本来是有地图的，但是5.0版本之后就没有了，所以如果要用echarts中的地图，需要下载5.0版本之前的地图。

项目需要在点击某一地区，就出现该地区指定的数据。

1.首先导入echarts

（需要全局导入，全局导入可以看之前的文章vue项目引入element ui、iview和echarts_芝士焗红薯的博客-优快云博客，使用到echarts的页面还需要单独引入）和地图，我这里用的地图是在DataV.GeoAtlas地理小工具系列这个网站下载的。

<script>
import * as echarts from 'echarts'
import zhongguo from '../../assets/mapjson/jsmap'
</script>

2.在页面上创建一个div放置地图

<Col span="12">
  <div style="margin-top: 10px;margin-left:20px;">
    <span style="font-weight: bold;">江苏省地图</span>
  </div>
  <div ref="charts" style="width: 700px; height: 600px"></div>
</Col>

3.调用地图的方法

created () {
  this.$nextTick(() => {
    this.initCharts()
  })
},
mounted () {
  this.initCharts()
 },

4.地图方法

backgroundColor：地图的背景颜色

tooltip：鼠标移动/点击会出现的浮窗样式

formatter：自定义浮窗数据

最低0.47元/天解锁文章