echarts 绘制地图流程

       

 

经过两天的研究终于有点起色，给大家分享一下吧。

1. 首先我是用json的方式引入世界地图，网上好多世界地图的json文件。没有的私信吧。同时也需要有一个翻译成中文的json文件。

2. 下载echarts依赖 

npm i echarts

 //或者

yarn add echarts

3. 利用json文件注册Map

echarts.registerMap('name',worldJson);

4. 然后就OK了

贴代码大家看：

 option = {
    tooltip: {
      trigger: "item",
      showDelay: 0,
      transitionDuration: 0.2,
    
    series: [
      {
        name: "世界地图",
        type: "map",
        mapType: "world", // 自定义扩展图表类型
        nameMap: chineseJson,  // 将英文转为中文
        zoom: 1.2, // 缩放
        scaleLimit: {
          min: 0.8,
        },
        data: [],
        emphasis: {
          label: {
            color: "#fff",  // 移入文字颜色
          },
          itemStyle: { // 移入区域颜色
            areaColor: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#00F6FF",
                },
                {
                  offset: 1,
                  color: "#87ADCB",
                },
              ],
            },
          },
        },
        select: {
          //这个就是鼠标点击后，地图想要展示的配置
          disabled: false, //可以被选中
          itemStyle: {
            //相关配置项很多，可以参考echarts官网
            areaColor: "yellow", //选中
          },
        },
        roam: false, // 禁止拖动
        itemStyle: { // 区域颜色
          areaColor: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00F6FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(87, 130, 246, 0.6)", // 100% 处的颜色
              },
            ],
          },
          borderColor: "rgba(87, 130, 246, 0.6)",  
          borderWidth: 1,
        },
      },
    ],
  };

文件没有的私信哦。