本文主要是介绍初使用ECharts绘制地图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
快速认识ECharts，没有比官方教程更好的了。请戳：https://echarts.apache.org/zh/tutorial.html
准备工作：安装和引入echarts
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save
通过 npm 安装的 echarts 会出现在 node_modules 目录下，从而可以直接在项目代码中得到 echarts，例如：
import * as echarts from 'echarts';
这样得到的是已经加载了所有图表和组件的 ECharts包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。
绘制一个简单的地图
为 ECharts 准备一个具备高宽的 DOM 容器。
<div #shenzhenChart style="width:800px;height: 600px;"></div>
基于准备好的dom，通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的地图。
@ViewChild('shenzhenChart', { static: true, read: ElementRef }) shenzhenChart: ElementRef;// 1.初始化echarts实例
let shenzhenChart = echarts.init(this.shenzhenChart.nativeElement);// 2.指定地图的配置项和数据
let option = {title: {text: '深圳各区常住人口（2018）'},tooltip: {formatter: '{b}<br/>{c} (万人)'},visualMap: {min: 20,max: 350,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},series: [{name: '深圳各区常住人口',type: 'map',mapType: 'shenzhen',label: {show:true},data: [{ "name": "宝安区", "value": 325.78 },{ "name": "龙岗区", "value": 238.64 },{ "name": "南山区", "value": 149.36 },{ "name": "福田区", "value": 163.37 },{ "name": "罗湖区", "value": 103.99 },{ "name": "盐田区", "value": 24.29 },]}]
}// 3.使用刚指定的配置项和数据显示地图
$.get('assets/datas/shenzhen.json', function (geoJson) {echarts.registerMap('shenzhen', geoJson, {});shenzhenChart.setOption(option);});
ECharts 使用 geoJSON 格式的数据作为地图的轮廓，你也可以通过其它手段获取地图的 geoJSON 数据注册到 ECharts 中。
仅三步搞定，哈哈哈，地图出来啦！！
再来绘制一个稍微复杂的地图
Echarts中提供了两种格式的地图数据，一种是JSON文件，需要通过AJAX异步加载后手动注册。我们已经在上个例子中使用过了，现在，我们来看看另外一种。另一种是js文件，直接引入即可，引入后会自动注册地图名字和数据。
import '../../../../../node_modules/echarts/map/js/china.js'; //引入中国地图数据let geoCordMap = {"拉萨": [91.11, 29.97],"上海": [121.48, 31.22],"攀枝花": [101.718637, 26.582347],"厦门": [118.1, 24.46],"宁波": [121.56, 29.86],"湛江": [110.359377, 21.270708],"南宁": [108.33, 22.84],"嘉峪关": [98.289152, 39.77313],"广州": [113.23, 23.16],"中山": [113.38, 22.52],"深圳": [114.07, 22.62],"珠海": [113.52, 22.3],"苏州": [120.62, 31.32],"三亚": [109.511909, 18.252847],"成都": [104.06, 30.67],"桂林": [110.28, 25.29],"北海": [109.12, 21.49],"扬州": [119.42, 32.39],"重庆": [106.54, 29.59], "北京": [116.46, 39.92],"杭州": [120.19, 30.26],"温州": [120.65, 28.01],"长沙": [113, 28.21],"武汉": [114.31, 30.52]
};let convertData = function (data) {let res = [];for (let i = 0; i < data.length; i++) {let geoCoord = geoCordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)})}}return res;
};export let option= {backgroundColor: "#02AFDB",title: {text: '某些城市人口数量（2010）',left: 'center',textStyle: {color: '#fff'}},tooltip: { //鼠标移到图里面的浮动提示框formatter: function (param) {return [param.name + '：' + '<br/>',param.value[2] + '（万人）'].join('');}}, visualMap: { //视觉映射组件，将数据映射到视觉元素type: 'piecewise', //分段型min: 0,max: 3100,splitNumber: 5, //对于连续型数据,自动平均分段inRange: {color: ['#50a3ba','#eac736','#d94e5d'], //图元颜色},left: 20,bottom: 20,textStyle: { //visualMap 文字样式color: '#fff'}},geo: { // 地理坐标系组件，这个是重点配置区map: 'china', // 表示中国地图roam: true, //是否开启鼠标缩放和平移漫游label: {show: false},emphasis: {label: {show: false}},itemStyle: { //地图区域的多边形 图形样式normal: {borderColor: 'rgba(0, 0, 0, 0.2)' //图形的描边颜色},emphasis: {areaColor: null,shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},series: [{type: 'scatter',coordinateSystem: 'geo', // 该系列使用的坐标系 data: convertData([{name: "拉萨", value: 55.94},{name: "上海", value: 2301.91},{name: "攀枝花", value: 121.41},{name: "厦门", value: 353.13},{name: "宁波", value: 760.57},{name: "湛江", value: 699.33},{name: "南宁", value: 666.16},{name: "嘉峪关", value: 23.19},{name: "广州", value: 1270.08},{name: "中山", value: 312.09},{name: "深圳", value: 1035.79},{name: "珠海", value: 156.02},{name: "苏州", value: 1046.60},{name: "三亚", value: 68.54},{name: "成都", value: 1404.76},{name: "桂林", value: 474.80},{name: "北海", value: 153.93},{name: "扬州", value: 445.98},{name: "重庆", value: 3017.42},{name: "北京", value: 2300.24},{name: "杭州", value: 870.04},{name: "温州", value: 912.21},{name: "长沙", value: 704.41},{name: "武汉", value: 910}]),label: {normal: {show: true,position: 'top',formatter: function (param) {return param.name},}}}]
}
//初始化echarts实例和显示地图
let chinaChart = echarts.init(this.chinaChart.nativeElement);
chinaChart.setOption(option);
可以从注释了解到一些配置项，官网有更全面详细的配置项说明，我就不赘述了。请戳：https://echarts.apache.org/zh/option.html#title
这篇关于初使用ECharts绘制地图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
