ECharts系列 - 地图 实例一

ECharts主页:  http://echarts.baidu.com/index.html

ECharts-2.1.8下载地址:  http://echarts.baidu.com/build/echarts-2.1.8.zip

ECharts官方实例:  http://echarts.baidu.com/doc/example.html

ECharts官方API文档:  http://echarts.baidu.com/doc/doc.html

1、项目结构

js文件夹: 下载了ECharts之后,解压缩,如解压后的根目录是echarts-2.1.8,则到echarts-2.1.8\doc\example\www路径下,把里面的js文件夹直接复制粘贴到项目的 WebRoot根目录下即可

echarts.jsp: 在WebRoot根目录下新建echarts.jsp

echarts.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>ECharts实例</title>
  </head>
  <body>
    <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:1 为ECharts准备一个具备大小(宽高)的Dom-->
    <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

    <!--Step:2 Import echarts.js-->
    <!--Step:2 引入echarts.js-->
    <script src="js/echarts.js"></script>

    <script type="text/javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
    require.config({
        paths: {
            echarts: './js'
        }
    });

    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
    require(
        [
            //这里的'echarts'相当于'./js'
            'echarts',
            'echarts/chart/map'
        ],
        //创建ECharts图表方法
        function (ec) {
            // --- 地图 ---
            	//基于准备好的dom,初始化echart图表
            var myChart = ec.init(document.getElementById('mainMap'));
            //定义图表option
            var option = {
            	//标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题
			    title: {
			    	//主标题文本,'\n'指定换行
			        text: 'iphone销量',
			        //副标题文本,'\n'指定换行
			        subtext: '纯属虚构',
			        //水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
			        x: 'center',
			        //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
					y: 'top'
			    },
			    //图例,每个图表最多仅有一个图例
			    tooltip : {
			    	//触发类型,默认('item')数据触发,可选为:'item' | 'axis'
			        trigger: 'item'
			    },
			    //图例,每个图表最多仅有一个图例
			    legend: {
			    	//布局方式,默认为水平布局(即horizontal),可选为:'horizontal' | 'vertical'
			        orient: 'vertical',
			        //水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
                    x: 'left',
                    //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
                    y: 'top',
                    //legend的data: 用于设置图例,data内的字符串数组需要与sereis数组内每一个series的name值对应
			        data:['iphone3','iphone4','iphone5']
			    },
			    //值域选择,每个图表最多仅有一个值域控件
			    dataRange: {
			    	//布局方式,默认为垂直布局('vertical'),可选为:'horizontal' | 'vertical'
			    	orient: 'vertical',
			    	//指定的最小值,eg: 0,默认无(null),必须参数
			        min: 0,
			        //指定的最大值,eg: 100,默认无(null),必须参数
			        max: 2500,
			        //水平安放位置,默认为全图左对齐('left'),可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
			        x: 'left',
			        //垂直安放位置,默认为全图底部('bottom'),可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
			        y: 'bottom',
			        //值域文字显示,默认为数值文本
			        text: ['高','低'],
			        //是否启用值域漫游,默认为关闭(false),启用后无视splitNumber,值域显示为线性渐变
			        calculable: true
			    },
			    //工具箱,每个图表最多仅有一个工具箱
			    toolbox: {
			    	//显示策略,可选为:true(显示) | false(隐藏),默认值为false
			        show: true,
			        //布局方式,默认为水平布局('horizontal'),可选为:'horizontal' | 'vertical'
			        orient: 'vertical',
			        //水平安放位置,默认为全图右对齐('right'),可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
			        x: 'right',
			        //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
			        y: 'center',
			        //启用功能,目前支持feature,工具箱自定义功能回调处理
			        feature: {
			        	//辅助线标志
			            mark: {show: true},
			            //数据视图,打开数据视图,可设置更多属性,readOnly 默认数据视图为只读(即值为true),可指定readOnly为false打开编辑功能
			            dataView: {show: true, readOnly: false},
			            //restore,还原,复位原始图表
			            restore: {show: true},
			            //saveAsImage,保存图片(IE8-不支持),图片类型默认为'png'
			            saveAsImage: {show: true}
			        }
			    },
			    //缩放漫游组件,仅对地图有效
			    roamController: {
			    	//显示策略,默认为显示(true),可选为:true(显示) | false(隐藏)。
			        show: true,
			        //水平安放位置,默认为左侧('letf'),可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
			        x: 'right',
			        //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
			        y: 'top',
			        //必须,默认无(null),指定漫游组件可控地图类型,如:{ china: true }
			        mapTypeControl: {
			        	//指定地图类型
			            'china': true
			        }
			    },
			    //series(地图),驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据
			    series : [
			        {
			        	//系列名称,如果启用legend,该值将被legend.data索引相关
			            name: 'iphone3',
			            //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示
			            type: 'map',
			            //地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:如'广东'
			            mapType: 'china',
			            //是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游)
			            roam: 'scale',
			            //图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式)
			            itemStyle:{
			            	//正常时的样式
			                normal:{
			                	//边框线宽,单位px
			                	borderWidth: 2,
			                	//边框颜色
                    			borderColor: 'lightgreen',
                    			//标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置
                    			label: {show:true}
                    		},
			                //鼠标经过时的样式
			                 emphasis: {
			                 	//边框线宽,单位px
			                    borderWidth:2,
			                    //边框颜色
			                    borderColor:'#fff',
			                    //鼠标经过时区域的颜色
			                    color: '#32cd32',
			                    //标签
			                    label: {
			                        show: true,
			                        //文本样式
			                        textStyle: {
			                        	//文本字体颜色
			                            color: '#fff'
			                        }
			                    }
			                }
			            },
			            //当图表类型为地图时,需要说明每部分数据对应的省份,可设置选中状态,如 :{name: '北京',value: 1234,selected: true},
			            data:[
			                {name: '北京',value: Math.round(Math.random()*1000)},
			                {name: '天津',value: Math.round(Math.random()*1000)},
			                {name: '上海',value: Math.round(Math.random()*1000)},
			                {name: '重庆',value: Math.round(Math.random()*1000)},
			                {name: '河北',value: Math.round(Math.random()*1000)},
			                {name: '河南',value: Math.round(Math.random()*1000)},
			                {name: '云南',value: Math.round(Math.random()*1000)},
			                {name: '辽宁',value: Math.round(Math.random()*1000)},
			                {name: '黑龙江',value: Math.round(Math.random()*1000)},
			                {name: '湖南',value: Math.round(Math.random()*1000)},
			                {name: '安徽',value: Math.round(Math.random()*1000)},
			                {name: '山东',value: Math.round(Math.random()*1000)},
			                {name: '新疆',value: Math.round(Math.random()*1000)},
			                {name: '江苏',value: Math.round(Math.random()*1000)},
			                {name: '浙江',value: Math.round(Math.random()*1000)},
			                {name: '江西',value: Math.round(Math.random()*1000)},
			                {name: '湖北',value: Math.round(Math.random()*1000)},
			                {name: '广西',value: Math.round(Math.random()*1000)},
			                {name: '甘肃',value: Math.round(Math.random()*1000)},
			                {name: '山西',value: Math.round(Math.random()*1000)},
			                {name: '内蒙古',value: Math.round(Math.random()*1000)},
			                {name: '陕西',value: Math.round(Math.random()*1000)},
			                {name: '吉林',value: Math.round(Math.random()*1000)},
			                {name: '福建',value: Math.round(Math.random()*1000)},
			                {name: '贵州',value: Math.round(Math.random()*1000)},
			                {name: '广东',value: Math.round(Math.random()*1000)},
			                {name: '青海',value: Math.round(Math.random()*1000)},
			                {name: '西藏',value: Math.round(Math.random()*1000)},
			                {name: '四川',value: Math.round(Math.random()*1000)},
			                {name: '宁夏',value: Math.round(Math.random()*1000)},
			                {name: '海南',value: Math.round(Math.random()*1000)},
			                {name: '台湾',value: Math.round(Math.random()*1000)},
			                {name: '香港',value: Math.round(Math.random()*1000)},
			                {name: '澳门',value: Math.round(Math.random()*1000)}
			            ],
			        },
			        {
			            //系列名称,如果启用legend,该值将被legend.data索引相关
			            name: 'iphone4',
			            //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示
			            type: 'map',
			            //地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:如'广东'
			            mapType: 'china',
			            //是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游)
			            roam: 'scale',
			            //图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式)
			            itemStyle:{
			            	//正常时的样式
			                normal:{
			                	//边框线宽,单位px
			                	borderWidth: 2,
			                	//边框颜色
                    			borderColor: 'lightgreen',
                    			//标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置
                    			label: {show:true}
                    		},
			                //鼠标经过时的样式
			                 emphasis: {
			                 	//边框线宽,单位px
			                    borderWidth:2,
			                    //边框颜色
			                    borderColor:'#fff',
			                    //鼠标经过时区域的颜色
			                    color: '#32cd32',
			                    //标签
			                    label: {
			                        show: true,
			                        //文本样式
			                        textStyle: {
			                        	//文本字体颜色
			                            color: '#fff'
			                        }
			                    }
			                }
			            },
			            data:[
			                {name: '北京',value: Math.round(Math.random()*1000)},
			                {name: '天津',value: Math.round(Math.random()*1000)},
			                {name: '上海',value: Math.round(Math.random()*1000)},
			                {name: '重庆',value: Math.round(Math.random()*1000)},
			                {name: '河北',value: Math.round(Math.random()*1000)},
			                {name: '安徽',value: Math.round(Math.random()*1000)},
			                {name: '新疆',value: Math.round(Math.random()*1000)},
			                {name: '浙江',value: Math.round(Math.random()*1000)},
			                {name: '江西',value: Math.round(Math.random()*1000)},
			                {name: '山西',value: Math.round(Math.random()*1000)},
			                {name: '内蒙古',value: Math.round(Math.random()*1000)},
			                {name: '吉林',value: Math.round(Math.random()*1000)},
			                {name: '福建',value: Math.round(Math.random()*1000)},
			                {name: '广东',value: Math.round(Math.random()*1000)},
			                {name: '西藏',value: Math.round(Math.random()*1000)},
			                {name: '四川',value: Math.round(Math.random()*1000)},
			                {name: '宁夏',value: Math.round(Math.random()*1000)},
			                {name: '香港',value: Math.round(Math.random()*1000)},
			                {name: '澳门',value: Math.round(Math.random()*1000)}
			            ]
			        },
			        {
			            //系列名称,如果启用legend,该值将被legend.data索引相关
			            name: 'iphone5',
			            //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示
			            type: 'map',
			            //地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:如'广东'
			            mapType: 'china',
			            //是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游)
			            roam: 'scale',
			            //图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式)
			            itemStyle:{
			            	//正常时的样式
			                normal:{
			                	//边框线宽,单位px
			                	borderWidth: 2,
			                	//边框颜色
                    			borderColor: 'lightgreen',
                    			//标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置
                    			label: {show:true}
                    		},
			                //鼠标经过时的样式
			                 emphasis: {
			                 	//边框线宽,单位px
			                    borderWidth:2,
			                    //边框颜色
			                    borderColor:'#fff',
			                    //鼠标经过时区域的颜色
			                    color: '#32cd32',
			                    //标签
			                    label: {
			                        show: true,
			                        //文本样式
			                        textStyle: {
			                        	//文本字体颜色
			                            color: '#fff'
			                        }
			                    }
			                }
			            },
			            data:[
			                {name: '北京',value: Math.round(Math.random()*1000)},
			                {name: '天津',value: Math.round(Math.random()*1000)},
			                {name: '上海',value: Math.round(Math.random()*1000)},
			                {name: '广东',value: Math.round(Math.random()*1000)},
			                {name: '台湾',value: Math.round(Math.random()*1000)},
			                {name: '香港',value: Math.round(Math.random()*1000)},
			                {name: '澳门',value: Math.round(Math.random()*1000)}
			            ]
			        }
			    ]
			};
            //为echarts对象加载数据
            myChart.setOption(option);
        }
    );
    </script>
  </body>
</html>

完成以上的步骤后,把项目发布到服务器,在浏览器上访问echarts.jsp(由于本实例还没有跟后台进行交互,只是先做一个前台用法介绍,所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夹放在同一级目录下,然后直接用浏览器打开echarts.html),即可看到下面的效果

更多的图表样式设置,可以查看ECharts的官方API文档

时间: 2024-10-15 20:48:54

ECharts系列 - 地图 实例一的相关文章

ECharts系列 - 柱状图(条形图)实例一

ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.1.8下载地址:  http://echarts.baidu.com/build/echarts-2.1.8.zip ECharts官方实例:  http://echarts.baidu.com/doc/example.html ECharts官方API文档:  http://echarts.baidu.com/doc/doc.html ECharts系列 - 柱状图(条形图)实例

深入浅出ECharts系列 (二) 折线图

深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载的版本,也可以自己定制相应功能的版本,下面附上插件的下载地址: http://echarts.baidu.com/download.html 我们下载完整版为大家进行演示. 3. 正式开始 首先,我新建了一个MVC4项目,将下载的文件放到对应的位置: 然后新建一个控制器和对应的视图,添加对文件的引用

echarts合并地图,把中国各个省份分成&#39;华北&#39;,&#39;东北&#39;,&#39;华东&#39;,&#39;华中&#39;,&#39;华南&#39;,&#39;西南&#39;,&#39;西北&#39;七个大区

最近公司有个需求是按照大区,即把中国分成华北','东北','华东','华中','华南','西南','西北'七个大区, 但是echarts地图只有省市,还没有大区,只能自己网上找资料再按需求写了 echarts地图合并关键点是把coordinates和encodeOffsets合并,而且这两个必须都合并,且最多只能合并到二维数组,合并到三维数组就不行了. 实例结果截图 代码: <!DOCTYPE html> <html lang="zh"> <head>

Echarts mc地图

Echarts mc地图 echarts官网实例: https://gallery.echartsjs.com/editor.html?c=xSNlA5O-zl 效果: 代码: <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src

数据视化Echarts+百度地图API实现市县区级下钻

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

设计模式学习总结系列应用实例

1.单例模式 应用实例:1.一个党只能有一个主席.2.Windows是多进程多线程的,在操作一个文件的时候,就不可避免地出现多个进程或线程同时操作一个文件的现象,所以所有文件的处理必须通过唯一的实例来进行.3.一些设备管理器常常设计为单例模式,比如一个电脑有两台打印机,在输出的时候就要处理不能两台打印机打印同一个文件. 2.工厂模式 应用实例:1.你需要一辆汽车,你可以直接从工厂里面提货,而不用去管这辆汽车是怎么做出来的,以及这个汽车里面的具体实现 2.Hibernate换数据库只需换方言和驱动

echarts Map(地图) 不同颜色区块显示

echarts Map(地图) 不同区块显示 这里以重庆地图为例 配置项: var option = { title : { text: '重庆市', subtext: '', x:'left' }, tooltip : { trigger: 'item', formatter: '{b}', itemSize:'14px' }, legend: { orient: 'vertical', x:'center', data:['重庆市区县'] }, dataRange: { x: 'left',

几个不错的echarts +百度地图 案例

https://echarts.baidu.com/examples/editor.html?c=map-polygon https://echarts.baidu.com/examples/editor.html?c=effectScatter-bmap 空气质量等,可以通过值来控制点的大小和光环. https://echarts.baidu.com/examples/editor.html?c=heatmap-bmap 人流密度图.热力图等 我的echarts+百度地图 左上角可以切换地图和

echarts的地图省份颜色自适应变化

在使用echarts的地图的时候省份的颜色可能随着数据的多少显示不同的颜色,但是当后台返回的数据的变化较大时可能就不好控制了,所以需要设置根据后台的数据进行自适应 将后台返回的数据中的value放入一个新的数组中,然后取出数组中的最大值来设置给echarts的visulMap的max属性,并将最小值设置给min属性,当后台没有数据返回的时候会报错,所以要进行一下判断 这里取最大值和最小值使用的是扩展运算符配合Math.max/Math.min来实现的 //data是后台返回的数据var leng