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

最新推荐文章于 2025-05-05 16:59:53 发布

原创最新推荐文章于 2025-05-05 16:59:53 发布 · 2k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#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>