vue中使用ECharts实现中国地图配置详解（配官方配置地址）

最新推荐文章于 2025-07-03 18:57:37 发布

winne雪

最新推荐文章于 2025-07-03 18:57:37 发布

阅读量2.3w

点赞数 29

CC 4.0 BY-SA版权

分类专栏： ECharts 文章标签： ECharts vue 中国地图

本文链接：https://blog.csdn.net/m0_38134431/article/details/92405797

前言：

1、实现自定义左下角的视觉映射组件（包括自定义颜色、文字、图元大小）
2、实现自定义悬浮提示框
如下图所示：
在这里插入图片描述

实现步骤：

一、在vue中安装echarts

1、npm install echarts

二、在vue组件中使用echarts

1、在组件中先引入echarts
import echarts from 'echarts' // 引入echarts中国地图数据
2、在组件中引入中国地图数据
require('echarts/map/js/china')
ps：地图类的echarts实现是需要额外引入地图数据了。
见官网：https://echarts.baidu.com/option.html#geo.map

3、在组件页面内定一个标签来渲染地图

<div id="china_map" style='width:600px;height:400px;'> </div>

4、初始化 echarts 实例和指定配置参数
我一般是在mounted生命周期函数中进行初始化地图表格数据的。

mounted () {
   
   
  // 初始化echarts实例
  this.chinachart = echarts.init(document.getElementById('china_map'))
  // 进行相关配置
  this.chartOption = {
   
    
    tooltip: {
   
    // 鼠标移到图里面的浮动提示框
     // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
      formatter (params, ticket, callback) {
   
    
        // params.data 就是series配置项中的data数据遍历
        let localValue,
          perf,
          downloadSpeep,
          usability,
          point
        if (params.data) {
   
   
          localValue = params.data.value
          perf = params.data.perf
          downloadSpeep