Jsp uses ECharts to dynamically mark points on the map, jspecharts

Jsp uses ECharts to dynamically mark points on the map, jspecharts

ECharts allows you to easily draw maps and charts on a web page, and provides functions such as downloading images, enlarging, downgrading, and dragging. Today, we will focus on its map type (type: 'map.

First, the coordinates of the ECharts Map need to be stored in a geoCoord attribute. It is a JS dictionary object consisting of key/value pairs. The key represents the vertex name, the value represents its coordinates, which are composed of longitude and latitude. It is an array, for example, [136.00, 32.00]. It represents a coordinate.

Elements to be followed by map-type charts

Title: title, indicating the name of the map

Title: {text: 'qingda cloud lights up China', subtext: 'tsingda. cloud ', sublink: 'http: // www.eee114.com', x: 'center', y: 'top', textStyle: {color: '# fff '}}

Toolbox: toolbar that displays some display tools, such as zoom in, zoom out, view datasets, and download images.

toolbox: {          show: true,          feature: {            mark: { show: true },            dataView: { show: true, readOnly: false },            restore: { show: true },            saveAsImage: { show: true }          }        }

Egend: icon display. When series has multiple maps, this value is used to display the icons of multiple maps. It can be either horizontal or vertical.

Legend: {x: 'left', y: 'top', data: ['line', 'offline'], // The name of the series is selectedMode: false, // select the floating textStyle: {color: '# fff '}}

Series: Map Display. It is used to display a map. You can define multiple maps. The relationship between them is the first one at the top, and so on.

Series: [// default {name: 'underlying template', type: 'map', mapType: 'China', data: provinceMap, geoCoord: source, itemStyle: {normal: {color: bgColor, borderColor: "# eee", label: {show: true, textStyle: {color: "# fff" }}, emphasis: {color: "rgba (128,128,128, 0.5 )"}},}

MarkPoint: After a point is used to identify a map, these points are usually stored on a geoCoord object, which is a dictionary, which has been introduced at the beginning of this article.

MarkPoint: {// dynamically mark large: true, // this option, floating automatically fails symbolSize: 2, itemStyle: {normal: {shadowBlur: 2, shadowColor: 'rgba (37,140,249, 0.8) ', color: onColor }}, data: []}

The data object in markPoint is the point to be displayed on this map. It is a struct array used to store keys in geoCoord!

SetOption: Add a map object to a specified map object.

 var myChart = echarts.init(document.getElementById('main')); var option={}; myChart.setOption(option);

Dynamically build the point mark markPoint on the map

The general idea is to dynamically pay the points to be marked to the data Objects of geoCoord and markPoint, so that the points can be marked dynamically on the map.

$.get("/map/GetOffMap", function (data) {                   for (var i in data) {            option.series[0].geoCoord[data[i].longitude + "_" + data[i].latitude] = [parseFloat(data[i].longitude), parseFloat(data[i].latitude)];            option.series[1].markPoint.data.push({ name: data[i].longitude + "_" + data[i].latitude });          }          myChart.setOption(option);

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.