echarts图表和map地图

这里写目录标题

echarts是什么
使用echarts制作省市地图
使用
饼图pie
配置工具栏toolbox:
HTML5地理定位
高德地图api基础

echarts是什么

一个基于 JavaScript 的开源可视化图表库
官网:https://echarts.apache.org/zh/index.html

下载引入echarts
有几种方法可以具体看官网
npm下载比较快

使用echarts制作省市地图

echarts市级2d地图超链接

地图选择器的json文件,点击跳转下载

展示案例在U盘 h5新增功能里

echarts地图文字位置调整–>在地图.json中修改添加‘cp’

 "properties":{"name": "安阳市","cp": [  114.352482,  36.103442 ]}

展示效果

使用

   <style>/* 3给容器设置高 */#app {width: 600px;height: 400px;}</style>
</head><body><!--  2  创建视图容器 --><div id="app"></div>
</body>
<!-- 1 引入echarts -->
<script src="./js/echarts.min.js"></script>
<!-- 4. 创建图表 -->
<script>//  4-1 生成图表的实例化对象   echarts.init(DOM)  把dom对象作为容器初始化let mycharts = echarts.init(document.getElementById('app'));//  4-2  生成图表相关配置 const option = {//  图表的标题title: {//  标题文本text: 'echarts5分钟上手'},//  配置提示信息tooltip: {},//  配置图例legend: {data: ['销量', '产量']},// 折线图 直角坐标系  x轴 y轴xAxis: {//  设置x轴的类目 data: ['葡萄', '香蕉', '橘子', '菠萝']},yAxis: {},//  系列 图表所有的类型 都在这个字段中进行配置series: [//  每一个对象就是一个图表类型以及相关配置{//  type 字段设置图表类型type: 'line', // 折线图//  映射图例name: '销量',data: [50, 100, 1000, 30],}, {type: 'bar', // 柱状图name: '产量',data: [700, 334, 34, 654]/(当那一页为零,不想让其显示在页面上,应该让其数据为NAN)}]}//  4-3  设置配置项mycharts.setOption(option);
</script>

饼图pie

<body><div id="app"></div>
</body>
<script src="./js/echarts.js"></script>
<script>// 生成图表的实例化对象   echarts.init(DOM)  把dom对象作为容器初始化const app = echarts.init(document.getElementById('app'))const option = {title: {text: '饼图'},legend: {data: ['销量', '产量', '图书', '水果']},series: [{type: 'pie', //饼图pie// 半径大小  图表的大小radius: '55%',// 南丁格尔图// roseType: 'angle',// roseType: 'area',data: [//  一个对象代表一个数据 {value: 50,//  通过name和图例进行映射name: '销量'}, {value: 150,name: '产量'}, {value: 350,name: '图书'}, {value: 250,name: '水果'}]}]}//设置配置项app.setOption(option)
</script>

南丁格尔图
roseType: ‘angle’,
环形图可以改为南丁格尔图

     roseType: 'area',

配置工具栏toolbox:

<script>// 生成图表的实例化对象   echarts.init(DOM)  把dom对象作为容器初始化const app = echarts.init(document.getElementById('app'))const option = {title: {text: '带有工具栏的图'},xAxis: {data: ['气温', "湿度", '体感温度', '风力']},tooltip: {trigger: 'axis'},yAxis: {},//  配置工具栏toolbox: {show: true,feature: {saveAsImage: {title: '图片'},dataView: {title: '数据'},magicType: {type: ['line', 'bar'] //实现折线图和线性图的切换}}},series: [{type: 'bar',name: '气温',data: [10, 34, 45, 12]}, {type: 'bar',name: '湿度',data: [30, 78, 21, 62]}, {type: 'bar',name: '体感温度',data: [56, 45, 56, 72]}, {//  绘制直线图type: 'line',name: '风力',data: [5, 2, 8, 1]}]}app.setOption(option)
</script>

HTML5地理定位

可以获取的相关位置信息属性：有些是不获取不到的
coords.latitude 十进制数的纬度 ok 34.802228
coords.longitude 十进制数的经度 ok 113.54377
coords.accuracy 位置精度 ok 550
coords.altitude 海拔，海平面以上以米计 null
coords.altitudeAccuracy 位置的海拔精度 null
coords.heading 方向，从正北开始以度计 null
coords.speed 速度，以米/每秒计 null
timestamp 响应的日期/时间 ok 1617332645953

<body><h1> H5的地理定位 </h1><button>获取位置信息</button><p class="err"></p><ul class="list"></ul><script>//  h5 地理定位  getCurrentPosition(callback(), callback(), {}) 获取当前的位置信息， // 接受三个参数， 第一个参数是获取成功success回调函数, 有一个参数position , 是一个对象，包含当前位置的所有信息； 第二个参数 是获取失败的回调函数error, 第三个参数是配置项let list = document.querySelector('.list')let button = document.querySelector('button')let err = document.querySelector('.err')button.onclick = function() {window.navigator.geolocation.getCurrentPosition(function(position) {//  position  是当前位置信息对象list.innerHTML = `<li>十进制数的纬度  : ${ position.coords.latitude}</li><li>十进制数的经度  : ${ position.coords.longitude}</li><li>位置精度  : ${ position.coords.accuracy}</li><li>海拔，海平面以上以米计  : ${ position.coords.altitude}</li><li>位置的海拔精度  : ${ position.coords.altitudeAccuracy}</li><li>方向，从正北开始以度计  : ${ position.coords.heading}</li><li>速度，以米/每秒计    : ${ position.coords.speed}</li><li>响应的日期/时间    : ${ position.timestamp}</li>`}, function(error) {// 获取位置信息失败的回调函数   error  是错误信息switch (error.code) {//  用户拒绝获取位置信息case error.PERMISSION_DENIED:err.innerHTML = "User denied the request for Geolocation."break;//  位置信息不可用case error.POSITION_UNAVAILABLE:err.innerHTML = "Location information is unavailable."break;//  获取信息超时case error.TIMEOUT:err.innerHTML = "The request to get user location timed out."break;//  未知错误case error.UNKNOWN_ERROR:err.innerHTML = "An unknown error occurred."break;}}, {// 获取位置信息的相关配置项// timeout:5000})}</script>

手机端显示

高德地图api基础

在api坐标拾取器中可以输入名字查出经纬坐标

    <style>#container {width: 600px;height: 500px;border: 1px solid red;}</style>
</head><body><!--  1 创建地图容器，  容器必须使用id --><div id="container"></div><!--  2 引入 地图的 api --><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e2ed3a0841653e8f4e7846c93e1966cb"></script><script>// 3. 实例化地图对象  第一个是容器的id   第二个参数是地图的配置项const map = new AMap.Map('container', {//  地图缩放级别 zoom: 15,//  地图中心点center: [113.54377, 34.802228]})</script>

添加地图的覆盖物


```javascript```javascript```javascript
<body><div id="container"></div><!-- <div id="wrap"></div> --><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=17e50da3f7580e33dd2a2c243fc499cb"></script><script src="./js/marker.js"></script><script>const map = new AMap.Map('container', {center: [113.54377, 34.802228],zoom: 15});//  创建一个点标记const marker = new AMap.Marker({position: [113.54377, 34.802228], //以这个为准title: '河南省电子商务产业园12' //这个名字你写什么就是什么})const marker2 = new AMap.Marker({position: [113.542247, 34.802177],title: '中国电信'})// 添加到地图实例对象上map.add(marker)map.add(marker2)/*   // 多个点标记provinces.forEach(item => {// console.log(item.center.split(','));            let marker = new AMap.Marker({position:item.center.split(','),title:item.name,//1  通过每个覆盖物或控件的配置项添加到地图实例对象上map:map })//2  通过 地图实例对象的对应的方法添加对应的覆盖物或控件等// map.add(marker)})*///  添加地图相应控件AMap.plugin(['AMap.ToolBar', 'AMap.OverView'], () => {map.addControl(new AMap.ToolBar());map.addControl(new AMap.OverView())})</script>
</body>

出行路线规划

let routes = document.querySelector('.wrap ul')
const map = new AMap.Map('container', {center: [113.54377, 34.802228], //地图中心点zoom: 15
});
//  驾车路线规划  经纬度设置
AMap.plugin('AMap.Driving', function() {// 路线规划方案var driving = new AMap.Driving({// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式policy: AMap.DrivingPolicy.LEAST_TIME,map: map})//  起点经纬度var startLngLat = [113.54377, 34.802228]//  终点的经纬度var endLngLat = [113.778584, 34.759197]//  规划路线  回调函数就是规划的路线  路线信息在 resultdriving.search(startLngLat, endLngLat, function(status, result) {// 未出错时，result即是对应的路线规划方案console.log(result);let html = ''result.routes[0].steps.forEach(item => {html += `<li>${item.instruction}</li>`})routes.innerHTML = html;})
})

出行规划的另一种写法

<body><!-- 创建地图容器，  容器必须使用id --><div id="container"></div><div class="wrap" id="wrap"><ul></ul></div><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=17e50da3f7580e33dd2a2c243fc499cb"></script><script>let routes = document.querySelector('.wrap ul')const map = new AMap.Map('container', { //实例化地图对象center: [113.54377, 34.802228], //地图中心点zoom: 15,});//  关键字设置  以及添加途经点AMap.plugin('AMap.Driving', function() {// 路线规划方案var driving = new AMap.Driving({// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式policy: AMap.DrivingPolicy.LEAST_TIME,map: map,//使用指定的dom进行渲染, 绑定dom的id属性panel: 'wrap',})let point = [{//  起点keyword: '河南省电子商务产业园'},// 途经点, {keyword: '郑州第七十三中学'}, {//  终点keyword: '郑州市二七广场'}]/* (1)自己写的方法渲染到页面driving.search(point, function(status, result) {// 未出错时，result即是对应的路线规划方案// console.log(result);let html = ''result.routes[0].steps.forEach(item => {html += `<li>${item.instruction}</li>`})routes.innerHTML = html;})*/driving.search(point); //(2）使用默认的UI组件渲染路线.比自己写的要好看点})</script>

逆地址解析

    <style>#container {width: 600px;height: 600px;}</style>
</head><body><div class="wrap"><input type="text" id="ipt"></div><div id="container"></div><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e2ed3a0841653e8f4e7846c93e1966cb"></script><script>const map = new AMap.Map('container', {center: [113.54377, 34.802228], //云和数据坐标zoom: 15})AMap.plugin('AMap.Autocomplete', function() {// 实例化Autocompletevar autoOptions = {//city 限定城市，默认全国city: '全国',input: 'ipt' //输入框}var autoComplete = new AMap.Autocomplete(autoOptions);})</script>

能够通过你输入的信息进行联想

还可以搜索郑州大学的所有这个地区的信息

const map = new AMap.Map('container', {center: [113.54377, 34.802228], //云和数据坐标zoom: 15})AMap.plugin('AMap.PlaceSearch', function() {var placeSearch = new AMap.PlaceSearch({// city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcodecity: '郑州'})placeSearch.search('郑州大学', function(status, result) {// 查询成功时，result即对应匹配的POI信息console.log(status);console.log(result);})})

通过坐标反馈城市名

<script>const map = new AMap.Map('container', {center: [113.54377, 34.802228], //云和数据坐标zoom: 15})//  逆地址解析AMap.plugin('AMap.Geocoder', function() {var geocoder = new AMap.Geocoder({// city 指定进行编码查询的城市，支持传入城市名、adcode(区域代码) 和 citycode(城市代码)city: '全国'})var lnglat = [113.543813, 34.802285];//云和数据的坐标geocoder.getAddress(lnglat, function(status, result) {if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息console.log(result);//formattedAddress: "河南省郑州市中原区梧桐街道世界技能大赛(云计算}})})</script>