第一次用Echarts 被这个地图迷糊了好久，光有代码，就是不显示，为了给第一次使用的小白一个简单入门，

好了，废话不多说，直接上代码

        

         首先第一步，你想用Echarts，那就必须安装

        

npm install --save echarts

安装完成之后，你就可以在main.js中全局引入这个echarts了

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

这样进行引入，就可以在项目中直接使用了，使用的方法就是

先新建一个div   ，在div上标注一个唯一性的id，

 // // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("IUR"));
      // 绘制图表
      myChart.setOption({})

这样就可以在这个div块里面渲染一个图表了，一定要记住，设置宽高，不然就不显示了。

 

下面我们就用地图作为演示，先上地图的效果图

这是我做的中国地图，这只是大屏的一部分，主要说的就是这个地图

 

这有一个坑点，就是，如果你使用这个地图，必须要在全局还要引入一个东西

import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)//显示地图

就是这个，有了这个就可以渲染地图了。

接下来什么都准备好了，就可以开始写代码渲染页面了。

 drawLine() {
      let that = this;
      // // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("ALLimg"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            console.log(params);
          }
        },
        visualMap: [
          {
            min: 0,
            max: 300,
            seriesIndex: 0,
            align: "left",
            pieces: [
              { min: 0, max: 100, label: "非严重区" },
              { min: 100, max: 200, label: "较严重区" },
              { min: 200, max: 300, label: "严重区" }
            ],
            orient: "vertical",
            padding: [0, 25, 15, 0],
            itemGap: 18, //间隔

            // itemWidth:20,
            // itemSymbol: "arrow",          //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            show: true,
            x: "right",
            y: "bottom",
            icon: "circle",
            inRange: {
              color: ["#008cff", "#ecd220", "#f86705"]
            },
            textStyle: {
              color: "#fff"
            }
          },
          {
            min: 0,
            max: 300,
            show: false,
            splitNumber: 5,
            seriesIndex: 1,
            inRange: {
              color: ["#F5B16D", "#F09C42", "#EC870E", "#D0770B"]
            },
            textStyle: {
              color: "#fff"
            }
          }
        ],

        geo: {
          left: "10", //地图距离上下左右空白距离
          right: "10",
          zoom: 1, // 改变这个值的大小就可以了，越大地图越大，默认1
          map: "china",
          label: {
            emphasis: {
              show: false //不显示中间文字
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#246c89",
              borderColor: "#174456"
            },
            emphasis: {
              areaColor: "#234958"
            }
          }
        },

        series: [
          {
            name: "AQI",
            type: "scatter",
            // showAllSymbol: true,
            coordinateSystem: "geo",
            itemStyle: {
              normal: {
                show: false,
                color: "#fff"
              }
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "bottom",
                show: true, //显示圆点文字
                color: "#fff" //文字颜色
              },
              emphasis: {
                show: true
              }
            },
            data: this.convertData(this.baseDataList1)
          }
          //   {
          //     name: "AQI",
          //     type: "heatmap",
          //     pointSize: 6, // 设置 热力图 点 的大小
          //     blurSize: 6, // 设置点的 阴影半径
          //     coordinateSystem: "geo",
          //     itemStyle: {
          //       normal: {
          //         color: "orange"
          //       }
          //     },
          //     data: this.convertData(this.baseDataList2)
          //   }
        ]
      });
      myChart.on("mouseover", function(params) {
        console.log(params); //鼠标移动省显示的
      });
      myChart.on("click", function(param) {
        that.routpush(param);
        console.log(param); //鼠标点击省显示的
      });
    }

这是设置地图的主要方法具体缺少的那几个值，你们可以参考

  carname: "北京",
      num: 6, //同比上年异动数
      province: ["1", "4", "5"],
      enprestype: ["5", "6"],

      geoCoordMap: {
        北京: [116.4551, 40.2539],
        天津: [117.4219, 39.4189],
        河北: [114.5368, 38.0431],
        山东: [117.0263, 36.6773],
        山西: [112.569, 37.8798],
        黑龙江: [126.668, 45.7479],
        吉林: [125.3322, 43.9027],
        辽宁: [123.4379, 41.8418],
        内蒙古: [111.7728, 40.8231],
        新疆: [87.6341, 43.799],
        甘肃: [103.8329, 36.0656],
        青海: [97.7867, 36.627],
        宁夏: [106.2657, 38.4783],
        四川: [104.0823, 30.6571],
        西藏: [91.12406, 29.65343],
        陕西: [108.9607, 34.27181],
        河南: [113.7597, 34.77218],
        安徽: [117.3364, 31.7398],
        江苏: [118.7693, 32.06674],
        重庆: [106.558, 29.56914],
        湖北: [114.3481, 30.55275],
        上海: [121.4801, 31.2363],
        浙江: [120.1591, 30.272553],
        云南: [102.7164, 25.052068],
        贵州: [106.7119, 26.60612],
        湖南: [112.9902, 28.11841],
        江西: [115.8227, 28.64288],
        福建: [119.3015, 26.107029],
        广东: [113.2728, 23.138577],
        广西: [108.334, 22.821439],
        海南: [110.0057, 19.1190805],
        澳门: [113.5494, 23.20295],
        香港: [114.17774, 22.28315],
        台湾: [121.51561, 25.050003]}，
 baseDataList1: [
        { name: "北京", value: 100 },
        { name: "天津", value: 112 },
        { name: "河北", value: 112 },
        { name: "山东", value: 112 },
        { name: "山西", value: 114 },
        { name: "黑龙江", value: 100 },
        { name: "吉林", value: 16 },
        { name: "辽宁", value: 50 },
        { name: "内蒙古", value: 118 },
        { name: "新疆", value: 119 },
        { name: "甘肃", value: 21 },
        { name: "青海", value: 300 },
        { name: "宁夏", value: 121 },
        { name: "四川", value: 125 },
        { name: "西藏", value: 23 },
        { name: "陕西", value: 255 },
        { name: "河南", value: 298 },
        { name: "安徽", value: 25 },
        { name: "江苏", value: 245 },
        { name: "重庆", value: 125 },
        { name: "湖北", value: 125 },
        { name: "上海", value: 25 },
        { name: "浙江", value: 25 },
        { name: "云南", value: 126 },
        { name: "贵州", value: 26 },
        { name: "湖南", value: 247 },
        { name: "江西", value: 227 },
        { name: "福建", value: 232 },
        { name: "广东", value: 327 },
        { name: "广西", value: 28 },
        { name: "海南", value: 29 },
        { name: "澳门", value: 30 },
        { name: "香港", value: 30 },
        { name: "台湾", value: 31 },
        { name: "玉溪", value: 31 },
        { name: "张家口", value: 31 },
        { name: "阳泉", value: 31 },
        { name: "莱州", value: 32 },
        { name: "湖州", value: 32 },
        { name: "汕头", value: 32 },
        { name: "昆山", value: 33 },
        { name: "宁波", value: 33 },
        { name: "湛江", value: 33 },
        { name: "揭阳", value: 34 },
        { name: "荣成", value: 34 },
        { name: "连云港", value: 35 },
        { name: "葫芦岛", value: 35 },
        { name: "常熟", value: 236 },
        { name: "东莞", value: 336 },
        { name: "河源", value: 36 },
        { name: "淮安", value: 436 },
        { name: "泰州", value: 236 },
        { name: "南宁", value: 437 },
        { name: "营口", value: 37 },
        { name: "惠州", value: 337 },
        { name: "江阴", value: 37 },
        { name: "蓬莱", value: 37 },
        { name: "韶关", value: 38 },
        { name: "嘉峪关", value: 38 },
        { name: "广州", value: 138 },
        { name: "延安", value: 138 },
        { name: "太原", value: 139 },
        { name: "清远", value: 139 },
        { name: "中山", value: 139 },
        { name: "昆明", value: 139 },
        { name: "寿光", value: 440 },
        { name: "盘锦", value: 40 },
        { name: "长治", value: 41 },
        { name: "深圳", value: 41 },
        { name: "珠海", value: 42 },
        { name: "宿迁", value: 43 },
        { name: "咸阳", value: 43 },
        { name: "铜川", value: 44 },
        { name: "平度", value: 44 },
        { name: "佛山", value: 44 },
        { name: "海口", value: 44 },
        { name: "江门", value: 45 },
        { name: "章丘", value: 45 },
        { name: "肇庆", value: 46 },
        { name: "大连", value: 47 },
        { name: "临汾", value: 47 },
        { name: "吴江", value: 47 },
        { name: "石嘴山", value: 49 },
        { name: "沈阳", value: 50 },
        { name: "苏州", value: 50 },
        { name: "茂名", value: 50 },
        { name: "嘉兴", value: 51 },
        { name: "长春", value: 51 },
        { name: "胶州", value: 52 },
        { name: "银川", value: 52 },
        { name: "张家港", value: 52 },
        { name: "三门峡", value: 53 },
        { name: "锦州", value: 154 },
        { name: "南昌", value: 154 },
        { name: "柳州", value: 154 },
        { name: "三亚", value: 154 },
        { name: "自贡", value: 156 },
        { name: "吉林", value: 156 },
        { name: "阳江", value: 257 },
        { name: "泸州", value: 157 },
        { name: "西宁", value: 157 },
        { name: "宜宾", value: 258 },
        { name: "呼和浩特", value: 58 },
        { name: "成都", value: 58 },
        { name: "大同", value: 58 },
        { name: "镇江", value: 59 },
        { name: "桂林", value: 59 },
        { name: "张家界", value: 59 },
        { name: "宜兴", value: 59 },
        { name: "北海", value: 60 },
        { name: "西安", value: 61 },
        { name: "金坛", value: 62 },
        { name: "东营", value: 62 },
        { name: "牡丹江", value: 63 },
        { name: "遵义", value: 63 },
        { name: "绍兴", value: 63 },
        { name: "扬州", value: 64 },
        { name: "常州", value: 64 },
        { name: "潍坊", value: 65 },
        { name: "重庆", value: 66 },
        { name: "台州", value: 67 },
        { name: "南京", value: 67 },
        { name: "滨州", value: 70 },
        { name: "贵阳", value: 71 }
      ],

 这都是我辛辛苦苦手敲出来的原创，你肯定不会吝啬你的小手给个赞或者关注吧，先谢谢了。