ECharts系列 - 地图 实例一

最新推荐文章于 2024-06-06 11:39:14 发布
最新推荐文章于 2024-06-06 11:39:14 发布
阅读量2.3w 收藏 13
点赞数 5
分类专栏： ECharts 文章标签： ECharts 地图 map 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangcunhuazi/article/details/41621911
版权

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文档

平凡的华仔
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
地图echarts实例 内含源码china.js
03-21
自己做的echarts地图实例。脚本都在里面。直接打开就可以看效果。。。。。。。。。
echarts社区地图、echart地图
m0_67402026的博客
03-03 1539
文章目录 地图时间轴多样 3D地图+拖拽+扫描特效+自转+4.9.0及以下版本才能用 气泡地图+圆点会动 地图上+柱图 地图上+气泡 地图+图例 地图时间轴多样 var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json"; var geoGpsMap = { '1': [127.9688, 45.368], '2': [116.4551, 40.2539], '3': [
Vue 使用 Apache Echarts 绘制地图（省市、地区、自定义）
~朴：shu的博客
07-04 2万+
使用Apache Echarts绘制中国、省市级、自定义地图的方法
Echarts基础学习 4-折线图实战（工作任务）
最新发布
qkdgz的博客
06-06 675
Echarts学习，折线图，实战
Echarts绘制地图（超详细版！）
m0_55245520的博客
01-17 8732
Echarts是一个很有用又很美观的可视化工具，最近想用Echarts绘制地图，但是网上的代码都没有绘制完全，今天分享一下我的代码要注意echarts需要引用一些js文件~
echarts地图示例
m0_51431448的博客
04-04 5635
地图比普通的echarts多了一步 需要注册，就是要引入某个地区的json文件 各个地区的json文件链接数据可视化平台(各个地区的json文件) 示例1 <template> <div :id="id" style="width: 100%;height: 100%;">111</div> </template> <script setup> import * as echarts from "echarts"; impor....
大屏echarts示例------中国地图
zhuangjiajia09的专栏
04-27 4130
echarts做中国地图
ECharts地图，echarts自定义map地图，echarts添加标注，自定义坐标、图标、icon
热门推荐
沐枫
10-18 5万+
ECharts如何自定义省、市、县区地图(各省市直辖区的map地图)，ECharts如何在地图上自定义图片、图标，根据经纬度显示自定义建筑图片、添加自定义覆盖物 前言 最近在做一个项目中，需求是：要显示中国某个省份下，某个市的地图，而地图还要有块级效果，自定义地图颜色，还要在地图上显示不同的建筑物图片，还要每隔几秒后（数据是从后端用ws实时推送过来的，要根据推送过来的数据，动态切换显示对......
echarts地图 绘制部分上海市公交线路数据
coldriversnow的专栏
04-01 1690
源代码地址 MyHTML/roadMap.html at gh-pages · a1115040996/MyHTML · GitHub 预览地址 https://a1115040996.github.io/MyHTML/echarts/roadMap.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title
echarts实例-实时显示疫情.zip
09-01
配置项包括标题、提示框、地图样式、系列数据等。 4. **JQuery的使用** `jquery.js`库可能被用于简化DOM操作。例如，如果需要从服务器动态获取最新数据，可以使用JQuery的`$.ajax`或`$.getJSON`方法。 5. **CSS...
echarts-省份地图+柱状图组合.zip
03-26
总的来说，这个压缩包提供了一个学习 ECharts 地图与柱状图组合使用的实例，对于想要在 Web 应用中实现类似功能的开发者来说，这是一个很好的起点。通过研究这个例子，你可以了解到 ECharts 如何处理地图数据、如何...
echarts地图的一个示例byxiao
03-11
echarts地图的一个示例，一个新疆的地图，每个市用线分隔
echarts map-geo 使用实例
08-03
1. **初始化 ECharts 实例**：在 HTML 页面中创建一个用于展示的 `<div>` 容器，并通过 JavaScript 调用 `echarts.init()` 函数初始化 ECharts 实例。 2. **配置项设置**：使用 `setOption` 方法传入配置对象，这个...
Echarts扩展百度地图实例
01-11
Echarts扩展百度地图实例是一个将流行的JavaScript数据可视化库ECharts与百度地图API相结合的应用示例。这个项目展示了如何在网页中有效地集成这两种技术，以创建交互式的、具有地理定位功能的数据可视化界面。以下...
echarts-china-map-drill-down-master地图钻取.rar
07-16
2. 初始化ECharts实例：设置地图的基本配置，如容器、地图类型、数据源等。 3. 配置地图系列：对于每一级地图，都需要配置一个`series.map`，包括地图数据、数据项和钻取设置。 4. 钻取事件处理：在`on`方法中监听...
echarts地图 可视化大屏使用echarts-map实现地图轮播效果
qq_45630675的博客
12-09 6504
echarts-map 地图实现轮播效果
echarts自动播放
weixin_45890414的博客
08-17 907
使用插件vue-seamless-scroll 直接导入这个js文件，不用懂内部逻辑 (function (global) { global.tools = global.tools || {}; /** * echarts tooltip 自动轮播 * @author liuyishi * @param chart * @param chartOption * @param options * { * i
使用Echarts实现地图展示
一只没有脚的鸟
12-30 3436
使用echarts动态展示城市的数量统计
ECharts3D地图(详细示例——附有具体注释)
qq_30351747的博客
11-26 1万+
ECharts3D地图(详细示例——附有具体注释) 3D地图图表效果如下: 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>铜仁市3D地图(点击地图区域跳转到相应页面)</title> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script&
vue 中使用 echarts 百度地图
05-17
在 Vue 中使用 echarts 百度地图需要先引入 echarts 和百度地图的 JavaScript API。 1. 引入 echarts 在 Vue 中可以通过 npm 安装 echarts，然后在需要使用的组件中引入： ``` npm install echarts --save import echarts from 'echarts' ``` 2. 引入百度地图 JavaScript API 在 Vue 中可以在 index.html 中引入百度地图 JavaScript API： ``` <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图密钥"></script> ``` 注意：需要替换 ak 参数为你的百度地图密钥。 3. 在组件中使用 echarts 百度地图 在 Vue 中可以通过在组件的 mounted 钩子函数中初始化 echarts 实例和百度地图实例，并将百度地图实例作为参数传递给 echarts 的 setOption 方法。 ``` <template> <div id="chart"></div> </template> <script> import echarts from 'echarts' export default { mounted() { // 初始化 echarts 实例 const chart = echarts.init(document.getElementById('chart')) // 初始化百度地图实例 const bmap = new BMap.Map("chart"); bmap.centerAndZoom(new BMap.Point(116.404, 39.915), 11); bmap.addControl(new BMap.NavigationControl()); // echarts 百度地图 option 配置 const option = { bmap: { center: [116.404, 39.915], zoom: 11, roam: true, }, series: [{ type: 'scatter', coordinateSystem: 'bmap', data: [[116.404, 39.915]], symbolSize: 20, }] } // 将百度地图实例传递给 echarts 的 setOption 方法 chart.setOption(option, true, { bmap: bmap }); } } </script> ``` 上面的代码中，使用了一个 scatter 类型的系列，它的 coordinateSystem 设置为 bmap，这样就可以在百度地图上绘制散点图了。 注意：需要在组件销毁时调用 echarts 的 dispose 方法销毁实例，以避免内存泄漏。 ``` export default { mounted() { const chart = echarts.init(document.getElementById('chart')) // ... }, beforeDestroy() { echarts.dispose(document.getElementById('chart')) } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值