echarts配置散点地图代码

var res = [];

for (var i = 0; i < data.length; i++) {

var geoCoord = geoCoordMap[data[i].name];

if (geoCoord) {

res.push({

name: data[i].name,

value: geoCoord.concat(data[i].value),

});

}

}

return res;

};

var option = {

visualMap: {

show: true,

min: 0,

max: 1000,

left: “left”,

top: “bottom”,

text: [“高”, “低”], // 文本，默认为数值文本

calculable: true,

seriesIndex: [1],

inRange: {

color: [“#00467F”, “#A5CC82”], // 蓝绿

},

},

geo: {

//坐标系为地理坐标系 geo

show: true,

map: mapName, //地图加散点

label: {

normal: {

show: false,

},

emphasis: {

show: false,

},

},

roam: true,

// 设置地图块的相关显示信息

itemStyle: {

normal: {

// 普通状态下的样式

areaColor: “#d1def3”,

borderColor: “#b4caef”,

borderWidth: 1,

},

emphasis: {

// 高亮状态下的样式

areaColor: “#9abfff”, // hover效果

},

},

},

series: [

{

//新建散点图

name: “散点”,

type: “scatter”, //散点图 scatter

coordinateSystem: “geo”,

data: this.data1, //定义图表数据内容的数组

// symbolSize: function (val) {

// return val[2] / 10;

// },

label: {

normal: {

formatter: “{b}”,

position: “right”,

show: true,

},

emphasis: {

show: true,

},

},

// 散点样式

itemStyle: {

normal: {

color: “#F56C6C”,

},

},

},

{

type: “map”,

map: mapName,

geoIndex: 0,

aspectScale: 0.75, // 长宽比

showLegendSymbol: false, // 存在legend时显示

label: {

normal: {

show: true,

},

emphasis: {

show: false,

textStyle: {

color: “#fff”,

},

},

},

roam: true,

itemStyle: {

normal: {

areaColor: “#031525”,

borderColor: “#3B5077”,

},

emphasis: {

areaColor: “#2B91B7”,

},

},

animation: false,

data: this.data,

},

{

name: “点”,

type: “scatter”,

coordinateSystem: “geo”,

symbol: “pin”, // 气泡

symbolSize: function (val) {

var a = (maxSize4Pin - minSize4Pin) / (max - min);

var b = minSize4Pin - a * min;

b = maxSize4Pin - a * max;

return a * val[2] + b;

},

label: {

normal: {

show: true,

textStyle: {

color: “#fff”,

fontSize: 9,

},

formatter: “{@[2]}”,

},

},

itemStyle: {

normal: {

color: “#F62157”, // 标志颜色

},

},

zlevel: 6,

data: convertData(this.data),

},

{

name: “Top 5”,

type: “effectScatter”,

coordinateSystem: “geo”,

data: convertData(

this.data

.sort(function (a, b) {

return b.value - a.value;

})

.slice(0, 5)

),

symbolSize: function (val) {

return val[2] / 10;

},

showEffectOn: “render”,

rippleEffect: {

brushType: “stroke”,

},

hoverAnimation: true,

label: {

normal: {

formatter: “{b}”,

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。