Code H5 achieve charts and maps are as follows:
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 = src = "https://map.qq.com/api/js?v=2.exp&key=IZJBZ-PAUKF-YQOJ6-JM4TR-T3RT5-N6BM5&libraries=drawing,geometry,place " utf-8 ", Convertor, Visualization "> </ Script> 41 is <Script type =" text / JavaScript "> 42 is // based ready dom, instance initialization echarts 43 is var myChart = echarts.init (document.getElementById ( 'main' )); 44 // specified configurations and chart data 45 myChart.setOption ({ 46 is 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: to false , 83 Symbol: 'none', // remove the small dots 84 ItemStyle: { 85 Normal: { 86 the lineStyle: { 87 width: 2 , 88 type: 'dotted', //'dotted' dashed lines 'solid' solid line 89 Color: '# 2BB4DF' 90 } 91 is } 92 } 93 }, 94 { 95 Data: [60,60,60,60,60 ], 96 type: 'Line' , 97 Smooth: to false , 98 Symbol: 'none', // remove the small dots 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 //Direct loading map 116 // initialize function map custom function name the init 117 function the init () { 1 18 // define a map variable calls qq.maps.Map () Constructor Map display container 119 var map = new new qq.maps.Map (document.getElementById ( "Container" ), { 120 Center: new new qq.maps.LatLng (39.910,116.399), // center of the map geographic coordinates. 121 Zoom: 14 // map of central geographic coordinates. 122 }); 123 124 var Polyline = new 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 // calls the initialization function map 153 the init (); 154 } 155 </ Script> 156 </ body> 157 </ HTML>
FIG mobile terminal effects as follows:
We analyze the code above,
Charts used echarts, introduced echarts.min.js. The js file address https://github.com/LuoYiHao/echarts/blob/master/echarts.min.js .
Tencent map using a map, cites two libraries line.
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>
The graph is a line chart, a good x-axis data set (XAXIS) of
1 xAxis: { 2 type: 'category', 3 data: [1,2,3,4,5], 4 axisLabel:{ 5 textStyle:{ 6 fontSize:8 7 } 8 } 9 },
Provided in the formatter unit in the y-axis,
1 yAxis: { 2 type: 'value', 3 axisLabel:{ 4 formatter:'{value}℃', 5 textStyle:{ 6 fontSize:8 7 } 8 } 9 },
Then set the y-axis data (YAXIS) a.
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 is type: 'Line' , . 19 Smooth: to false , 20 is Symbol: 'none', // remove the small dot 21 is ItemStyle: { 22 is Normal: { 23 is the lineStyle: { 24 width: 2 , 25 type: 'dotted', / / 'dotted' 'solid' solid line a dotted line 26 is Color: '# 2BB4DF' 27 } 28 } 29 } 30 }, 31 is { 32 Data: [60,60,60,60,60 ], 33 is type: 'line', 34 is Smooth: to false , 35 Symbol: 'none', // remove the small dots 36 ItemStyle: { 37 [ Normal: { 38 is the lineStyle: { 39 width: 2 , 40 type: 'dotted', // 'dotted' dashed lines' solid 'solid line 41 is Color:' # 2BB4DF ' 42 is } 43 is } 44 is } 45 }, 46 is ],
A plurality of folding lines can be drawn, and the color setting, broken and solid lines, dots and so on whether coupled state.
You can set the map center coordinates,
1 // define a map variable calls qq.maps.Map () Constructor Map display container 2 var map = new new qq.maps.Map (document.getElementById ( "Container" ), { . 3 Center: new new qq.maps.LatLng (39.910,116.399), // Center geographic coordinates map. . 4 Zoom: 14 // map of central geographic coordinates. 5 });
And plot the line path (Polyline) the coordinates of a plurality of points,
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 });
Then set position mark (marker) and markers replacement icon.
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);