echars中国地图

vue中使用echars做出中国地图

这里只是个小demo，根据流程操作可以实现基础的中国地图，样式等后面根据需要自己去调

1.下载中国地图

echars官网示例中，没有中国地图的json，需要自己去下载

https://datav.aliyun.com/tools/atlas/index.html

 

 

2.修改地图json

将.json文件修改为.js，并在首行添加

export const chinaMapData =

 

3.在页面中引入.js地图文件

注意修改.js文件的路径

import {chinaMapData} from "@/utils/zhongguo.js";

4.将地图代码放入图表函数中

我这里放到了getChart: function() {}函数中

mounted() {
    this.$nextTick(() => {
      this.getChart();
    })
  },

  methods: {
    getChart: function() {
    
    }
  }

注意修改div的id

      var chartDom = document.getElementById('involved_region_div');
      var myChart = echarts.init(chartDom);
      var option;

      echarts.registerMap("china",chinaMapData);
      option = {
        title: {  //标题样式
          text: '涉案区域分布',
          x: "left",
          textStyle: {
              fontSize: 18
          },
        },
        tooltip: {
          formatter:function(params){//提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            return params.name+'<br />'+params.seriesName+'：'+ (params.value ? params.value:0);
          }
        },
        toolbox: {
          show: true,
          //orient: 'vertical',
          left: 'left',
          top: 'top',
          feature: {
            
          }
        },
        geo: {//地理坐标系组件
          map: 'china',//注册的地图名称
          roam: false,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          zoom: 1.2,//当前视角的缩放比例
          label: {//图形上的文本标签（显示地图省份）
              normal: {
                  show: true,
                  fontSize:'8',
                  color: 'rgba(0,0,0,0.7)'
              }
          },
          itemStyle: {
              normal:{
                  borderColor: 'rgba(0, 0, 0, 0.2)'//图形的描边颜
              },
              emphasis:{
                  areaColor: '#F3B329',
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
        },
        //dataRange 和 visualMap 都是根据数值展示不同的颜色，根据需要选择。dataRange：颜色块  visualMap：渐变色条
        /*
        dataRange: {//左下角，颜色块。
          x: 'left',
          y: 'bottom',
          splitList: [
              {start: 5000, label: '> 41  极高', color: '#b80909'},
              {start: 3000, end: 5000, label: '31 - 40  高', color: '#e64546'},
              {start: 2000, end: 3000, label: '21 - 30  中', color: '#f57567'},
              {start: 1000, end: 2000, label: '11 - 20  低', color: '#ff9985'},
              {start:0, end: 1000,label: '0 -10 无数据', color: '#ffe5db'}
          ]
        },
        */
        visualMap: {//左下角，渐变颜色条
          min: 0,
          max: 60,
          text: ["高", "低"],
          right: "5%",
          bottom: "10%",
          textStyle: {
            color: "#1E1E1E",
            map: "china",
          },
          inRange: {
            color: ['#E0FFFF', '#006EDD'],
          },
          show:true,
          calculable: true,
        }, 
        series: [
          {
            name: '涉案',
            type: "map",
            geoIndex: 0,
            emphasis: {
              label: {
                show: true,
              }
            },
            data: [
              { name: "上海市", value: 23 },
              { name: "江苏省", value: 50 },
              { name: "山东省", value: 60 },
              { name: "安徽省", value: 10 },
            ]
          }
        ]
      };
      option && myChart.setOption(option);

5.效果