echarts矢量折线统计图简单实现

最新推荐文章于 2022-11-29 15:43:01 发布

dy2017

最新推荐文章于 2022-11-29 15:43:01 发布

阅读量588

点赞数

分类专栏： js 文章标签： javascript echarts

本文链接：https://blog.csdn.net/dy2017/article/details/107171914

版权

js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

需求：要求在百度地图上绘制矢量折线统计图，模拟A点对周边环境影响值

两种处理方式：

一、采用点标注方式，标注内容替换成echarts统计图，统计图不能随地图缩放，统计数据与地图坐标没有关联，只能简单示意

二、采用绘制矢量图形方式，绘制坐标轴，绘制数据线，坐标轴刻度线，刻度文本，数据点文本：采用series: scatter方式

本案例不是最终处理代码，只是简单示意。

标注点方式：

<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
	<style type="text/css">
		html {
			height: 100%
		}

		body {
			height: 100%;
			margin: 0px;
			padding: 0px
		}

		#container {
			height: 100%
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=E4805d16520de693a3fe707cdc962045"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=xxxx&amp;services=&amp;t=20200327103013"></script>
	<script type="text/javascript" src="js/complexCustomOverlay.js"></script>
	<div id="container"></div>
	<script>
		var map = new BMap.Map("container"); // 创建Map实例
		map.centerAndZoom(new BMap.Point(121.620523, 31.290215), 18);
		map.enableScrollWheelZoom(true);
		
		var drawPie = function(obj) {
			var echarts2 = echarts.init(obj);
			var xAxisData = [];
			var data1 = [];
			var data2 = [];
			for (var i = 0; i < 100; i++) {
			    xAxisData.push('类目' + i);
			    data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
			    data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
			}
			
			option = {
			    legend: {
			        data: ['bar', 'bar2']
			    },
			    toolbox: {
			        // y: 'bottom',
			        feature: {
			            magicType: {
			                type: ['stack', 'tiled']
			            },
			            dataView: {},
			            saveAsImage: {
			                pixelRatio: 2
			            }
			        }
			    },
			    tooltip: {},
			    xAxis: {
			        data: xAxisData,
			        splitLine: {
			            show: false
			        }
			    },
			    yAxis: {
			    },
			    series: [{
			        name: 'bar',
			        type: 'bar',
			        data: data1,
			        animationDelay: function (idx) {
			            return idx * 10;
			        }
			    }, {
			        name: 'bar2',
			        type: 'bar',
			        data: data2,
			        animationDelay: function (idx) {
			            return idx * 10 + 100;
			        }
			    }],
			    animationEasing: 'elasticOut',
			    animationDelayUpdate: function (idx) {
			        return idx * 5;
			    }
			};
			
			echarts2.setOption(option);
		};
		// 实例化自定义Overlay,传入经纬度以及回调方法
		var myCompOverlay = new ComplexCustomOverlay(121.620483, 31.291102, drawPie);
		map.addOverlay(myCompOverlay);
	</script>
</body>

complexCustomOverlay.js代码，网上抄的，忘了是哪位仁兄写的了，抱歉

!function(baiduMap) {
        /**
         * 自定义覆盖物类, 取名 ComplexCustomOverlay 使用时直接 new ComplexCustomOverlay 即可
         * 示例 new ComplexCustomOverlay(121.620483, 31.291102, function(div_obj){});
         * @param {*} lng 经度
         * @param {*} lat 维度
         * @param {*} callback 回调方法
         */
        ComplexCustomOverlay = function(lng, lat, callback) {
            this._point = new baiduMap.Point(lng, lat);
            this._callback = callback;
        };
		//继承Overlay基类
        ComplexCustomOverlay.prototype = new baiduMap.Overlay();
		/**
          * 实现initialize方法，此方法在map.addOverlay(--)时会自动调用，完成初始化工作
         */
        ComplexCustomOverlay.prototype.initialize = function(map) {
            this._map = map;
            //生成div,用来承载ECharts
            var div = this._div = document.createElement("div");
            // 可以根据情况添加些样式信息
            // div.style.backgroundColor = "#fff";
            div.style.zIndex = baiduMap.Overlay.getZIndex(this._point.lat);
            div.style.width = "500px";
            div.style.height = "500px";
            // marginLeft marginTop 的设置可以让这个div的中心点和给定的经纬度重合
            div.style.marginLeft = '-50px';
            div.style.marginTop = '-50px';
            //必须是绝对定位，不然会偏离原来位置
            div.style.position='absolute';
            //将该覆盖物添加到标签覆盖物列表
            map.getPanes().labelPane.appendChild(div);
            //调用传入的回调方法
            this._callback(div);
            return div;
        };
		/**
          * 当地图发生变化，会自动调用此方法，进行覆盖物的重绘工作
          * 例如 拖动地图、地图放大缩小等操作，都会自动调用draw方法进行重绘
         */
        ComplexCustomOverlay.prototype.draw = function(){
            //饼图的位置设置,需要获取该地图点的像素位置x,y
            var pixel = this._map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x + "px";
            this._div.style.top  = (pixel.y - 30) + "px";
        }
}(BMap); // 将BMap作为参数传入

绘制矢量图形方式：

<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
	<style type="text/css">
		html {
			height: 100%;
			width: 100%;
		}

		body {
			height: 100%;
			margin: 0px;
			padding: 0px
		}

		#container {
			height: 100%;
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=xxxxxx"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
	<div id="container"></div>
	<script>
		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var pt1s = [
			[116.3205, 40.0613],
			[116.3205, 40.0811],
			[116.3205, 40.1009]
		];
		var pt2s = [
			[116.3188, 40.0811],
			[116.3700, 40.0811]
		];
		var pt3s = [
			[116.3205, 40.0811],
			[116.3215, 40.0821],
			[116.3225, 40.0827],
			[116.3235, 40.0831],
			[116.3245, 40.0831],
			[116.3249, 40.0833],
			[116.3259, 40.0839],
			[116.3269, 40.0845],
			[116.3269, 40.0834],
		]
		var _data = [{
				name: 'y轴',
				coords: pt1s,
				lineStyle: {
					color: '#6ea500',
					type: 'solid'
				},
			}, {
				name: 'x轴',
				coords: pt2s,
				lineStyle: {
					color: '#ff5500',
					type: 'solid', //'dashed'
				},
			},
			{
				name: '数据',
				coords: pt3s,
				lineStyle: {
					color: '#0000ff',
					type: 'solid',
					curveness: 1
				}
			}
		];
		var geoCoordMap = {
			'Y轴': [116.3205, 40.1009],
			'100': [116.3205, 40.0989],
			'101': [116.3205, 40.0940],
			'180': [116.3205, 40.0910],
			'190': [116.3205, 40.0860],
			'200': [116.3205, 40.0833],
		};
		//随后定义每个位置需要显示的量的值
		var data = [{
				name: 'Y轴',
				value: 0
			},
			{
				name: '100',
				value: 100
			},
			{
				name: '101',
				value: 101
			},
			{
				name: '180',
				value: 180
			},
			{
				name: '190',
				value: 190
			},
			{
				name: '200',
				value: 200
			},
		];

		var convertData = function(data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var geoCoord = geoCoordMap[data[i].name]; //首先根据data中的name作为键值读入地理坐标
				//var rjj1 = data[i].value;
				if (geoCoord) {
					res.push({
						name: data[i].name,
						value: geoCoord.concat(data[i].value) //随后将地理坐标与对应信息值衔接起来
						//成为了 [name 经度 纬度 value]的形式

					});
				}
			}
			//console.log(res)
			return res;
		};

		var option = {
			bmap: {
				center: [116.3205, 40.0811],
				zoom: 15,
				roam: true,
			},
			series: [{
					type: 'lines',
					coordinateSystem: 'bmap',
					polyline: true,
					data: _data,
					silent: false,
					lineStyle: {
						color: '#fff',
						opacity: 1,
						width: 2,
					}
				},
				//画点
				{
					name: 'Y轴',
					type: 'scatter',
					coordinateSystem: 'bmap',
					data: convertData(data),

					symbolSize: 5,
					symbol: 'circle', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'也可以自定义用图片表示
					label: {
						normal: {
							formatter: '{b}',
							position: 'left',
							show: true,
							fontSize: 18,
						},
						emphasis: {
							show: true
						}
					},
					itemStyle: {
						normal: {
							color: 'green' //点的颜色
						}
					}
				},  
			]
		}
		myChart.setOption(option, true);
	</script>
</body>

dy2017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts矢量折线统计图简单实现

需求：要求在百度地图上绘制矢量折线统计图，模拟A点对周边环境影响值两种处理方式：一、采用点标注方式，标注内容替换成echarts统计图，统计图不能随地图缩放，统计数据与地图坐标没有关联，只能简单示意二、采用绘制矢量图形方式，绘制坐标轴，绘制数据线，坐标轴刻度线，刻度文本，数据点文本：采用series:scatter方式本案例不是最终处理代码，只是简单示意。标注点方式：<!DOCTYPE html><meta name="viewport" content="i.
复制链接

扫一扫

专栏目录