charts地图

98 阅读1分钟

引入地图js

import { world } from "world.js)"

在echarts中注入地图

echarts.registerMap("world", world);
let WorldMap = echarts.init(this.$refs.WorldMap);

配置地图属性:

WorldMap.setOption({

  title: {

    text: "世界地图",

    top: "3%",

    left: "center",

    textStyle: {

      fontSize: 20,

      fontWeight: 600,

      color: "#fff",

    },

  },

  tooltip: {

    // 触发类型, 数据项图形触发

    trigger: "item",

    backgroundColor: "#fff",

    textStyle: {

      color: "#000",

    },

   

  },

  series: [

    {

      type: "map",

      /* 这里的map值需要和registerMap注册的名字相一致 */

      map: "world",

      roam: true, //是否开启鼠标缩放和平移漫游

      geoIndex: 0, // 不可缺少,否则无tooltip 指示效果

      label: {

        normal: {

          show: true, //显示省份标签

          textStyle: { color: "#fff" }, //省份标签字体颜色

        },

        emphasis: {

          //对应的鼠标悬浮效果

          show: true,

          textStyle: { color: "#fff" },

        },

      },

      itemStyle: {

        normal: {

          borderWidth: 1.95, //区域边框宽度

          borderColor: "#0550c3", //区域边框颜色

          areaColor: "#000", //区域颜色

        },



        emphasis: {

          borderWidth: 1.95, //鼠标滑过区域,区域边框宽度

          borderColor: "#fff", //鼠标滑过区域,区域边框颜色

          areaColor: "#ff6511", //鼠标滑过区域背景色

        },

      },

      /* data:[{}] */

    },

  ],

});

window.WorldMap = WorldMap;

},

};