速卖通html自定义区域,Echarts 地图添加自定义区域

使用 Echarts 生成地图时，如果需要添加一些自定义区域，该怎么做呢？请看下面示例。

生成原始地图

index.hmtl

引入 Jquery 和 Echart

Echarts 地图添加自定义区域

map.js

var map = {

init : function () {

map.getMapData();

},

getMapData : function () {

$.getJSON("./mapdata/china.json", function (data) {

if(data != null) {

echarts.registerMap("china", data);// 注册地图

var mapData = [];

var features = data.features;

$.each(features, function(i, item) {

mapData.push({id : i+1, name: item.properties.name});

})

map.renderMap(mapData);

}

})

},

renderMap : function (data) {

var chart = echarts.init(document.getElementById("map"));

var option = {

tooltip: {

trigger: 'item',

formatter: '{b}'

},

series: [

{

name: '中国',

type: 'map',

mapType: 'china',

selectedMode : 'multiple',

label: {

normal: {

show: false

},

emphasis: {

show: true

}

},

data : data

}

]

}

chart.setOption(option);

}

}

$(function () {

map.init();

})

在浏览器打开 index.html，样式如下：

这时，一个简单的中国地图就已经生成了。接下来，我们在这个地图的基础上添加一个自定义区域。

添加自定义区域

在 map.js 中，我们使用 $.getJson()方法读取 ./mapdata/china.json 文件来获取地图数据。该文件是一个 geojson 文件，地图就是根据该文件中的数据生成的。所以，我们想要添加自定义区域，就必须修改该 geojson 文件。

但是，怎么修改呢？手动修改肯定是不可取的，因为 geojson 文件里有许多属性，改起来麻烦而且容易出错。有个专门处理 geojson 的网站可以帮我们解决这个问题。

导入 china.json 文件，使用画图工具添加区域

保存 geojson 文件，将其内容全部复制粘贴到项目的 china.json 文件中

在浏览器打开 index.html，样式如下：

可以看到，自定义区域已经成功添加上了。