echart BMap 使用记录

最新推荐文章于 2021-07-09 11:05:45 发布
最新推荐文章于 2021-07-09 11:05:45 发布
阅读量310 收藏 1
点赞数
文章标签： html5 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41645458/article/details/106256527
版权

echart

legend 作用
在这里插入图片描述
tooltip 作用

在这里插入图片描述
可以文本框编辑，用的数据是 series里面的数据

tooltip: {
	   trigger: 'axis',
	   backgroundColor:'rgba(0, 0, 0, 0.86)',
	   axisPointer: {
	       type:'line',
	       lineStyle:{
	           color:'rgba(255, 255, 255, 0.2)'
	       }
	   },
	   formatter:function (params) {
	       // console.log(params)  series数据
	       if(params.length>1){
	           var icon1 = '<span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:rgba(3, 207, 215, 1)"></span>'
	           var icon2 = '<span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:rgba(228, 70, 100, 1)"></span>'
	           var result = params[0].name +"</br>" + icon1  + params[0].seriesName + ": " +  params[0].data + ' 元' +"</br>" + icon2 + params[1].seriesName  + ": "+ params[1].data + ' 件'
	       }else {
	          if(params[0].seriesIndex == 0){
	              var icon1 = '<span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:rgba(3, 207, 215, 1)"></span>'
	              var result = params[0].name +"</br>" + icon1  + params[0].seriesName + ": " +  params[0].data + ' 元'
	          }else {
	              var icon1 = '<span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:rgba(228, 70, 100, 1)"></span>'
	              var result = params[0].name +"</br>" + icon1  + params[0].seriesName + ": " +  params[0].data + ' 件'
	          }
	       }
	       return result
	   }
},

X轴Y轴可以放多条边线

yAxis: [
  {
        name:'销\n售\n额',  //每字换行
        nameLocation:'center',  //上下居中
        nameRotate: 360,  //旋转
        nameTextStyle:{
            color:'rgba(67,159,224,1)',
            fontSize:10,
            padding:[0,25,0,0]   //调整位置
        },
        type: 'value',
        position: 'left',
        axisLine: {
            lineStyle: {
                color: 'rgba(41, 184, 255, 0.3)'
            }
        },
        splitLine: {
            lineStyle: {
                type: 'solid',
                color: 'rgba(255, 255, 255, 0.06)'
            }
        },
        axisLabel: {   // X轴线 标签修改
            textStyle: {
                color: 'rgba(129, 146, 168, 1)', //坐标值得具体的颜色
            }
        },
        axisTick: { //y轴刻度线
            show: false
        },
    },
    {
        name:'销\n售\n量',
        nameLocation:'center',
        nameRotate: 360,
        nameTextStyle:{
            color:'rgba(67,159,224,1)',
            fontSize:10,
            padding:[0,0,0,10]
        },
        type: 'value',
        position: 'right',
        axisLine: {
            onZero: false,
            lineStyle: {
                color: 'rgba(41, 184, 255, 0.3)'
            }
        },
        splitLine: {
            lineStyle: {
                type: 'solid',
                color: 'rgba(255, 255, 255, 0.06)'
            }
        },
        axisLabel: {   // X轴线 标签修改
            textStyle: {
                color: 'rgba(129, 146, 168, 1)', //坐标值得具体的颜色
            }
        },
        axisTick: { //y轴刻度线
            show: false
        }
    },
],

在这里插入图片描述

BMap

html

<div class="map-content" id="_mapNew" style="background: rgb(252, 249, 242); cursor: pointer;">

js

var map = new BMap.Map("_mapNew", {enableMapClick:false});
//坐标
var point = new BMap.Point(105.711901,28.586921);
map.centerAndZoom(point, 16);
map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_LEFT,
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
});
map.addControl(navigationControl);

if(!isSupportCanvas()){
    alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
}
//热力图
heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
map.addOverlay(heatmapOverlay);
//points  为数据  是数组
heatmapOverlay.setDataSet({data:points,max:100});
heatmapOverlay.show();
function isSupportCanvas(){
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}

//改变热力图渐变色
setGradient();
function setGradient() {
    var gradient = {
        0:'rgba(0,151,255,1)',
        0.1:'rgba(0,151,255,1)',
        0.65:'rgba(0,151,255,1)',
        0.85:'rgba(121,200,255,1)',
        1:'rgba(255,0,0,1)',
    };
    var colors = document.querySelectorAll("input[type='color']");
    colors = [].slice.call(colors, 0);
    colors.forEach(function (ele) {
        gradient[ele.getAttribute("data-key")] = ele.value;
    });
    heatmapOverlay.setOptions({
        "gradient": gradient
    });
}

//自定义样式
map.setMapStyleV2({styleJson:styleJson});

//自定义样式需要  v=3.0支持
<script type="text/javascript" src="https://api.map.baidu.com/api?ak=xxxxx&v=3.0&s=1" charset="utf-8"></script>

//热力图
<script type="text/javascript" src="https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

//自定义样式文件
<script src="{pigcms{$static_path}js/baidumap/customMap.js"></script>

自定义样式
customMap.js

var styleJson = [{
    "featureType": "land",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#080E34FF"
    }
}, {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#0F215AFF"
    }
}, {
    "featureType": "green",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#0E1F5CFF"
    }
}, {
    "featureType": "building",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#11317BE6",
        // "borderColor":"#FFFFFFFF"
    }
}, {
    "featureType": "building",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#11317BE6",
        // "borderColor":"#FFFFFFFF"
    }
},{
    "featureType": "building",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#0E1D52E6",
        "borderColor":"#FFFFFFFF"
        // "border":"1px solid #FFFFFFFF",
        // "fontWeight":"normal",
        // "fontSize":"20",
    }
}, {
    "featureType": "building",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#11317BE6",
        "borderColor":"#FFFFFFFF"
    }
}, {
    "featureType": "subwaystation",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#11317BE6"
    }
}, {
    "featureType": "education",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#11317BE6"
    }
}, {
    "featureType": "medical",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#11317BE6",
        "border":"1px solid #FFFFFFFF",
        "fontSize":"12px",
        "borderColor":"#FFFFFF"
    }
}, {
    "featureType": "scenicspots",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#11317BE6"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": 4
    }
}, {
    "featureType": "highway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "highway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#0E1D52E6",
        "borderColor":"#FFFFFFFF"
        // "border":"1px solid #FFFFFFFF",
        // "fontWeight":"normal",
        // "fontSize":"20",
    }
}, {
    "featureType": "highway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#0E1D52E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "highway",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": 2
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#0E1D52E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "arterial",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#0E1D52E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "local",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": 1
    }
}, {
    "featureType": "local",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "local",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "local",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "local",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#0E1D52E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "local",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#0E1D52E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "railway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": 1
    }
}, {
    "featureType": "railway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "railway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "subway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": 1
    }
}, {
    "featureType": "subway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "subway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "subway",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "subway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#0E1D52E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "subway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#0E1D52E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "continent",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "continent",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "continent",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#1379C6E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "continent",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1379C6E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "city",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "city",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "city",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#1379C6E6",
        "border":"1px solid #FFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "city",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1379C6E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "town",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "town",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "town",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#1379C6E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "town",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1379C6E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "districtlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "road",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "road",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#0E1D52E6"
    }
}, {
    "featureType": "district",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#168FEAFF",
        // "border":"1px solid #FFFFFFFF",
        // "fontWeight":"normal",
        
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "visibility":"off",
        "color": "#FFFFFF00",
    }
}, {
    "featureType": "manmade",
    "elementType": "geometry",
    "stylers": {
        "color": "#080E34FF"
    }
}, {
    "featureType": "districtlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1379C6E6",
        "border":"1px solid #FFFFFFFF",
        "fontWeight":"normal",
        "fontSize":"12",
    }
}, {
    "featureType": "entertainment",
    "elementType": "geometry",
    "stylers": {
        "color": "#080E34FF"
    }
}, {
    "featureType": "shopping",
    "elementType": "geometry",
    "stylers": {
        "color": "#080E34FF"
    }
}];
marconiho
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts+bmap
u011200562的博客
03-23 2754
先上效果图： 这个在echarts官网上有事例https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 但是没有写怎么具体实现，接下来我写下实现方式，上代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> .
ECharts 百度地图扩展插件bmap.min.js，可以在百度地图上展现 点图，线图，热力图 等可视化。
07-02
ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。建议大家使用以百度地图为底图的形式，需要引入扩展插件bmap.min.js,扩展主要提供了跟 geo 一样的坐标系和底图的绘制
echarts引入百度地图API，设置bmap属性问题
热门推荐
u011295864的博客
11-22 3万+
echarts option里的bmap属性结构如下： bmap: { center: [117.239346, 31.824116], // 当前视角中心位置的坐标 zoom: 12, roam: true }, 其中center表示默认情况下  地图的中心点坐标；zoom表示默认情况下地图缩放级别；roam表示用...
echarts 中使用百度地图 bmap （基础使用：仅显示、定义样式）
qq_34695703的博客
08-11 1万+
1. 实现功能 实现简单的自定义样式百度地图，仅显示（基础，可自己研究扩展） 效果： 2. 代码步骤 第一步：创建基础结构，id=“map” 的 div做 echarts 容器 <!DOCTYPE html> <html> <head> <title>Echarts - 百度地图</title> <meta charset="utf-8"> <style type="text/css"> ...
echart bmap-echart 结合 部分地图高亮
weixin_42403127的博客
03-30 1481
设置百度地图样式修改 http://lbsyun.baidu.com/customv2/editor/82e7bad64506614df73507d2f8a35847/teafield 在此基础上修改的，可以参考一下这个 function loadMap(data,id) { var path=[]; myChart = echarts.init(document.getElementByI...
echart-bmap：vue + echart + bmap结合演示
02-12
echart-bmap 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。 echarts与bmap结合使用，同时使用了bmap的集群标记和echarts中的effectscatter在地图中进行标注。拖拽自动框选择放置当前地图中心点所在城市的边界
echarts+bmap结合可以在百度地图上展现 点图，线图，热力图 等可视化。
03-23
通过`type: 'custom'`，用户可以使用`renderItem`方法绘制任意形状，实现热力图或其他复杂的地图效果。 在配置ECharts系列时，需要指定`coordinateSystem: 'bmap'`，以便在百度地图上定位数据。同时，可以通过`data...
echarts_bmap.js
10-12
echarts引入bmap必须的扩展插件
Bmap+echarts+kriging热力图.rar
03-31
《基于Bmap、Echarts与Kriging的气象资源热力图详解》 在现代数据分析与可视化领域，Bmap、Echarts以及Kriging技术的结合应用为气象资源的展示提供了强大的工具。本文将深入探讨这三种技术的核心原理及其在构建热力...
bmap.min.js
10-20
结合echarts使用绘制百度地图
Echarts 地图扩展插件 bmap.min.js
08-07
Echart-Map地图
07-10
Echart-Map可用，附带js文件，点击Map.html即可将数据展现出来。本人也是折腾了大半天才弄出来的，在csdn里也下载了好多别人的，发现都是没什么用的。
echart使用地图china.js
09-24
echarts 地图china.js 之前使用的时候本地没问题，打包到线上报错，稍微改了一下，引入方式发生了改变，如下： import china from "@/components/common/china.js"; china()({}, echarts);
调用百度地图api例子
12-08
调用百度地图api获得指定地点经纬度以及附近poi。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
前端笔记-echarts加载bmap地图
IT1995的博客
03-19 7764
程序运行截图如下： 这里首先要申请个百度地图密钥 使用下面的方式输入密钥，这里使用jsonp的方式 源码如下： <html> <head> <title></title> <script src="echarts.js"></script> <script src="bmap.js"...
Echart + Bmap 画图显示地图控件 （缩放控件）
请赐教
07-09 1567
虽然Echart中集成了Bmap，但是默认使用是不加载控件的，即如图所示这些都是没有的。 如果需要的话，要获取model中的bmap后自己添加，注意获取需写在 myChart.setOption(option); 之后，不然会报错。 var bmap = myChart.getModel().getComponent('bmap').getBMap(); //获取控件 bmap.addControl(new BMap.NavigationControl());
ECharts+BMap，八个控件、点、线
Hello_sum的博客
08-10 7264
  介绍：EChart+百度地图，显示左侧八个小图标（百度地图控件）、动态散点类型（effectScatter）、线条（lines），再加上对这些控件、类型的一个样式设计。 学习：通过EChart、百度地图API官网的示例，与网上许多的参考。同时自己也添加了许多注释帮助理解。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
Echarts中使用bmap作为底图，添加行政划区遮罩层
L1nJIayu的博客
05-26 5411
前段时间需要做一个地图，由于思路错误等各种原因，走走停停也搞了大半个月。。。。。记录以下心路历程，希望能帮助到有需要的同学们。。。 要求的效果大概是这个样子的： 第一反应就是，拿bmap作为底图，然后再用geo画一个地图，两个地图重合不就OK了嘛！结果。。太天真。。。查了很多资料，大概就是说，这样子做，会导致两个地图使用的是各自的地图组件，这样如果用户缩放的时候，就不会同步缩放，而且会有坐标点不在同一个地方的情况！ 出现的效果大概是这个样子： （上面的效果，是我用geo画的，拿到深圳地图的G
echart使用离线地图
最新发布
01-23
coordinateSystem: 'bmap', // 使用百度地图坐标系 data: [ {name: '北京', value: [116.403963, 39.915119]}, {name: '上海', value: [121.487899, 31.249162]}, {name: '广州', value: [113.30765, 23.120049...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值