H5实现图表和地图
H5实现图表和地图的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>图表和地图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<style type="text/css">
html,body{
width:100%;
height:100%;
}
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
overflow:hidden;
}
.btn{
width:142px;
}
#container{
width:100%;
height:300px;
}
</style>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<div id="container"style="margin-bottom: 50px"></div> <script type="text/javascript" src="asset/js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="asset/js/echarts.min.js"></script> <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5&libraries=drawing,geometry,place,convertor,visualization"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
xAxis: {
type: 'category',
data: [1,2,3,4,5],
axisLabel:{
textStyle:{
fontSize:8
}
}
},
yAxis: {
type: 'value',
axisLabel:{
formatter:'{value}℃',
textStyle:{
fontSize:8
}
}
},
series: [
{
data: [20,30,50,60,30],
type: 'line',
smooth: true,
symbol: 'none',//去掉小圆点
itemStyle: {
normal: {
color: '#537FE2',
lineStyle: {
color: '#537FE2'
}
}
}
},
{
data: [10,10,10,10,10],
type: 'line',
smooth: false,
symbol: 'none',//去掉小圆点
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted', //'dotted'虚线 'solid'实线
color:'#2BB4DF'
}
}
}
},
{
data: [60,60,60,60,60],
type: 'line',
smooth: false,
symbol: 'none',//去掉小圆点
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted', //'dotted'虚线 'solid'实线
color:'#2BB4DF'
}
}
}
},
],
})
</script>
<script>
window.onload = function(){ //直接加载地图
//初始化地图函数 自定义函数名init
function init() {
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.910,116.399), // 地图的中心地理坐标。
zoom:14//地图的中心地理坐标。
}); var polyline = new qq.maps.Polyline({
path: [
new qq.maps.LatLng(39.915, 116.399),
new qq.maps.LatLng(39.920, 116.389),
new qq.maps.LatLng(39.930, 116.399)
],
strokeColor: '#000000',
strokeWeight: 2,
map
}); var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(39.920,116.380),
map: map,
});
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
markerIcon = new qq.maps.MarkerImage(
"https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
size,
origin,
anchor
);
marker.setIcon(markerIcon); } //调用初始化函数地图
init();
}
</script>
</body>
</html>
手机端效果图如下：
我们对以上代码进行分析，
图表使用了echarts，引入了echarts.min.js。
地图用的是腾讯地图，引用了线上的两个库。
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5&libraries=drawing,geometry,place,convertor,visualization"></script>
图表是折线图，设置好x轴（xAxis）的数据,
xAxis: {
type: 'category',
data: [1,2,3,4,5],
axisLabel:{
textStyle:{
fontSize:8
}
}
},
在formatter里设置y轴的单位，
yAxis: {
type: 'value',
axisLabel:{
formatter:'{value}℃',
textStyle:{
fontSize:8
}
}
},
然后设置y轴（yAxis）的数据。
series: [
{
data: [20,30,50,60,30],
type: 'line',
smooth: true,
symbol: 'none',//去掉小圆点
itemStyle: {
normal: {
color: '#537FE2',
lineStyle: {
color: '#537FE2'
}
}
}
},
{
data: [10,10,10,10,10],
type: 'line',
smooth: false,
symbol: 'none',//去掉小圆点
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted', //'dotted'虚线 'solid'实线
color:'#2BB4DF'
}
}
}
},
{
data: [60,60,60,60,60],
type: 'line',
smooth: false,
symbol: 'none',//去掉小圆点
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted', //'dotted'虚线 'solid'实线
color:'#2BB4DF'
}
}
}
},
],
可以画出多条折线，并设置颜色、虚实线、是否加上小圆点等状态。
地图则可以设置中心坐标，
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.910,116.399), // 地图的中心地理坐标。
zoom:14//地图的中心地理坐标。
});
并根据多个点的坐标画出路径线（polyline），
var polyline = new qq.maps.Polyline({
path: [
new qq.maps.LatLng(39.915, 116.399),
new qq.maps.LatLng(39.920, 116.389),
new qq.maps.LatLng(39.930, 116.399)
],
strokeColor: '#000000',
strokeWeight: 2,
map
});
然后可以设置标记（marker）的位置和更换标记的图标。
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(39.920,116.380),
map: map,
});
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
markerIcon = new qq.maps.MarkerImage(
"https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
size,
origin,
anchor
);
marker.setIcon(markerIcon);
代码示例地址：https://github.com/LuoYiHao/chart-and-map。
H5实现图表和地图的更多相关文章
- AGS API for JavaScript 图表上地图
原文:AGS API for JavaScript 图表上地图 图1 图2 图3 -------------------------------------华丽丽的分割线--------------- ...
- uniapp H5引入腾讯地图
在网上搜索了许多关于uniapp引入腾讯地图的方法都以失败告终,我开发的应用主要使用于H5,小程序与H5是不同的sdk,就不在这说了,况且小程序有手把手教学,可参考腾讯地图官网https://lbs. ...
- H5微信通过百度地图API实现导航方式二
要有服务器才行哦 <!DOCTYPE html><html><head> <meta http-equiv="Content-Type&quo ...
- H5微信通过百度地图API实现导航方式一
根据业务需求修改百度API,实现微信中的导航功能.因为源码中SearchInfoWindow_min.js有点小问题(部分小城市公交线路少,查不到路线时没有提示),所以这里在源码的基础上改了一点点.可 ...
- 微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yGQt ...
- H5调用腾讯地图
获取当前定位的经纬度并在容器内显示当前位置 (安卓上的位置有点偏差) 在vue的index.html中需要引用 template <div id="container" st ...
- H5页面，百度地图点击事件
需求:用户点击地图的时候获取地址街道,编码等详细信息. 然后看百度API文档,看到了click事件,关键时候还是需要看文档的. 实现 这样子虽然在浏览器的手机模拟器下是没有问题的 但是放在机器上测试的 ...
- h5跳转高德地图
<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a>
- h5画图表
折线: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
随机推荐
- linux安装couchbase
一.卸载 查看已安装的版本 rpm -qa|grep couchbase 卸载已安装的版本 rpm -e xxxx 二.安装 安装couchbase rpm -i xxxx.rpm 浏览器中访问809 ...
- 【面试】我是如何在面试别人Redis相关知识时“软怼”他的
事出有因 Redis是一个分布式NoSQL数据库,因其数据都存储在内存中,所以访问速度极快,因此几乎所有公司都拿它做缓存使用,所以Redis常被称为分布式缓存. 一次我的一个同事让我帮他看Redis相 ...
- What skills you need to become a full stack java developer?
For a full stack Java developer you should start with learning backend and front-end technologies Fr ...
- selenium--定位--CSS
大家在使用selenium元素定位的时候,通常更多使用的是XPATH,css定位方式用得比较少 但有时候css定位方式还是有一些优势的, 优势1:一般情况下定位速度要比XPATH快 优势2:语法要比X ...
- selenium-03-02操作元素-等待
1.最直接普通的方式:这个是设置固定的等待时间 Thread.sleep(1000); 2.隐式等待方式(implicitlyWait):设置脚本在查找元素时的最大等待时间: driv ...
- CreateFolder
import java.io.IOException; import java.net.URI; import java.net.URISyntaxException; import org.apac ...
- electron教程(一): electron的安装和项目的创建
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...
- 百万it资源百度网盘链接分享
自己大量时间整理的优质资源,容量达3000多G,有需要的朋友可以微我,资源截图: 面试资料: 书籍类: 视频类: 以上只是部分资源,想要资源的亲请加微信咨询. 欢迎加微信咨询,请备注资源: 独乐乐不 ...
- Python采集VIP收费QQ音乐，一起来听周董最新的《说好不哭》，省3块不香吗？
环境: windows python3.6.5 模块: requests selenium json re urllib 环境与模块介绍完毕后,就可以来实行我们的操作了. 第1步: 通过一个解析网站: ...
- .Net Core 商城微服务项目系列（五）：使用Polly处理服务错误
项目进行微服务化之后,随之而来的问题就是服务调用过程中发生错误.超时等问题的时候我们该怎么处理,比如因为网络的瞬时问题导致服务超时,这在我本人所在公司的项目里是很常见的问题,当发生请求超时问题的时候, ...