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

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. 关于selenium IDE找不到元素

    selenium IDE ,明明存在元素,却找不到元素 ,报错Element not found 标签: seleniumselenium IDE自动化测试ide 2016-10-31 13:25 1 ...

  2. MongoDB学习之路(一)

    NoSQL简介 NoSQL(Not Only SQL),意为"不仅仅是SQL" 关系型数据库遵循ACID规则 1. A(Atomicity)原子性 指的是事务里的所有操作要么全部做 ...

  3. 201521123084 《Java程序设计》第2周学习总结

    第2周作业-Java基本语法与类库 1. 本周学习总结 1.学会使用码云管理代码: 2.学会使用Eclipse关联jdk源代码,并查看对象的源代码: 3.学会String类和StringBuilder ...

  4. 事后诸葛亮分析(Beta阶段)

    设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决用户想要随时锻炼四则运算能力的问题:定义的很清楚:有清晰描述. 2.是否有充足的时间来做计划? ...

  5. Java 第八周总结

    1. 本周学习总结 2. 书面作业 1.List中指定元素的删除 1.1 实验总结 list中可以通过list.get(i)来获取具体第几个的元素的值,再通过compareTo来对比 通过in.has ...

  6. 201521123042《Java程序设计》第13周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.bai ...

  7. 201521123101 《Java程序设计》第12周学习总结

    1. 本周学习总结 2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示. 1 ...

  8. 201521123099 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...

  9. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  10. informix服务端口和oralce服务端口

    查找informix的服务端口1>>more .profile 找到: INFORMIXDIR=/home/informix INFORMIXSERVER=aaaa2>>cd ...