echarts 绘制中国地图（中英文转换）

echarts 绘制中国地图

**1.引入echarts**	
	 npm install echarts
	 import echarts from 'echarts'

**2.引入地图china.js(网上自行搜索下载吧)**
**3.编写代码**
	准备chart对象，dataMap数据
	// dataMap: [
  //   { name: "北京", value: "100" },
  //   { name: "天津", value: this.randomData() },
  //   { name: "上海", value: this.randomData() },
  //   { name: "重庆", value: this.randomData() },
  //   { name: "河北", value: this.randomData() },
  //   { name: "河南", value: this.randomData() },
  //   { name: "云南", value: this.randomData() },
  //   { name: "辽宁", value: this.randomData() },
  //   { name: "黑龙江", value: this.randomData() },
  //   { name: "湖南", value: this.randomData() },
  //   { name: "安徽", value: this.randomData() },
  //   { name: "山东", value: this.randomData() },
  //   { name: "新疆", value: this.randomData() },
  //   { name: "江苏", value: this.randomData() },
  //   { name: "浙江", value: this.randomData() },
  //   { name: "江西", value: this.randomData() },
  //   { name: "湖北", value: this.randomData() },
  //   { name: "广西", value: this.randomData() },
  //   { name: "甘肃", value: this.randomData() },
  //   { name: "山西", value: this.randomData() },
  //   { name: "内蒙古", value: this.randomData() },
  //   { name: "陕西", value: this.randomData() },
  //   { name: "吉林", value: this.randomData() },
  //   { name: "福建", value: this.randomData() },
  //   { name: "贵州", value: this.randomData() },
  //   { name: "广东", value: this.randomData() },
  //   { name: "青海", value: this.randomData() },
  //   { name: "西藏", value: this.randomData() },
  //   { name: "四川", value: this.randomData() },
  //   { name: "宁夏", value: this.randomData() },
  //   { name: "海南", value: this.randomData() },
  //   { name: "台湾", value: this.randomData() },
  //   { name: "香港", value: this.randomData() },
  //   { name: "澳门", value: this.randomData() },
  //   { name: "南海诸岛", value: this.randomData() }
  // ],
randomData() {
  return Math.round(Math.random() * 500);
},
**4.渲染地图**
	// 中国地图
drawChinaMap() { 
  this.chart = this.$echarts.init(document.getElementById("chinaMap"));
  this.chart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        var info =
          '<p style="font-size:16px">' +
          params.name +
          "<br/>" +
          this.$t('public.number')+'：' +
          params.value;
        return info;
      },
      textStyle: { color: "#fff" } //提示标签字体颜色
    },
    //左侧小导航图标
    visualMap: {
      show: true,
      x: "left",
      y: "bottom",
      left: "left",
      min: 0,
      max: 100,
      splitList: [
        { start: 40, end: 100 },
        { start: 30, end: 40 },
        { start: 20, end: 30 },
        { start: 10, end: 20 },
        { start: 0, end: 10 },
      ],
      //左下角范围
      inRange: {
        color: ["#ffffff", "#e4736f"],
      },
      text: ["High", "Low"],
      calculable: true,
      // color: [
      //   "#5475f5",
      //   "#9feaa5",
      //   "#85daef",
      //   "#74e2ca",
      //   "#e6ac53",
      //   "#9fb5ea",
      // ]
    },
    grid: {
      right: 10,
      top: "3%",
      width: "20%"
    },
    series: [
      {
        // name: "中国",
        type: "map",
        aspectScale:1,
        zoom:1.23,
        mapType: "china",
        itemStyle: {
        normal: {
            areaColor: 'lightblue',
            borderColor: 'rgba(0, 0, 0, 0.2)'
        }
        },
        label: {
          normal: {
            textStyle: {
              fontSize: 11
            },
            //show: true //显示省份标签
          },
          emphasis: {
            show: true //对应的鼠标悬浮效果
          }
        },
        data: this.dataMap,
        nameMap: this.nameMap,
        nameProperty:'name'
      }
    ],
    geo: {
      // roam: true,
      map: "china",
      right: "right",
      left: "right",
      // layoutSize: '80%',
      
      label: {
        emphasis: {
        }
      },
      itemStyle: {
        borderColor: 'rgba(0, 0, 0, 0.2)',
        emphasis: {
          // areaColor: "#fff464"
        }
      }
    }
  });
  window.addEventListener("resize", this.resizeHandler, true);
},
**5.参数重点说明**
	nameMap这个属性配置是用于中英文转换的:
		①在中文情况下，不需要做处理
		②在英文情况下，返回的数据是

因此需要一组与此对应的中文数据，放在nameMap中，实现中英文转换（此处对应的是name）。

情人节两更，估计也没啥人看，就当自己记笔记了。