网站空间租赁合同,网络竞价推广开户,wordpress 主题添加小工具,wordpress好看的背景图片series[i]-map用于控制 ECharts 中的地图。地图主要用于地理区域数据的可视化#xff0c;配合 visualMap 组件用于展示不同区域的人口分布密度等数据。多个地图类型相同的系列会在同一地图上显示#xff0c;这时候使用第一个系列的配置项作为地图绘制的配置。Tip: 在 ECharts…series[i]-map用于控制 ECharts 中的地图。地图主要用于地理区域数据的可视化配合 visualMap 组件用于展示不同区域的人口分布密度等数据。多个地图类型相同的系列会在同一地图上显示这时候使用第一个系列的配置项作为地图绘制的配置。Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLine 和 markPoint。如果要实现点数据或者线数据的可视化可以使用在地理坐标系组件上的散点图和线图。示例ECharts 地图属性typetype 的值为 map。name系列名称用于tooltip的显示legend 的图例筛选在 setOption 更新数据和配置项时用于指定对应的系列。map地图类型。ECharts 3 中因为地图精度的提高不再内置地图数据增大代码体积建议大家使用以百度地图为底图的形式参考实例http://echarts.baidu.com/demo.html#map-polygonECharts 中提供了两种格式的地图数据一种是可以直接 script 标签引入的 js 文件引入后会自动注册地图名字和数据。还有一种是 JSON 文件需要通过 AJAX 异步加载后手动注册。下面是两种类型的使用示例JavaScript 引入示例var chart echarts.init(document.getElementById(main));chart.setOption({series: [{type: map,map: china}]});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 Estimatesroam是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移可以设置成 scale 或者 move。设置成 true 为都开启center当前视角的中心点用经纬度表示例如center: [115.97, 29.71]aspectScale这个参数用于 scale 地图的长宽比默认为 0.75。最终的 aspect 的计算方式是geoBoundingRect.width / geoBoundingRect.height * aspectScaleboundingCoords二维数组定义定位的左上角以及右下角分别所对应的经纬度。例如// 设置为一张完整经纬度的世界地图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% 这样相对于容器高宽的百分比。默认自适应。layoutCenterlayoutCenter 和 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,// 数据项值8value: 10}, {name: 数据2,value: 20}]需要对个别内容指定进行个性化定义时[{name: 数据1,value: 10}, {// 数据项名称name: 数据2,value : 56,//自定义特殊 tooltip仅对该数据项有效tooltip:{},//自定义特殊itemStyle仅对该item有效itemStyle:{}}]markPoint地图的标注。markLine地图的标线。markArea地图的标域常用于标记图表中某个范围的数据例如标出某段时间投放了广告。silent图形是否不响应和触发鼠标事件默认为 false即响应和触发鼠标事件。
