如何用echarts写一个简单的地图[新手必看]

以上就是做出来的地图效果 具体是怎么做？
小编话不多说 上代码 哈哈哈哈哈哈‘

  <div id="publishmap" :style="{width: '100%', height: '800px'}"></div>

先提前设置好了宽高
注意：
必须要先引入中国地图的数据 china.js

然后在js中引入这些

import echarts from "echarts";
import "../../assets/js/china.js"; // 引入中国地图数据
function randomValue() {
  return Math.round(Math.random() * 1000);
}
var dataList = [
  { name: "南海诸岛", value: 0 },
  { name: "北京", value: randomValue() },
  { name: "天津", value: randomValue() },
  { name: "上海", value: randomValue() },
  { name: "重庆", value: randomValue() },
  { name: "河北", value: randomValue() },
  { name: "河南", value: randomValue() },
  { name: "云南", value: randomValue() },
  { name: "辽宁", value: randomValue() },
  { name: "黑龙江", value: randomValue() },
  { name: "湖南", value: randomValue() },
  { name: "安徽", value: randomValue() },
  { name: "山东", value: randomValue() },
  { name: "新疆", value: randomValue() },
  { name: "江苏", value: randomValue() },
  { name: "浙江", value: randomValue() },
  { name: "江西", value: randomValue() },
  { name: "湖北", value: randomValue() },
  { name: "广西", value: randomValue() },
  { name: "甘肃", value: randomValue() },
  { name: "山西", value: randomValue() },
  { name: "内蒙古", value: randomValue() },
  { name: "陕西", value: randomValue() },
  { name: "吉林", value: randomValue() },
  { name: "福建", value: randomValue() },
  { name: "贵州", value: randomValue() },
  { name: "广东", value: randomValue() },
  { name: "青海", value: randomValue() },
  { name: "西藏", value: randomValue() },
  { name: "四川", value: randomValue() },
  { name: "宁夏", value: randomValue() },
  { name: "海南", value: randomValue() },
  { name: "台湾", value: randomValue() },
  { name: "香港", value: randomValue() },
  { name: "澳门", value: randomValue() },
];

接下来在methods中写入

  ChinaMap(id){
            // 绘制图表，准备数据
            var option = {
                tooltip: {
                    formatter:function(params,ticket, callback){
                        return params.seriesName+'<br />'+params.name+'：'+params.value
                    }//数据格式化
                },
                legend:{
                    borderColor:'#FFF'
                },
                    visualMap: {
                        min: 0,
                        max: 1500,
                        left: 'left',
                        top: 'bottom',
                        inRange: {
                            color: ['#24C1B4']//取值范围的颜色
                        },
                        show:false//图注
                    },
                 geo: {
                    map: 'china',
                    show:true,
                    zoom:1.23,//视角缩放比例
                    roam: false,//不开启缩放和平移
                    label: {
                        
                        normal: {
                            // 字体
                            show: false,
                            position:'top',
                           distance:5,
                            
                        },
                        emphasis:{
                            show:false,
                        }
                    },
                    
                    itemStyle:{
                             borderWidth:1,
                            borderColor:"#FFFFFF",
                             shadowColor:"#1fb5a9",
                             shadowOffsetX:8,
                             shadowOffsetY:2,
                             shadowColor: 'rgba(0, 0, 0, 0.1)',
                    },
                  emphasis:{
                      itemStyle:{
                            areaColor: '#ffaa4e',//鼠标选择区域颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            borderType : 'solid',
                         
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                      }
                          
                    },
            },
            
           
                 // 一个属性
           
           // 一个属性
              series : [{
                   
                      map: 'china',
                    type: 'map',
                    roam:true,
                       // 文本位置修正
                    textFixed: {
                        Alaska: [20, -20]
                    },
                     geoIndex: 0,
                    data:dataList, 
                       zoom:1.23,//视角缩放比例 
                     label:{
                           
                            emphasis: {
                                show: true,//对应的鼠标悬浮效果
                            }
                    },
                    itemStyle:{
                        // areaColor:'rgba(128, 128, 128, 0.5)',
                        // borderColor:'#FFFFFF',
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 0,
                        // borderWidth:2,
                      normal: {
                          borderWidth: .5,//区域边框宽度
                          borderColor: '#FFFFFF',//区域边框颜色
                          areaColor:"rgba(129, 196, 179, 1)",//区域颜色
                      },
                    }
            }],
        };
            //初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));

            myChart.setOption(option);
            var that =this
            myChart.on('click',function(params){  // 这个就是如何在地图上写点击事件呢                     
    
                    alert(params.name)

            })
     },

最后一定要调用哦！！！

 mounted(){
           this.$nextTick(function() {
                this.ChinaMap('publishmap');
            })
    }

还有不懂的可以私信小编哟