创新互联ECharts教程：ECharts地图系列

series[i]-map

用于控制 ECharts 中的地图。地图主要用于地理区域数据的可视化，配合 visualMap 组件用于展示不同区域的人口分布密度等数据。

成都创新互联是专业的天祝藏族自治网站建设公司，天祝藏族自治接单;提供成都网站设计、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行天祝藏族自治网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

多个地图类型相同的系列会在同一地图上显示，这时候使用第一个系列的配置项作为地图绘制的配置。

Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLine 和 markPoint。如果要实现点数据或者线数据的可视化，可以使用在地理坐标系组件上的散点图和线图。

示例：

点击编辑实例 》》

ECharts 地图属性

type

type 的值为 map。

name

系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

map

地图类型。

ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，建议大家使用以百度地图为底图的形式，参考实例：http://echarts.baidu.com/demo.html#map-polygon

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

下面是两种类型的使用示例：

JavaScript 引入示例：

JSON 引入示例：

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

ECharts 使用 geoJSON 格式的数据作为地图的轮廓，除了上述数据，你也可以通过其它手段获取地图的 geoJSON 数据注册到 ECharts 中。参见示例 USA Population Estimates

roam

是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启

center

当前视角的中心点，用经纬度表示

例如：

center: [115.97, 29.71]

aspectScale

这个参数用于 scale 地图的长宽比，默认为 0.75。

最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale

boundingCoords

二维数组，定义定位的左上角以及右下角分别所对应的经纬度。例如：

// 设置为一张完整经纬度的世界地图
map: 'world',
left: 0, top: 0, right: 0, bottom: 0,
boundingCoords: [
    // 定位左上角经纬度
    [-180, 90],
    // 定位右下角经纬度
    [180, -90]
],

zoom

当前视角的缩放比例，默认为1。

scaleLimit

滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1。

nameMap

自定义地区的名称映射，如：

{
    'China' : '中国'
}

selectedMode

选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。

label

图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle.normal下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 itemStyle 平级，并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

itemStyle

地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。

zlevel

所有图形的 zlevel 值，默认为 0。

zlevel 用于 Canvas 分层，不同 zlevel 值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

z

组件的所有图形的z值，默认值为2。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低，而且不会创建新的 Canvas。

left

组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

top

组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

right

组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

bottom

组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

layoutCenter

layoutCenter 和 layoutSize 提供了除了 left/right/top/bottom/width/height 之外的布局手段。

在使用 left/right/top/bottom/width/height 的时候，可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的正中间，并且保证不超出盒形的范围。此时可以通过 layoutCenter 属性定义地图中心在屏幕中的位置，layoutSize 定义地图的大小。如下示例：

layoutCenter: ['30%', '30%'],
// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
layoutSize: 100

设置这两个值后 left/right/top/bottom/width/height 无效。

layoutSize

地图的大小，见 layoutCenter。支持相对于屏幕宽高的百分比或者绝对的像素大小。

geoIndex

默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。

当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

参见：

点击编辑实例 》》

mapValueCalculation

多个拥有相同地图类型的系列会使用同一个地图展现，如果多个系列都在同一个区域有值，ECharts 会对这些值统计得到一个数据。这个配置项就是用于配置统计的方式，目前有：

• 'sum' 取和（默认）。
• 'average' 取平均值。
• 'max' 取最大值。
• 'min' 取最小值。

showLegendSymbol

在图例相应区域显示图例的颜色标识（系列标识的小圆点），存在 legend 组件时生效。

data[i]

地图系列中的数据内容数组。数组项可以为单个数值，如：

[12, 34, 56, 10, 23]

如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组，如：

[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]

这时候可以将每项数组中的第二个值指定给 visualMap 组件。

更多时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：

[{
    // 数据项的名称
    name: '数据1',
    // 数据项值8
    value: 10
}, {
    name: '数据2',
    value: 20
}]

需要对个别内容指定进行个性化定义时：

[{
    name: '数据1',
    value: 10
}, {
    // 数据项名称
    name: '数据2',
    value : 56,
    //自定义特殊 tooltip，仅对该数据项有效
    tooltip:{},
    //自定义特殊itemStyle，仅对该item有效
    itemStyle:{}
}]

markPoint

地图的标注。

markLine

地图的标线。

markArea

地图的标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。

silent

图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。

当前名称：创新互联ECharts教程：ECharts地图系列
浏览路径：http://www.stwzsj.com/qtweb/news0/14650.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联