echarts绘制中国地图

我使用的是echarts 4, 在vue中使用需要导入 一个文件

import "echarts/map/js/china.js";

直接上代码，可以直接复制到echart官网在线编辑器中查看效果

// 配置项
let data = [
    "河北",
    "山东",
    "辽宁",
    "黑龙江",
    "甘肃",
    "吉林",
    "青海",
    "河南",
    "江苏",
    "湖北",
    "湖南",
    "浙江",
    "江西",
    "广西",
    "广东",
    "云南",
    "福建",
    "台湾",
    "海南",
    "山西",
    "四川",
    "陕西",
    "贵州",
    "安徽",
    "重庆",
    "宁夏",
    "内蒙古",
    "新疆",
    "西藏",
    "南海诸岛",
    "北京",
    "天津",
  ];
  data = data.map((v, i) => {
    return {
      name: v,
      selected: i === 0,
      value: i,
    };
  });

  option = {
    tooltip: {
      show: false,
    },
    background:'red',
    geo: {
      show: true,
      map: 'china',
      label: {
        show: false
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#000',
          borderWidth: 3, //设置外层边框
          borderColor: '#7BC2DE',
        },
        emphasis: {
          show: false,
          // areaColor: '#01215c'
        }
      }
    },
    series: [{
      type: 'map',
      mapType: 'china',
      label: {
        position: 'insideRight',
        normal: {
          show: false,//显示省份标签
          textStyle: { color: "red" },//省份标签字体颜色,
        },
        emphasis: {//对应的鼠标悬浮效果
          formatter: '{b}\n{number|{c}}',
          color: '#FBFFFF',
          fontSize: 15,
          rich: {
            number: {
              fontSize: 20,
              fontWeight: 600,
            }
          }
        }
      },
      itemStyle: {
        normal: {
          borderWidth: .5,//区域边框宽度
          borderColor: '#38718E',//区域边框颜色
          areaColor: "#225D75",//区域颜色
        },
        emphasis: {
          borderWidth: .5,
          borderColor: '#7BC2DE',
          areaColor: "#7BC2DE",
        }
      },
      data: data
    }]
  };

echarts最近出5.0.1了，官网也换了，上面的例子在新的官网上运行不显示图表的，可以去旧官网运行即可查看效果