H5实现图表和地图的代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>图表和地图</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
6 <style type="text/css">
7 html,body{
8 width:100%;
9 height:100%;
10 }
11 *{
12 margin:0px;
13 padding:0px;
14 }
15 body, button, input, select, textarea {
16 font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
17 }
18 p{
19 width:603px;
20 padding-top:3px;
21 overflow:hidden;
22 }
23 .btn{
24 width:142px;
25 }
26 #container{
27 width:100%;
28 height:300px;
29 }
30 </style>
31 </head>
32 <body>
33 <div id="main" style="width: 100%;height:400px;"></div>
34 <div id="container"style="margin-bottom: 50px"></div>
35
36 <script type="text/javascript" src="asset/js/jquery-2.2.4.js"></script>
37 <script type="text/javascript" src="asset/js/echarts.min.js"></script>
38
39 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5"></script>
40 <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>
41 <script type="text/javascript">
42 // 基于准备好的dom，初始化echarts实例
43 var myChart = echarts.init(document.getElementById('main'));
44 // 指定图表的配置项和数据
45 myChart.setOption({
46 xAxis: {
47 type: 'category',
48 data: [1,2,3,4,5],
49 axisLabel:{
50 textStyle:{
51 fontSize:8
52 }
53 }
54 },
55 yAxis: {
56 type: 'value',
57 axisLabel:{
58 formatter:'{value}℃',
59 textStyle:{
60 fontSize:8
61 }
62 }
63 },
64 series: [
65 {
66 data: [20,30,50,60,30],
67 type: 'line',
68 smooth: true,
69 symbol: 'none',//去掉小圆点
70 itemStyle: {
71 normal: {
72 color: '#537FE2',
73 lineStyle: {
74 color: '#537FE2'
75 }
76 }
77 }
78 },
79 {
80 data: [10,10,10,10,10],
81 type: 'line',
82 smooth: false,
83 symbol: 'none',//去掉小圆点
84 itemStyle:{
85 normal:{
86 lineStyle:{
87 width:2,
88 type:'dotted', //'dotted'虚线 'solid'实线
89 color:'#2BB4DF'
90 }
91 }
92 }
93 },
94 {
95 data: [60,60,60,60,60],
96 type: 'line',
97 smooth: false,
98 symbol: 'none',//去掉小圆点
99 itemStyle:{
100 normal:{
101 lineStyle:{
102 width:2,
103 type:'dotted', //'dotted'虚线 'solid'实线
104 color:'#2BB4DF'
105 }
106 }
107 }
108 },
109 ],
110 })
111 </script>
112 <script>
113 window.onload = function(){
114
115 //直接加载地图
116 //初始化地图函数 自定义函数名init
117 function init() {
118 //定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
119 var map = new qq.maps.Map(document.getElementById("container"), {
120 center: new qq.maps.LatLng(39.910,116.399), // 地图的中心地理坐标。
121 zoom:14//地图的中心地理坐标。
122 });
123
124 var polyline = new qq.maps.Polyline({
125 path: [
126 new qq.maps.LatLng(39.915, 116.399),
127 new qq.maps.LatLng(39.920, 116.389),
128 new qq.maps.LatLng(39.930, 116.399)
129 ],
130 strokeColor: '#000000',
131 strokeWeight: 2,
132 map
133 });
134
135 var marker = new qq.maps.Marker({
136 position: new qq.maps.LatLng(39.920,116.380),
137 map: map,
138 });
139 var anchor = new qq.maps.Point(0, 39),
140 size = new qq.maps.Size(42, 68),
141 origin = new qq.maps.Point(0, 0),
142 markerIcon = new qq.maps.MarkerImage(
143 "https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
144 size,
145 origin,
146 anchor
147 );
148 marker.setIcon(markerIcon);
149
150 }
151
152 //调用初始化函数地图
153 init();
154 }
155 </script>
156 </body>
157 </html>手机端效果图如下：
我们对以上代码进行分析，
图表使用了echarts，引入了echarts.min.js。
地图用的是腾讯地图，引用了线上的两个库。
1 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5"></script>
2 <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）的数据,
1 xAxis: {
2 type: 'category',
3 data: [1,2,3,4,5],
4 axisLabel:{
5 textStyle:{
6 fontSize:8
7 }
8 }
9 },在formatter里设置y轴的单位，
1 yAxis: {
2 type: 'value',
3 axisLabel:{
4 formatter:'{value}℃',
5 textStyle:{
6 fontSize:8
7 }
8 }
9 },然后设置y轴（yAxis）的数据。
1 series: [
2 {
3 data: [20,30,50,60,30],
4 type: 'line',
5 smooth: true,
6 symbol: 'none',//去掉小圆点
7 itemStyle: {
8 normal: {
9 color: '#537FE2',
10 lineStyle: {
11 color: '#537FE2'
12 }
13 }
14 }
15 },
16 {
17 data: [10,10,10,10,10],
18 type: 'line',
19 smooth: false,
20 symbol: 'none',//去掉小圆点
21 itemStyle:{
22 normal:{
23 lineStyle:{
24 width:2,
25 type:'dotted', //'dotted'虚线 'solid'实线
26 color:'#2BB4DF'
27 }
28 }
29 }
30 },
31 {
32 data: [60,60,60,60,60],
33 type: 'line',
34 smooth: false,
35 symbol: 'none',//去掉小圆点
36 itemStyle:{
37 normal:{
38 lineStyle:{
39 width:2,
40 type:'dotted', //'dotted'虚线 'solid'实线
41 color:'#2BB4DF'
42 }
43 }
44 }
45 },
46 ],可以画出多条折线，并设置颜色、虚实线、是否加上小圆点等状态。
地图则可以设置中心坐标，
1 //定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
2 var map = new qq.maps.Map(document.getElementById("container"), {
3 center: new qq.maps.LatLng(39.910,116.399), // 地图的中心地理坐标。
4 zoom:14//地图的中心地理坐标。
5 });并根据多个点的坐标画出路径线（polyline），
1 var polyline = new qq.maps.Polyline({
2 path: [
3 new qq.maps.LatLng(39.915, 116.399),
4 new qq.maps.LatLng(39.920, 116.389),
5 new qq.maps.LatLng(39.930, 116.399)
6 ],
7 strokeColor: '#000000',
8 strokeWeight: 2,
9 map
10 });然后可以设置标记（marker）的位置和更换标记的图标。
1 var marker = new qq.maps.Marker({
2 position: new qq.maps.LatLng(39.920,116.380),
3 map: map,
4 });
5 var anchor = new qq.maps.Point(0, 39),
6 size = new qq.maps.Size(42, 68),
7 origin = new qq.maps.Point(0, 0),
8 markerIcon = new qq.maps.MarkerImage(
9 "https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
10 size,
11 origin,
12 anchor
13 );
14 marker.setIcon(markerIcon);代码示例地址：https://github.com/LuoYiHao/chart-and-map。
