vue echarts实现中国地图

 echarts安装：

npm install echarts --save

在main.js中引用

//  引入Echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts 

引入中国地图的js

require('echarts/map/js/china.js')

require('echarts/map/js/world.js')

 可以去这里下载所需要的地图数据地理小工具

创建一个地图容器

<div id="china_map" class="ditu" style="width: 50vw; height: 30vw"></div>

 js实现

 mounted() {
    this.getMapChart();
  },
  methods: {
    // 地图
    getMapChart() {
      this.myChart = this.$echarts.init(document.getElementById("china_map"));
      // 地图配置项
      var option = {
        tooltip: { //自定义鼠标悬停之后弹窗的样式
          className: "custom-tooltip-bk-box",
          triggerOn: "mousemove", // 鼠标移动时触发
          axisPointer: {
            type: "none",
          },
          // 鼠标移到图里面的浮动提示框
          // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
          formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let deptTotal, schoolTotal, studentTotal;
            if (params.data) {
              deptTotal = params.data.value;
              schoolTotal = params.data.schoolTotal;
              studentTotal = params.data.studentTotal;
            } else {
              // 为了防止没有定义数据的时候报错写的
              deptTotal = 0;
              schoolTotal = 0;
              studentTotal = 0;
            }
            let htmlStr = `
              <div class="custom-tooltip-box">
                <div style='font-size:16px;'>河南：9</div>
                <div>
                  <div style='font-size: 16px;margin-top:6px; display:flex;align-items: center;'>
                    <p>学校数量</p>
                    <p style="margin-left: 30px;"><span style='color:#FFA500'>27</span>所</p>
                  </div>
                  <div style='font-size: 16px; display:flex;align-items: center;'>
                    <p>学生数量</p>
                    <p style="margin-left: 30px;"><span style='color:#4FF8FF'>6602</span>个</p>
                  </div>
                </div>
              </div>
            `;
            return htmlStr;
          },
          backgroundColor: "rgba(255,255,255,0)", //提示标签背景颜色
          textStyle: { color: "#fff" }, //提示标签字体颜色
        },
        visualMap: [
          {
            //颜色的设置  dataRange
            show: false,
            itemSymbol: "circle",
            left: 120,
            top: 0,
            splitList: [
              { start: 11, color: "lightskyblue", label: ">5000" },
              { start: 5, end: 10, color: "#F04B5F", label: "1000-500" },
              { start: 3, end: 4, color: "#1AABFF", label: "100-1000" },
              { start: 1, end: 2, color: "#FF9B50", label: "1-100" },
              { start: 0, end: 0, label: "暂无数据", color: "#196392" },
            ],
            textStyle: {
              color: "#fff",
            },
          },
        ],
        // geo配置详解： https://echarts.baidu.com/option.html#geo
        geo: {
          // 地理坐标系组件用于地图的绘制
          map: "china", // 表示中国地图
          roam: false, // 是否开启鼠标缩放和平移漫游
          // scaleLimit: { //滚轮缩放的极限控制
          //     min: 1,
          //     max: 2
          // },
          zoom: 1.05, // 地图放大
          aspectScale: 0.9, //地图宽高比例
          label: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#2862B3", //设置区域颜色
              borderColor: "#8DC3F4", //设置各各省市边界颜色
              shadowOffsetX: 6,
              shadowOffsetY: 6,
              shadowBlur: 10,
              borderWidth: 1,
              shadowColor: "RGBA(164, 211, 253, 0.2)",
            },
            emphasis: { //鼠标悬停之后显示的样式
              color: "#ffffff",
              areaColor: "#1B4FB6",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: "", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
            type: "map",
            geoIndex: 0,
            label: {
              show: true,
            },
            // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接
            data: [],
          },
        ],
      };
      // 绘制图表
      this.myChart.setOption(option);
    }
}复制