前段时间需要做一个中国地图的页面,要求是展示各地产品的销量,我就在网上搜了很多ECharts的资料,学习了一下怎么使用。
本着互相学习,共同进步的原则,特此分享一下自己的学习经验以及使用技巧。如果有用的话可以给老弟点个赞~
首先先展示一下成品:(利用JavaScript在HTML页面绘制),表格利用bootstrap.min.css样式,当然你也可以自己编写样式实现。本文重点介绍如何使用ECharts绘制中国地图并打入地区散点。
话不多说直接上干货!!
echarts.js 官网地址下载:快速上手 - Handbook - Apache ECharts
chain.js 这个官网已经找不到了,需要自行搜寻下载
也可以直接从我的网盘下载:
链接:链接:https://pan.baidu.com/s/18OPEgoRPCVerAkwqTZrExg?pwd=123l
提取码:123l
index.html 启动页面
RobotSales.json 写入我们需要省市的经纬度坐标和说明信息(自定义)
我将地区的数据信息封装到了一个json文件中,我们只需要请求该文件就能获取地区数据,包括:地名、坐标、销量、其他文本等信息;
我们知道json文件的格式是 “key”:value 格式;作为在地图上打点(定位)的依据,这里我们最少要写两点:name和value
n其中ame是地区名字! value是该地区的经纬度坐标; 其他信息根据自己的需要自行添加就行~。
[
{
"name": "深圳",
"value": [114.271522, 22.753644],
"Sales": "2台",
"text": "机器人1"
},
{
"name": "南京",
"value": [118.46, 32.02],
"Sales": "2台",
"text": "机器人1"
},
{
"name": "重庆",
"value": [106.54, 29.59],
"Sales": "1台",
"text": "机器人1"
},
{
"name": "北京",
"value": [116.24, 39.55],
"Sales": "3台",
"text": "机器人1"
},
{
"name": "荆州",
"value": [113.41, 29.59],
"Sales": "2台",
"text": "机器人1"
}
]
ps:经纬度可以百度
我们已经编写完JSON文件,下边就是我们的index.html内容。代码稍多,没有耐心的老哥可以下滑到最后直接复制粘贴(详情已写入注解)
首先dataValue是我们自己编写的json数据,中国地图可以直接使用,但是如果要展示某一个地区比如荆州,就需要我们查询这个地区的经纬度坐标,然后传给ECharts。
下边我主要介绍一下是如何提取json数据的,以及ECharts使用过程中自己的薄见,若有瑕疵欢迎留言:
因为我们将地区信息封装到json文件了,我们需要请求该文件提取出来信息才能使用!这里我使用的是ajax请求,请求成功后的数据res传入 dealWithData(res)函数中。
$.ajax({
url: "HTML/json/RobotSales.json",//json文件位置,文件名
type: "GET",
dataType: "json",
success: function(data) {
letres=[];//自定义一个空数组接收请求回来的json数据
for(leti=0;i<data.length;i++){
res.push({name:data[i].name,
value: data[i].value,
sales:data[i].Sales//若json文件中自己定义了其他信息,在下边直接以k:v形式进行罗列即可;但是主要“,”
});
};
//重点:将封装的json数据传递到dealWithData函数中进行渲染处理使用
dealWithData(res);
//===销售表格===
letrow=[];
for (leti=0; i<data.length; i++) {
letname=data[i].name;
letsales=data[i].Sales;
lettext=data[i].text;
//拼接表格的行和列
row.push("<tr><td>"+name+"</td>"+
'<td>'+sales+'</td>'+text+'</tr>');
}
table.append(row.join());//追加到table表格中
}
});
涟漪特效就是像这种跟水纹一样; 看起来非常高大上吧!! 我们一起来看看怎么实现的
//涟漪特效
{
name: "产品销量",
type: "effectScatter",
coordinateSystem: "geo",
data:dataValue,//传入的地图点数据
symbolSize: 6,//涟漪大小
showEffectOn: "render",
//涟漪效应
rippleEffect: {
brushType: "stroke",
color: "#f13434",
period: 10,//周期
scale: 10//规模
},
hoverAnimation: true,//悬停动画
//地图点样式
label: {
formatter: "{b}",
position: "top",
show: true,
fontSize: "10",
},
itemStyle: {
color: "#f13434",
shadowBlur: 2,
shadowColor: "#333"
},
//鼠标点击散点的下弹框
tooltip: {
show: true,
triggerOn:"click",
formatter: function(data1) {
console.log(data1)
let data2 = data1.data;
return "<b>销量<b><br>"+data2.name+data2.sales
}
},
zlevel: 1
}
看完涟漪特效我们还要再看一个ECharts配置!
tooltip: {
show: true, // 是否显示
trigger: 'axis', // 触发类型 'item'图形触发:散点图,饼图等无类目轴的图表中使用; 'axis'坐标轴触发;'none':什么都不触发。
axisPointer: { // 坐标轴指示器配置项。
type: 'shadow', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
showContent: true, //是否显示提示框浮层,默认显示。
triggerOn: 'mouseover', // 触发时机 'mouseover'鼠标移动时触发。 'click'鼠标点击时触发。 'mousemove|click'同时鼠标移动和点击时触发。
enterable: false, // 鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true。
renderMode: 'html', // 浮层的渲染模式,默认以 'html 即额外的 DOM 节点展示 tooltip;
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
borderColor: '#333', // 提示框浮层的边框颜色。
borderWidth: 0, // 提示框浮层的边框宽。
padding: 5, // 提示框浮层内边距,
textStyle: { // 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
confine: false, // 是否将 tooltip 框限制在图表的区域内。
formatter: '{b} 的成绩是 {c}'
formatter: function(arg) {
return arg[0].name + '的分数是:' + arg[0].data
}
}
为了弄明白我们formatter 配置,我们可以在散点函数的tooltip中打印出data1参数
//我们的散点
{
name: '销量',
type: 'scatter',
coordinateSystem: 'geo',//坐标系统
data: dataValue,
//地图点的样式;颜色,大小
symbolSize: 12,
itemStyle: {
color: "#f13434",
shadowBlur: 2,
shadowColor: "#333"
},
//鼠标点击散点的下弹框
tooltip: {
show: true,
triggerOn:"click",
formatter: function(data1) {
//打印回调函数中的参数
console.log(data1)
}
},
},
把回调函数的参数打印出来看看
可以看到我们想要的数据在data中!!
最后再介绍一下地图的点击事件
点击事件就是我们在使用地图界面鼠标点击后触发某些事件;为了设计点击事件,我们先得看看点击函数中的param都有什么
//点击事件
myChart.on('click', function(param) {
console.log("点击")
console.log(param)
});
运行后点击一个散点
当我们点击散点可以从日志中观察到param包括我们编写的json数据---data;那这好说了!,我们直接从data中取出我们想要的数据然后进行后边处理就行啦!
//点击事件
myChart.on('click', function(param) {
let data = param.data;
if (data){
console.log("城市:"+data.name+";坐标:"+data.value+";销量:"+data.sales);
}
});
好了,下边就是该页面全部代码,光看是没用的,大家可以复制粘贴运行试试!本人还在学习java后端,对于前端知识了解不深刻的地方,欢迎大家在评论区讨论,共同进步!
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>机器人销量地图</title>
<scriptsrc="HTML/js/echarts.js"></script>
<scriptsrc="HTML/js/chain.js"></script>
<scriptsrc="HTML/js/jquery-3.5.1.js"></script>
<linkrel="stylesheet"href="HTML/css/bootstrap.min.css">
<style>
tablethead, tbodytr {
display:table;
width:100%;
table-layout:fixed;
}
/*表格文字属性;居中,字体宽度和字体大小*/
trth{
text-align: center;
font-weight:bold;
font-size: larger;
}
/*将表头缩进1.2em*/
tablethead {
width: calc( 100% - 1.2em )
}
/*表头数据格式:颜色和文字居中*/
trtd{
color: #FFFFFF;
text-align: center;
}
/*表格设置滚动*/
tabletbody{
display:block;
height:115px;
overflow-y:scroll;
}
</style>
</head>
<bodystyle="background-color: #2c313a">
<divclass="container"style="height: 100% ;width: 100%">
<!--这里利用bootstrap的样式:
一个页面布局为12份,id=main的代码块展示我们的中国地图;
class:col-md-9 代表这个div占9份;col-md-3 占3份-->
<divid= "content-left"class="col-md-9" style="margin-top: 20px">
<divid="main"style="width: 100%;height:800px"></div>
</div>
<divclass="col-md-3 table-responsive">
<!-- 表格展示销量-->
<tableclass="table table-bordered"style="margin-top: 20px">
<thead>
<tr>
<thstyle="color: #FFFFFF">地区</th>
<thstyle="color: #FFFFFF">销量(台)</th>
<!-- <th style="color: #FFFFFF">类型</th> ?-->
</tr>
</thead>
<tbodyid="tbody">
</tbody>
</table>
</div>
</div>
</body>
<script>
<!-- echarts初始化:获取myChart对象-->
varmyChart=echarts.init(document.getElementById('main'));
$(function(){
//获取表格对象
lettable=$("#tbody");
//发生ajax请求,到json文件,data为返回的数据,将数据封装到空数组中;直接拿来用即可
$.ajax({
url: "HTML/json/RobotSales.json",//json文件位置,文件名
type: "GET",
dataType: "json",
success: function(data) {
letres=[];//自定义一个空数组接收请求回来的json数据
for(leti=0;i<data.length;i++){
res.push({name:data[i].name,
value: data[i].value,
sales:data[i].Sales//若json文件中自己定义了其他信息,在下边直接以k:v形式进行罗列即可;但是主要“,”
});
};
//重点:将封装的json数据传递到dealWithData函数中进行渲染处理使用
dealWithData(res);
//===销售表格===
letrow=[];
for (leti=0; i<data.length; i++) {
letname=data[i].name;
letsales=data[i].Sales;
lettext=data[i].text;
//拼接表格的行和列
row.push("<tr><td>"+name+"</td>"+
'<td>'+sales+'</td>'+text+'</tr>');
}
table.append(row.join());//追加到table表格中
}
});
})
functiondealWithData(data){
letdataValue=data;
option= {
//设置一个标题
title: {
text: '设备销量',
x: 'center',
textStyle: {
color: '#fff',
fontSize:"40"
}
},
//鼠标划过省份下弹框
tooltip: {
show: true,
triggerOn:'click'//点击生效
},
geo: {
map: 'china',//必须写
roam:false,// 拖拽功能;自选关闭开启
zoom: 1.235,//地图缩放比例
center: [105, 36],//地图位置
//地图省份的样式;包括板块颜色和边框颜色
itemStyle: {
areaColor: '#f5f2f2',
borderColor: "#835f5f",
},
//省份字体样式;包括是否展示,字体大小和颜色
label: {
normal: {
show:true,
fontSize: "11.5",
color: "rgb(107,102,102)"
}
},
//鼠标划过的高亮设置;包括省份板块颜色和字体等
emphasis: {
itemStyle: {
areaColor: '#d0a3a3',
},
label: {
show: true,
color:"rgb(255,255,255)"
}
}
},
series: [
//我们的散点
{
name: '销量',
type: 'scatter',
coordinateSystem: 'geo',//坐标系统
data: dataValue,
//地图点的样式;颜色,大小
symbolSize: 12,
itemStyle: {
color: "#f13434",
shadowBlur: 2,
shadowColor: "#333"
},
//鼠标点击散点的下弹框
tooltip: {
show: true,
triggerOn:"click",
formatter: function(data1) {
letdata2=data1.data;
return"<b>销量<b><br>"+data2.name+data2.sales
}
},
},
//涟漪特效
{
name: "产品销量",
type: "effectScatter",
coordinateSystem: "geo",
data:dataValue,//传入的地图点数据
symbolSize: 6,//涟漪大小
showEffectOn: "render",
//涟漪效应
rippleEffect: {
brushType: "stroke",
color: "#f13434",
period: 10,//周期
scale: 10//规模
},
hoverAnimation: true,//悬停动画
//地图点样式
label: {
formatter: "{b}",
position: "top",
show: true,
fontSize: "10",
},
itemStyle: {
color: "#f13434",
shadowBlur: 2,
shadowColor: "#333"
},
//鼠标点击散点的下弹框
tooltip: {
show: true,
triggerOn:"click",
formatter: function(data1) {
console.log(data1)
letdata2=data1.data;
return"<b>销量<b><br>"+data2.name+data2.sales
}
},
zlevel: 1
}
]
};
myChart.setOption(option);
}
//点击事件
myChart.on('click', function(param) {
letdata=param.data;
if (data){
console.log("城市:"+data.name+";坐标:"+data.value+";销量:"+data.sales);
}
});
</script>
</html>
文章浏览阅读52次。时隔4个月后,瑞星杀毒造假案又有了戏剧性的变化。近日,瑞星杀毒造假案的主角——北京市公安局网监处原处长于兵的二审结果仍维持一审的死缓判决。而据于兵的最新供认资料,相当一部分病毒是杀毒软件公司自己的科技力量研制的。于兵供认,瑞星公司向其行贿时就提出条件,由公安机关发出病毒警报,提示用户下载该公司杀毒软件进行杀毒,而病毒则是由瑞星公司“研制”的。“其实这是杀毒软件行业里的公开秘密。”国内一家知名...
文章浏览阅读6k次,点赞4次,收藏35次。考试重点1. 密码体制分类对称密码体制和非对称密码体制;2. DES和AES算法的特点(结构、密钥长度,分组长度,DES弱密钥)及其过程(置换过程,S盒查表过程),AES的轮结构DESDES结构首先是一个初始置换IP,用于重排明文分组的64比特;相同功能的16轮变换,每轮都有置换和代换;第16轮的输出分为左右两半并被交换次序;最后经过一个逆初始置换产生64比特密文;DES结构图如下:密钥长度:56分组长度:64DES弱密钥:待续了解即可DES 分组长度_移位密码和vigenere密码的异同是什么
文章浏览阅读2.7w次,点赞97次,收藏158次。系统功能包括管理员服务端:首页、轮播图管理、公告信息管理、系统用户(管理员、租客用户、房主用户)资源管理(新闻列表、新闻分类列表)模块管理(房源信息、房源咨询、租赁申请、入住信息、房租信息、反馈信息、通知信息、房屋类型)个人管理;用户客户端:首页、公告信息、新闻资讯、房源信息等功能。_微信小程序租房平台怎么弄
文章浏览阅读417次。文章目录一、禁止鼠标右键菜单二、禁止鼠标选中三、鼠标事件对象四、鼠标事件对象clientXpageXscreenX五、常用键盘事件一、禁止鼠标右键菜单<body> <script> document.addEventListener('contextmenu', function (e) { e.preventDefault(); }) </script></body>二、禁止_js鼠标点击事件菜鸟教程
文章浏览阅读7.1k次,点赞15次,收藏100次。PID算法中位置环与位置速度双环的对比分析_偏位置环控制速度
文章浏览阅读175次。HTTP1.0 HTTP 1.1 HTTP 2.0主要区别HTTP1.0 HTTP 1.1主要区别长连接节约带宽HOST域HTTP1.1 HTTP 2.0主要区别多路复用数据压缩服务器推送HTTP1.0 HTTP 1.1主要区别长连接HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而HTTP1.1默认支..._http 0.13.1
文章浏览阅读235次。A Key Volume Mining Deep Framework for Action Recognition_a key volume mining deep framework for action recognition
文章浏览阅读3.9k次。广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元!2、python生成目录树上述 cmd 方式虽然可以生成目录树,但是并不美观,让我们用 python 实现。 2.1 标准库pathlib介绍python有一个标准文件路径处理库 os.path ,从 python3.4 开始,python 又加入了一个标准库 pathlib ,该库..._python创建一个窗口
文章浏览阅读5.1k次,点赞5次,收藏10次。时序图(Sequence Diagram)是显示对象之间交互的图,这些对象是按时间顺序排列的。顺序图中显示的是参与交互的对象及其对象之间消息交互的顺序。时序图中包括的建模元素主要有:角色(Actor)、对象(Object)、生命线(Lifeline)、控制焦点(Focus of control)/ 激活(Activation)、消息(Message)、组合片段(Combined Fragments_使用powerdesiger 画出时序图有接口 控制
文章浏览阅读1.2k次。文章目录一. 动态分区概述1.1 原理1.2 使用方式1.3 动态分区规则参数1.4 创建历史分区规则1.5 注意事项二. 案例2.1 案例12.2 案例22.3 案例3参考:一. 动态分区概述动态分区是在 Doris 0.12 版本中引入的新功能。旨在对表级别的分区实现生命周期管理(TTL),减少用户的使用负担。目前实现了动态添加分区及动态删除分区的功能。动态分区只支持 Range 分区。名词解释:FE:Frontend,Doris 的前端节点。负责元数据管理和请求接入。BE:Backend_dynamic_partition.history_partition_num
文章浏览阅读309次。笔记_禅道的运行日志放在哪
文章浏览阅读4.3w次,点赞79次,收藏882次。我们要使用这些知识实现一个简单的网页设计,利用HTML的a标签做文本内容跳转以及超链接的应用,CSS设计内容样式和图片、动画、视频的大小位置格式,JavaScript实现轮播图效果等。学习如何设计网页中的轮播图和动画效果,并掌握a标签文本内容跳转、超链接的应用、播放音乐与视频等操作。通过对Web知识内容的了解,我们掌握了HTML、CSS和JavaScript的基本知识以及利用它们实现一些简单的应用。1、使用Web知识实现一个简单的网页设计,利用HTML的a标签做文本内容跳转以及超链接的应用。_web前端网页设计代码