vue+echartmap离线地图

有的项目不允许访问外网，所以有的地图需要验证自己申请好的key就不能用了，要自己用canvas画，这里echart都有现成的，结合echartmap进行配置就行了：整合到vue项目中

需要加载一个china.js文件，如果地图有覆盖物或者需要指定城市坐标，额外引入些经纬度坐标。

index.html 加入：

<script src="/static/china.js"></script>

comlixianmap:

<template>
  <div>
    <div
      id="main"
      style="width: 680px; height: 420px;"
      class="mapbox"
    ></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "./china";
import province from "./province";
import mycityjsondata from "./city";
import img from '@/assets/agent.jpg'
var geoCoordMap = {};
var convertData = [];
// var img2 = () => import("/static/icons/duihuakuang.png")

var max = 480,
  min = 9; // todo
var maxSize4Pin = 100,
  minSize4Pin = 20;
export default {
    props:{
        ajaxdata:{
            default:function(){
                return  [
        { name: "北京", value: 177 },
        { name: "天津市", value: 42 },
        { name: "河北省", value: 102 },
        { name: "山西省", value: 81 },
        { name: "内蒙古省", value: 47 },
        { name: "辽宁省", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海市", value: 24 },
        { name: "江苏省", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 },
      ]
            }
        },
    },
  data() {
    return {
        myChart:null,
        option:null,
        convertData:null,
      data: [
        { name: "北京市", value: 177 },
        { name: "天津市", value: 42 },
        { name: "河北省", value: 102 },
        { name: "山西省", value: 81 },
        { name: "内蒙古省", value: 47 },
        { name: "辽宁省", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海市", value: 24 },
        { name: "江苏省", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 },
      ],
      dataList: [
        { name: "南海诸岛" },
        { ename: "beijing", name: "北京" },
        { ename: "tianjin", name: "天津" },
        { ename: "shanghai", name: "上海" },
        { ename: "chongqing", name: "重庆" },
        { ename: "hebei", name: "河北" },
        { ename: "henan", name: "河南" },
        { ename: "yunnan", name: "云南" },
        { ename: "liaoning", name: "辽宁" },
        { ename: "heilongjiang", name: "黑龙江" },
        { ename: "hunan", name: "湖南" },
        { ename: "anhui", name: "安徽" },
        { ename: "shandong", name: "山东" },
        { ename: "xinjiang", name: "新疆" },
        { ename: "jiangsu", name: "江苏" },
        { ename: "zhejiang", name: "浙江" },
        { ename: "jiangxi", name: "江西" },
        { ename: "hubei", name: "湖北" },
        { ename: "guangxi", name: "广西" },
        { ename: "gansu", name: "甘肃" },
        { ename: "shanxi", name: "山西" },
        { ename: "neimenggu", name: "内蒙古" },
        { ename: "shanxi1", name: "陕西" },
        { ename: "jilin", name: "吉林" },
        { ename: "fujian", name: "福建" },
        { ename: "guizhou", name: "贵州" },
        { ename: "guangdong", name: "广东" },
        { ename: "qinghai", name: "青海" },
        { ename: "xizang", name: "西藏" },
        { ename: "sichuan", name: "四川" },
        { ename: "ningxia", name: "宁夏" },
        { ename: "hainan", name: "海南" },
        { name: "台湾" },
        { ename: "xianggang", name: "香港" },
        { ename: "aomen", name: "澳门" },
      ],
      toolTipData: [
        // {
        //   name: "北京",
        //   value: [
        //     { name: "文科", value: 95 },
        //     { name: "理科", value: 82 },
        //   ],
        // },
       
      ],
    };
  },
  mounted() {
  
    this.testchart();
  },
  methods: {
    destr(){
            this.myChart.dispose();
    //     this.myChart.clear();
    },
    testchart() {
      this.myChart = echarts.init(document.getElementById("main"));
      var mapFeatures = echarts.getMap("china").geoJson.features;
      // var mapFeatures = province
     
      mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
   
      });
      // convertData 地图
      this.convertData = function(){
        const res =[]
            for (var i = 0; i < this.ajaxdata.length; i++) {
                var geoCoord = geoCoordMap[this.ajaxdata[i].name];
                // console.log(this.data[i])
                if (geoCoord) {
                res.push({
                    name: this.ajaxdata[i].name,
                    value: geoCoord.concat(this.ajaxdata[i].value),
                });
                }
               
            }
        return res    
      }
      //  option
      this.option = {
        tooltip: {// 默认地图鼠标移入显示 省份显示
          show:true,
          trigger: "item",
          formatter: function (params) {
              var toolTiphtml = params.name;
              return toolTiphtml;
          },
        },
        visualMap: { // 指标图
          show: false,
          min: 0,
          max: 200,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
           
            color: ['#1488CC', '#2B32B2'] // 浅蓝
           
          },
        },
        geo: {
          show: true,
          map: 'china',
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#ccc",
              borderColor: "#f2f2f2",
            },
            emphasis: {
              areaColor: "#f4f4f4",
            },
          },
        },

        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: this.convertData(this.ajaxdata),
            symbolSize:5,
            
            label: {
              normal: {
                formatter: (v)=>{
                    return v.name
                },
                position: "left",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#05C3F9",
              },
            },
          
          },
        //   {
        //     type: "map",
        //     map: 'china',
        //     geoIndex: 0,
        //     aspectScale: 0.75, //长宽比
        //     showLegendSymbol: false, // 存在legend时显示
        //     label: {
        //       normal: {
        //         show: true,
        //       },
        //       emphasis: {
        //         show: false,
        //         textStyle: {
        //           color: "#fff",
        //         },
        //       },
        //     },
        //     roam: true,
        //     itemStyle: {
        //       normal: {
        //         areaColor: "#031525",
        //         borderColor: "#3B5077",
        //       },
        //       emphasis: {
        //         areaColor: "#2B91B7",
        //       },
        //     },
        //     animation: false,
        //     data: this.ajaxdata,
        //   },
          {
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: 'pin', //气泡
            // symbolSize: function (val) {
            //   var a = (maxSize4Pin - minSize4Pin) / (max - min);
            //   var b = minSize4Pin - a * min;
            //   b = maxSize4Pin - a * max;
            //   return a * val[2] + b;
            // },
            // label: {
            //   normal: {
            //     show: true,
            //      formatter: (v)=>{
            //         console.log('vvvvvv',v)
            //         return v.value[2] + '%'
            //     },
            //     textStyle: {
            //       color: "#fff",
            //       fontSize: 9,
            //     },
            //   },
            // },
            itemStyle: {
              normal: {
                color: "#F62157", //标志颜色
              },
            },
            symbolSize:18,
            zlevel: 6,
            data: this.convertData(this.ajaxdata),
          },
          {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                var name = params.data.name;
                                var value = params.data.value[2];
                                // var text = `{fline|${value}}\n{tline|${name}}`;
                                var text = `{fline|${value+"%"}}`;
                                return text;
                            },
                            rich: {
                                fline: {
                                    padding: [4, 8],
                                    color: '#3491FA',
                                    // borderColor:'#3491FA',
                                    // borderWidth:1,
                                    textShadowColor: '#030615',
                                    textShadowBlur: '0',
                                    textShadowOffsetX: 1,
                                    textShadowOffsetY: 1,
                                    fontSize: 12,
                                    fontWeight: 400,
                                    background:'red'
                                },
                                // tline: {
                                //     padding: [0, 27],
                                //     color: '#ABF8FF',
                                //     fontSize: 12,
                                // },
                            },
                        },
                        emphasis: {
                            show: true,
                        },
                    },
                    
                    itemStyle: {
                        normal:{
                            color: '#E8F7FF',
                         
                        }
                    },
                    symbol:'RoundRect',
                     borderColor:'#3491FA',
                                    borderWidth:1,
                    symbolSize: [50, 20],

                    symbolOffset: [0, -26],
                    z: 999,
                    data: this.convertData(this.ajaxdata),
                },
        ],
      };
      this.myChart.setOption(this.option)
    },
    initEchart() {
      let dataList = this.dataList;
      for (let i = 0; i < dataList.length; i++) {
        dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
      }
      const _this = this;
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        tooltip: {
          //数据格式化
          formatter: function (params, callback) {
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            );
          },
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#e0ffff", "blue"], //取值范围的颜色
          },
          show: true, //图注
        },
        geo: {
          map: "china", //引入地图数据
          roam: false, //不开启缩放和平移
          zoom: 1, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              //高亮的显示设置
              areaColor: "skyblue", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        // 鼠标悬浮提示框
        series: [
          {
            name: "省份",
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click", function (params) {
        if (!params.data.ename) {
          alert("暂无" + params.name + "地图数据");
          return;
        }
        _this.$router.push({
          path: "/province",
          query: { provinceName: params.data.ename, province: params.name },
        });
      });
    },
  },
};
</script>
<style scoped lang="less">
.mapbox {
  height: "450px";
  width: "600px";
  margin: "400px";
}
</style>

series内可以分别配置地图上的不同绘制

 

如果做下钻可以点击添加地图事件然后获取指定值后重新渲染省份的或者切换省份组件即可完成，案例参考上篇下钻地图篇。