vue使用地图

1，安装指定版本：

npm install echarts@4.9.0 --save
1
4.9版本下有地图，5.0版本以上失去这个功能，想要别的版本把@后的版本号改掉就行。
2，安装过之后按照顺序先引用echarts再引用地图

import echarts from 'echarts';
import 'echarts/map/js/china.js';

3,

<div :style='{height: "100%", width:"100%"}' id="myChart" ></div>
 mounted () {
  
      this.drawLine()
    },
  drawLine(){
        let charts = this.$echarts.init(document.querySelector(`#myChart`));
     charts.setOption({
       backgroundColor: "#FFFFFF",
       title: {
         text: "",
         subtext: "",
         x: "center"
       },
       tooltip: {
         trigger: "item"
       },
 
       //左侧小导航图标
       visualMap: {
         min: 0,
         max: 600,
         text: ["高", "低"],
         inRange: {
           color: ["#D8FAFE", "#006EDD"]//此处是设置颜色过渡
         }
       },
 
       //配置属性
       series: [
         {
           name: "报名人数",
           type: "map",
           mapType: "china", // ---此处是中国地图样式-------需要注意：省份中应使用汉字即如 ‘mapType:"河南"’
           roam: true,
           label: {
             normal: {
               show: false //省份名称----你可以选择true，展示每个省份的名称
             },
             emphasis: {
               show: false
             }
           },
           data: [//这是数据，500以内的随机数
             { name: "北京", value: "100" },
             { name: "天津", value: Math.round(Math.random() * 500) },
             { name: "上海", value: Math.round(Math.random() * 500) },
             { name: "重庆", value: Math.round(Math.random() * 500) },
             { name: "河北", value: Math.round(Math.random() * 500) },
             { name: "河南", value: Math.round(Math.random() * 500) },
             { name: "云南", value: Math.round(Math.random() * 500) },
             { name: "辽宁", value: Math.round(Math.random() * 500) },
             { name: "黑龙江", value: Math.round(Math.random() * 500) },
             { name: "湖南", value: Math.round(Math.random() * 500) },
             { name: "安徽", value: Math.round(Math.random() * 500) },
             { name: "山东", value: Math.round(Math.random() * 500) },
             { name: "新疆", value: Math.round(Math.random() * 500) },
             { name: "江苏", value: Math.round(Math.random() * 500) },
             { name: "浙江", value: Math.round(Math.random() * 500) },
             { name: "江西", value: Math.round(Math.random() * 500) },
             { name: "湖北", value: Math.round(Math.random() * 500) },
             { name: "广西", value: Math.round(Math.random() * 500) },
             { name: "甘肃", value: Math.round(Math.random() * 500) },
             { name: "山西", value: Math.round(Math.random() * 500) },
             { name: "内蒙古", value: Math.round(Math.random() * 500) },
             { name: "陕西", value: Math.round(Math.random() * 500) },
             { name: "吉林", value: Math.round(Math.random() * 500) },
             { name: "福建", value: Math.round(Math.random() * 500) },
             { name: "贵州", value: Math.round(Math.random() * 500) },
             { name: "广东", value: Math.round(Math.random() * 500) },
             { name: "青海", value: Math.round(Math.random() * 500) },
             { name: "西藏", value: Math.round(Math.random() * 500) },
             { name: "四川", value: Math.round(Math.random() * 500) },
             { name: "宁夏", value: Math.round(Math.random() * 500) },
             { name: "海南", value: Math.round(Math.random() * 500) },
             { name: "台湾", value: Math.round(Math.random() * 500) },
             { name: "香港", value: Math.round(Math.random() * 500) },
             { name: "澳门", value: Math.round(Math.random() * 500) }
           ] //数据
         }
       ]
     }),
     window.addEventListener("resize", function() {
       charts.resize();
     })
    },

image.png