当前位置：网站首页>Shandong University project training (VI) Click event display line chart

Shandong University project training (VI) Click event display line chart

2022-06-29 18:33:00 【MeditationRain】

Add click events to multiple points and draw a line stacking chart , After clicking a point on the map , Display relevant information and display the line stacking chart . The relevant code of marking points has been modified , And added the code to draw the stacked line chart , This code is run after the click event , Otherwise, an error will be reported Uncaught Error: Initialize failed: invalid dom.

Insert picture description here

Before the code ：

var opts = {
    
    width: 200,
    height: 100,
	title: markerArr[i].title,
};
var p0 = markerArr[i].point.split(",")[0]; 
var p1 = markerArr[i].point.split(",")[1]; // According to the original array point The format puts forward the longitude and latitude of map point coordinates respectively 
point[i] = new window.BMapGL.Point(p0, p1); // Loop to generate new map points 
marker[i] = new window.BMapGL.Marker(point[i]); // Generate markers according to the coordinates of map points 

map.addOverlay(marker[i]);

infoWindow[i] = new BMapGL.InfoWindow(markerArr[i].address,opts);

Modified code ：

var opts = {
    
    width: 320,
    height: 200,
	title: markerArr[i].title,
};
var p0 = markerArr[i].point.split(",")[0]; //
var p1 = markerArr[i].point.split(",")[1]; // According to the original array point The format puts forward the longitude and latitude of map point coordinates respectively 
point[i] = new window.BMapGL.Point(p0, p1); // Loop to generate new map points 
marker[i] = new window.BMapGL.Marker(point[i]); // Generate markers according to the coordinates of map points 

// Attach a unique... To each map point id Of div
var sContent = `<div id="main-picture`+i+`" style="width: 300px;height:200px;"></div>`
map.addOverlay(marker[i]);

infoWindow[i] = new BMapGL.InfoWindow(sContent,opts);

Effect display ：

Insert picture description here
Insert picture description here

Source code display ：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title> Click the event to display the line chart </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
	    <script src="echarts.js"></script>
    <style> body, html, #container {
       overflow: hidden; width: 100%; height: 100%; margin: 0; font-family: " Microsoft YaHei "; } </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak= Your secret key "></script>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script> var markerArr = [ {
       title : " Shandong University （ Central campus ）", point : "117.066638,36.681366", address : " Shanda South Road, Licheng District, Jinan City 27 Number ", }, {
       title : " Shandong University （ Hongjialou campus ）", point : "117.075068,36.693073", address : " Hongjialou, Licheng District, Jinan City 5 Number ", }, {
       title : " Shandong University （ Qianfo Mountain Campus ）", point : "117.034848,36.656719", address : " Jingshi Road, Lixia District, Jinan City 17923 Number ", }, {
       title : " Shandong University （ Software Park Campus ）", point : "117.145921,36.673615", address : " Middle section of Shunhua road 1500 Number ", }, {
       title : " Shandong University （ Baotu Spring campus ）", point : "117.024525,36.658812", address : " Wenhua West Road, Jinan City, Shandong Province 44 Number ", }, {
       title : " Shandong University （ Xinglongshan Campus ）", point : "117.058082,36.606124", address : " Second Ring South Road, Shizhong District, Jinan City, Shandong Province 12550 Number ", }, ]; //  establish map example  var map = new BMapGL.Map('container'); //  The center of the map , Jinan City  //var point = new BMapGL.Point(117.126541,36.6584);  //  Initialize map , Set center point coordinates and map level . map.centerAndZoom(" Jinan City ", 13); //  Turn on mouse wheel zoom  map.enableScrollWheelZoom(true); //  Create an information window  var point = new Array(); // An array for storing longitude and latitude information of marked points  var marker = new Array(); // An array of annotation point objects  var infoWindow = new Array(); for (var i = 0; i < markerArr.length; i++) {
       var opts = {
       width: 320, height: 200, title: markerArr[i].title, }; var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; // According to the original array point The format puts forward the longitude and latitude of map point coordinates respectively  point[i] = new window.BMapGL.Point(p0, p1); // Loop to generate new map points  marker[i] = new window.BMapGL.Marker(point[i]); // Generate markers according to the coordinates of map points  var sContent = `<div id="main-picture`+i+`" style="width: 300px;height:200px;"></div>` map.addOverlay(marker[i]); infoWindow[i] = new BMapGL.InfoWindow(sContent,opts); var datas=[ [[43,64,65,82,48,56],[44,57,74,77,49,95],[58,65,64,34,52,40],[67,57,55,72,98,54]], [[43,64,43,34,48,47],[56,57,74,47,49,65],[56,48,65,94,52,40],[65,57,55,77,32,54]], [[43,64,65,34,48,47],[56,57,74,47,99,95],[56,44,64,34,52,40],[64,57,52,55,98,54]], [[49,65,43,34,57,47],[44,57,47,49,36,95],[56,48,64,34,90,67],[55,57,98,35,98,54]], [[43,64,65,34,48,57],[47,56,77,49,36,95],[55,34,64,34,52,40],[65,57,55,77,98,54]], [[43,64,65,34,49,57],[44,55,37,89,36,95],[55,34,86,69,59,40],[45,54,55,72,94,54]], ]; console.log(infoWindow); //  Click mark to add click event  marker[i].addEventListener("click", (function(k) {
       // js  Closure  return function() {
       // Will be clicked marker Center  map.centerAndZoom(point[k], 20); // stay marker Open the search information window  map.openInfoWindow(infoWindow[k], point[k]); //  Based on the prepared dom, initialization echarts example  var myChart = echarts.init(document.getElementById('main-picture'+k)); //  Specify configuration items and data for the chart  var option = {
       tooltip: {
      }, legend: {
       data: ['PM2.5', 'CO', 'NO2', 'SO2'] }, xAxis: {
       data: ['20 Japan ', '21 Japan ', '22 Japan ', '23 Japan ', '24 Japan ', '25 Japan '] }, yAxis: {
      }, series: [ {
       name: 'PM2.5', type: 'line', smooth: true, data: datas[k][0], }, {
       name: 'CO', type: 'line', smooth: true, data: datas[k][1] }, {
       name: 'NO2', type: 'line', smooth: true, data: datas[k][2] }, {
       name: 'SO2', type: 'line', data: datas[k][3] }, ] }; //  Use the configuration item and data display chart just specified . myChart.setOption(option); } })(i)); } </script>
原网站

版权声明
本文为[MeditationRain]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/180/202206291807386217.html

边栏推荐

猜你喜欢

随机推荐