全栈工程师开发手册 (作者:栾鹏)

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,开发全解+完美注释的更多相关文章

  1. Echarts数据可视化visualMap,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  2. Echarts数据可视化dataZoom,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  3. Echarts数据可视化series-radar雷达图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  4. Echarts数据可视化series-line线图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  5. Echarts数据可视化series-graph关系图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  6. Echarts数据可视化series-effectscatter特效散点图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. Echarts数据可视化radar雷达坐标系,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. Echarts数据可视化parallel平行坐标系,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  9. Echarts数据可视化tooltip提示框,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

随机推荐

  1. YYHS-NOIP2017SummerTraining0914-问题 A: 组合数问题

    题目描述 组合数C(n,m)表示的是从n个物品中选出m个物品的方案数.举个例子,从(1, 2, 3)三个物品中选择两个物品可以有(1, 2),(1, 3),(2, 3)这三种选择方法.根据组合数的定义 ...

  2. 转深入Java虚拟机 之四:类加载机制

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17881581 类加载过程     类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个 ...

  3. 201521145048《Java程序设计》第6周学习总结

    as 1. 本周学习总结 2. 书面作业 Q1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 1.2 自己设计 ...

  4. 201521123055 《Java程序设计》第14周学习总结

    1. 本章学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) 利 ...

  5. jQuery 简介,与js的对比

    jquery可以说是js的封装,大多数情况下jquery比js简单,它们两个可以相互写对方的里面,使用jquery需要导入jquery文件. <script src="jquery-1 ...

  6. Eclipse rap 富客户端开发总结(6) : 如何发布rap到tomcat

    1.先下载以来的打包插件 war products  输入下面的地址,选择相应的插件 新建一个 war product Configutation向导 下面的war  product Configut ...

  7. expect实现scp/ssh-copy-id非交互

    expect工具可以实现自动应答,从而达到非交互的目的. expect具体使用用法比较复杂,中文手册我正在翻译中,以后翻译完了做了整理再补.本文只有几个ssh相关最可能用上的示例. yum -y in ...

  8. Hibernate第九篇【组件映射、继承映射】

    前言 到目前位置,我们已经学习了一对一.一对多.多对一.多对多映射了-既然Hibernate是ORM实现的框架,它还提供了组件映射和继承映射..本博文主要讲解组件映射和继承映射 Java主要的类主要有 ...

  9. ops-web运维平台data.jsp-jquery-mootools

    data.jsp页面, 下面列出的是 <body>部分 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=& ...

  10. 【机器学习实战】Machine Learning in Action 代码 视频 项目案例

    MachineLearning 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远 Machine Learning in Action (机器学习实战) | ApacheCN(apa ...