Vue2项目中echarts 导入地区.json文件生成中国地图

一、提前准备

1、在项目中安装 echarts

npm install echarts复制

或者: 

npm install echarts --save复制

2、引入 echarts 图表，可全局或按需引入。

 在项目中引入 ECharts - 入门篇 - 使用手册 - Apache ECharts

安装完后这里建议直接在main.js里面引入并绑定在Vue原型上，因为可以不用每次在别的组件里面使用echarts的时候都要 import echarts from 'echarts'

具体方法就是：

​ 1、在main.js中引入echarts ：import * as echarts from 'echarts'

​ 2、绑定到原型上 ：Vue.prototype.$echarts = echarts

​ 以后需要用的时候就是直接 ： this.$echarts

3、提前下载好需要的.json文件，例如我在下面用到的是，中国的地图文件 china.json。

二、页面渲染数据

1、创建dom元素

<template>
  <div id="map" style = "width:800px;height:600px"></div>
</template>复制

2、初始化数据和渲染

引入china.json文件

初始化：let myCharts = this.$echarts.init(document.getElementById('map'))

     var option = {}

直接给 option 添加属性，让它可以读取地图数据

最后渲染 echarts ， myCharts.setOption(option)即可。

<script> 
import china from '@/utils/china.json'
export default {
  name: 'map',
  data() {
    return {
      // option 也可以在这里定义
    }
  },
  mounted() {
    this.$echarts.registerMap('china', china)
    let myCharts = this.$echarts.init(document.getElementById('map'))
    var option = {
        geo: {
          type: 'map',
          map: 'china',
          roam: true,
          zoom: 1.2,
          label: {
            show: true,
          }
        },
    }
    myCharts.setOption(option)
  }
 
}
</script>复制

3、Demo -----这里可以设置一些配置项参数

<script>
import china from '@/utils/china.json'
export default {
  name: 'map',
  data() {
    return {
      // 为每个省份设置颜色的映射
      provinceColors: {
        '北京': '#ff6347',
        '天津': '#87cefa',
        '上海': '#98fb98',
        '重庆': '#f0e68c',
        '新疆': '#95249b',
        '西藏': '#793229',
        '青海': '#40b883',
        '甘肃': '#e44d27',
        '内蒙古': '#6d6725',
        '黑龙江': '#cbb71f',
        '四川': '#0a551c',
        '云南': '#06930d',
        '宁夏': '#d2a8ff',
        '山西': '#030380',
        '贵州': '#856841',
        '山东': '#fcb957',
        '湖北': '#474747',
        '湖南': '#f0e68c',
        '广西': '#f0e68c',
        '广东': '#f0e68c',
        // 可以继续添加其他省份的颜色
      }
    }
  },
  mounted() {
    this.$echarts.registerMap('china', china)
    let myCharts = this.$echarts.init(document.getElementById('map'))
    var option = {
      geo: {
        type: 'map',
        map: 'china',
        roam: true,// 允许能对地图进行缩放、拖动 的操作
        zoom: 1.2,// 地图按比例显示 ，例如 填 2 就是放大 2倍 显示 
        label: {
          show: true,// 展示各地区名称
        },
 
        // 设置每个省份的颜色
        regions: Object.keys(this.provinceColors).map(province => ({
          name: province,  // 省份名称
          itemStyle: {
            areaColor: this.provinceColors[province],  // 设置颜色
            borderColor: '#0da1e1',  // 边框颜色
            borderWidth: 1,  // 边框宽度
          },
        }))
      },
    }
    myCharts.setOption(option)
  }
 
}
</script>复制

4、效果图

三、推荐好用网址

Apache ECharts

https://blog.csdn.net/qq_45066453/article/details/129479541?ops_request_misc=%7B%22request%5Fid%22%3A%220376dddcbdaa20b5dd59aecbc9ab03e6%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=0376dddcbdaa20b5dd59aecbc9ab03e6&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-2-129479541-null-null.142^v100^pc_search_result_base6&utm_term=中国地图&spm=1018.2226.3001.4187文章浏览阅读7.2w次，点赞87次，收藏354次。使用Echarts绘制中国地图，其中地图点信息由JSON文件编写，前端html直接从JSON文件中读取地区数据，渲染到前端即可。详细介绍用到的各个功能！代码直接复制运行即可！_echarts中国地图https://blog.csdn.net/qq_45066453/article/details/129479541?ops_request_misc=%7B%22request%5Fid%22%3A%220376dddcbdaa20b5dd59aecbc9ab03e6%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=0376dddcbdaa20b5dd59aecbc9ab03e6&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-2-129479541-null-null.142^v100^pc_search_result_base6&utm_term=中国地图&spm=1018.2226.3001.4187