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 ...
随机推荐
- DOM之事件（二）
今天详细讲解JavaScript中的常用事件类型和功能. 一 鼠标事件 1, click:点击事件 等同于mousedown+mouseup,不管这两个事件间隔多久,都会触发一次click事件. 2 ...
- Github 持续化集成 工作流 Npm包自动化发布
Github 持续化集成 工作流 Npm包自动化发布 简介 持续集成指的是,频繁地(一天多次)将代码集成到主干. 它的好处主要有两个: 快速发现错误.每完成一点更新,就集成到主干,可以快速发现错误 ...
- 使用file_get_contents() 发送GET、POST请求
服务器端执行HTTP请求,大家经常使用的就是CURL,curl工具的确是很好的数据文件传输工具,那么除此之外还有其他的工具能实现这个功能吗? 现在为你介绍一个很常见的工具 file_get_conte ...
- Java 客户端服务器范例
最近在面试,虽然学习了一些新的框架,但是可能问类似于客户端服务器模型,然后根据其设计,所以就根据面试内容梳理一下客户端服务器模型. 客户端基本思路: 1.创建Socket实例,设置端口和IP地址等 2 ...
- 2019-2020-1 20199303 《Linux内核原理分析》 第一周作业
2019-2020-1 20199303 <Linux内核原理分析> 第一周作业 1. 环境准备 在众多的Linux发行版中,Ubuntu,小红帽还有类Unix系统的BSD系统,我选择了目 ...
- VMware安装出现"已将该虚拟机配置为使用 64 位客户机操作系统"
1.环境:ThinkPad电脑 系统:win10 64位.VMWare运行虚拟机发现提示无法执行64位操作. 2.解决办法: ⑴ 进入BOIS中 ⑵ 选择Security字段,进入Virtualiza ...
- redis-分布式锁-消除竞争条件
因为信号量的设计过程中,获取一个信号量需要执行多个命令组成的流水,这样容易形成竞争条件. 为了消除信号量实现中所有可能出现的竞争条件,构建一个正确的计数信号量,需要在 信号量时,添加带有短暂超时时间的 ...
- IDEA新建一个多maven模块工程（有图）
对于一些大型的项目来说,将项目的各个模块理清并进行管理,便于后续项目的维护,使用maven管理是很方便的,它可以很好的构建模块来设计项目的整体结构,对一些小型的项目不建议使用 1.新建父maven模块 ...
- 向net core 3.0进击——Swagger的改变
目录 前言 引入 测试 小结 前言 十一小长假在不知不觉间可都没了,在这个小尾巴的空隙,把这两天鼓捣的net core 3.0升级过程记录一下,首先还是根据之前的顺序一个个补充进来,先从Swagger ...
- 尝鲜 vue3.x 新特性 - CompositionAPI
0. 基础要求 了解常见的 ES6 新特性 ES6 的导入导出语法 解构赋值 箭头函数 etc... 了解 vue 2.x 的基本使用 组件 常用的指令 生命周期函数 computed.watch.r ...