Echarts数据可视化地理坐标系geo,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏)
Echarts数据可视化开发代码注释全解
Echarts数据可视化开发参数配置全解
6大公共组件详解(点击进入):
title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解
5大坐标系详解(点击进入):
地理坐标系geo详解、grid直角坐标系(xAxis、yAxis)详解、parallel平行坐标系详解、polar极坐标系详解、radar雷达坐标系详解
19种图表类型详解(点击进入,待续):
series-bar柱形图详解、series-effectscatter特效散点图、series-graph关系图、series-heatmap热力图、series-line线图、series-map地图、series-pie饼图、series-radar雷达图、series-scatter散点图
Echarts数据可视化地理坐标系geo详解:
mytextStyle={
color:"#333", //文字颜色
fontStyle:"normal", //italic斜体 oblique倾斜
fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", //字体系列
fontSize:18, //字体大小
};
mylineStyle={
color:"#333", //颜色,'rgb(128, 128, 128)','rgba(128, 128, 128, 0.5)',支持线性渐变,径向渐变,纹理填充
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //图形阴影的模糊大小。
type:"solid", //坐标轴线线的类型,solid,dashed,dotted
width:1, //坐标轴线线宽
opacity:1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
};
myareaStyle={
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //图形阴影的模糊大小。
opacity:1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
};
myitemStyle={
color:"red", //颜色
borderColor:"#000", //边框颜色
borderWidth:0, //柱条的描边宽度,默认不描边。
borderType:"solid", //柱条的描边类型,默认为实线,支持 'dashed', 'dotted'。
barBorderRadius:0, //柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径。
shadowBlur:10, //图形阴影的模糊大小。
shadowColor:"#000", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离。
opacity:1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
};
geo=[{
show:true, //是否显示
map:"china", //地图类型。world世界地图,china中国地图
roam:false, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
center:[115.97, 29.71], //当前视角的中心点,用经纬度表示
aspectScale:0.75, //这个参数用于 scale 地图的长宽比。
boundingCoords: [[-180, 90], [180, -90]], //二维数组,定义定位的左上角以及右下角分别所对应的经纬度
zoom:1, //当前视角的缩放比例
scaleLimit:{ //所属组件的z分层,z值小的图形会被z值大的图形覆盖
min:1, //最小的缩放值
max:1, //最大的缩放值
},
nameMap:{ //自定义地区的名称映射
'China' : '中国'
},
selectedMode: false , //选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'表示单选,或者'multiple'表示多选。
label:{ //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
normal:{
show:false, //是否在普通状态下显示标签。
textStyle:mytextStyle, //普通状态下的标签文本样式。
},
emphasis:{
show:false, //是否在高亮状态下显示标签。
textStyle:mytextStyle //高亮状态下的标签文本样式。
}
},
itemStyle:{ //地图区域的多边形 图形样式
normal:myitemStyle,
emphasis:myitemStyle
},
zlevel:0, //所属图形的 zlevel 值。
z:2, //所属图形的 z 值。
left:"10%", //组件离容器左侧的距离,百分比字符串或整型数字
top:60, //组件离容器上侧的距离,百分比字符串或整型数字
right:"auto", //组件离容器右侧的距离,百分比字符串或整型数字
bottom:"auto", //组件离容器下侧的距离,百分比字符串或整型数字
layoutCenter:['30%', '30%'], //地图中心在屏幕中的位置
layoutSize:100, //地图的大小,支持相对于屏幕宽高的百分比或者绝对的像素大小。
regions:[{ //在地图中对特定的区域配置样式。
name: '广东',
itemStyle: {
normal: {
areaColor: 'red',
color: 'red'
}
}
}],
silent:false, //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
}];
Echarts数据可视化地理坐标系geo,开发全解+完美注释的更多相关文章
- Echarts数据可视化visualMap,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化dataZoom,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-line线图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-graph关系图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-effectscatter特效散点图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化radar雷达坐标系,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化parallel平行坐标系,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化tooltip提示框,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
随机推荐
- YYHS-挑战nbc
题目描述 Abwad是一名有志向的优秀OI少年.遗憾的是,由于高能宇宙射线的影响,他不幸在NOI中滚粗.不过,Abwad才高一,还有许许多多的机会.在长时间的刻苦学习之后,他实力大增,并企图撼动OI界 ...
- 【★】深入BGP原理和思想【第…
前言:学思科技术我想说,浅尝辄止,不是天才千万别深钻.和我研究高等数学一样,越深入就会发现越多的问题与不合理之处.尤其对于IT界,算法的最终解释权还是掌握在老外手中,所以对于有些细节,我们" ...
- PCB Design_经验之谈
所谓覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.敷铜的意义在于,减小地线阻抗,提高抗干扰能力:降低压降,提高电源效率:与地线相连,还可以减小环路面积.也出于让PCB ...
- 201521123033《Java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind answer: 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的co ...
- 201521123032 《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 本周学习了继承,了解其中的父类与子类.了解到类,以及如何识别类,对于名词可以考虑是否创建相应 ...
- 201521123092《java程序设计》第三周学习总结
#1. 本章学习总结 你对于本章知识的学习总结 #2. 书面作业 **Q1. 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private ...
- java课程设计---团体
课设题目:学生信息管理系统 一.团队成员介绍 周汉麟(组长):网络1511 201521123030 吴敏烽(组员):网络1512 201521123044 二.项目git地址 [课设] 吴敏烽 ht ...
- 201521123002《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...
- 201521123052《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...
- 201521123016《Java程序设计》第14周学习总结
1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) - ...