//中国地图
china_map() {
console.log(document.getElementById("china-map"),'555555')
let mapChart = echarts.init(document.getElementById("china-map")); //图表初始化，china-map是绑定的元素
let series = []; //存放循环配置项
let res = []; //存放射线的起始点和结束点位置
let province = []; //存放有射线的省的名字，以此来拿到对应省份的坐标
//提前存好的所有省份坐标，用于后面根据名字拿到对应的左边
let chinaGeoCoordMap = {
新疆: [86.9023, 41.148],
西藏: [87.8695, 31.6846],
内蒙古: [110.5977, 41.3408],
青海: [95.2402, 35.4199],
四川: [102.9199, 30.1904],
黑龙江: [128.1445, 46.7156],
甘肃: [102.7129, 38.166],
云南: [101.0652, 24.6807],
广西: [108.7813, 23.6426],
湖南: [111.5332, 27.3779],
陕西: [108.5996, 33.7396],
广东: [113.8668, 22.8076],
吉林: [126.1746, 43.5938],
河北: [115.4004, 38.1688],
湖北: [112.2363, 30.8572],
贵州: [106.6113, 26.6385],
山东: [118.2402, 36.2307],
江西: [115.7156, 27.99],
河南: [113.0668, 33.8818],
辽宁: [123.0438, 41.0889],
山西: [112.4121, 36.6611],
安徽: [117.2461, 31.0361],
福建: [118.3008, 25.9277],
浙江: [120.498, 29.0918],
江苏: [119.8586, 32.915],
重庆: [107.7539, 29.8904],
宁夏: [105.9961, 37.1096],
海南: [109.9512, 19.2041],
台湾: [120.8254, 23.5986],
北京: [116.4551, 40.2539],
天津: [117.4219, 39.4189],
上海: [121.4648, 31.2891],
香港: [114.6178, 22.3242],
澳门: [113.5547, 21.6484],
};
//后台给的数据模拟
let lineData = [
{
blat: [118.2402, 36.2307], //发射点
elon: [87.8695, 31.6846], //接收点
bcitysim: "山东", //发射省的名字
ecitysim: "西藏", //接收省的名字
},
{
blat: [118.2402, 36.2307],
elon: [95.2402, 35.4199],
bcitysim: "山东",
ecitysim: "青海",
},
{
blat: [118.2402, 36.2307],
elon: [119.8586, 32.915],
bcitysim: "山东",
ecitysim: "江苏",
},
{
blat: [118.2402, 36.2307],
elon: [105.9961, 37.1096],
bcitysim: "山东",
ecitysim: "宁夏",
},
{
blat: [118.2402, 36.2307],
elon: [123.0438, 41.0889],
bcitysim: "山东",
ecitysim: "辽宁",
},
{
blat: [118.2402, 36.2307],
elon: [102.7129, 38.166],
bcitysim: "山东",
ecitysim: "甘肃",
},
{
blat: [118.2402, 36.2307],
elon: [86.9023, 41.148],
bcitysim: "山东",
ecitysim: "新疆",
},
{
blat: [118.2402, 36.2307],
elon: [128.1445, 46.7156],
bcitysim: "山东",
ecitysim: "黑龙江",
},
{
blat: [118.2402, 36.2307],
elon: [110.5977, 41.3408],
bcitysim: "山东",
ecitysim: "内蒙古",
},
{
blat: [118.2402, 36.2307],
elon: [113.0668, 33.8818],
bcitysim: "山东",
ecitysim: "河南",
},
{
blat: [112.2363, 30.8572],
elon: [101.0652, 24.6807],
bcitysim: "湖北",
ecitysim: "云南",
},
{
blat: [112.2363, 30.8572],
elon: [107.7539, 29.8904],
bcitysim: "湖北",
ecitysim: "重庆",
},
{
blat: [112.2363, 30.8572],
elon: [102.9199, 30.1904],
bcitysim: "湖北",
ecitysim: "四川",
},
{
blat: [112.2363, 30.8572],
elon: [114.6178, 22.3242],
bcitysim: "湖北",
ecitysim: "香港",
},
{
blat: [112.2363, 30.8572],
elon: [106.6113, 26.6385],
bcitysim: "湖北",
ecitysim: "贵州",
},
{
blat: [112.2363, 30.8572],
elon: [108.7813, 23.6426],
bcitysim: "湖北",
ecitysim: "广西",
},
{
blat: [112.2363, 30.8572],
elon: [118.3008, 25.9277],
bcitysim: "湖北",
ecitysim: "福建",
},
{
blat: [112.2363, 30.8572],
elon: [120.498, 29.0918],
bcitysim: "湖北",
ecitysim: "浙江",
},
];
//循环拿到处理好的数据
for (var i = 0; i < lineData.length; i++) {
province.push(lineData[i].bcitysim); //存进去每个省的名字
province.push(lineData[i].ecitysim); //存进去每个省的名字
res.push({
fromName: lineData[i].bcitysim, //发射的省名，保存用于弹框显示
toName: lineData[i].ecitysim, //接收的省名，保存用于弹框显示
coords: [
lineData[i].blat, //发射
lineData[i].elon, //接收
],
count: lineData[i].val, //数据
});
}
let index_data = new Set(province); //把省的名字去重
let data_res = []; //定义一个新的变量存放省的坐标
//注意这里一定要用name和value的形式。不是这个格式的散点图显示不出来
index_data.forEach((item) => {
data_res.push({
name: item, //每个省的名字
value: chinaGeoCoordMap[item], //每个省的坐标
});
});
//循环往series内添加配置项
series.push(
{
//射线效果图层
type: "lines", //类型：射线
zlevel: 1, //类似图层效果
effect: {
show: true, //是否显示图标
symbol: "circle", //箭头图标
symbolSize: 5, //图标大小
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
},
label: {
show: true,
},
lineStyle: {
color: "#fff",
normal: {
color: "#f8f7ba",
width: 1,
opacity: 0.2,
curveness: 0.1,
},
},
//提示框信息
// tooltip: {
// formatter: function (param) {
// return (
// param.data.fromName +
// ">" +
// param.data.toName +
// "<br>数量：" +
// param.data.count
// );
// },
// },
data: res, //拿到射线的起始点和结束点
},
//散点图
// {
// type: "effectScatter",//散点图
// coordinateSystem: "geo",//这个不能删，删了不显示
// zlevel: 1,
// rippleEffect: {
// //涟漪特效
// period: 4, //动画时间，值越小速度越快
// brushType: "stroke", //波纹绘制方式 stroke, fill
// scale: 4, //波纹圆环最大限制，值越大波纹越大
// },
// //设置文字部分
// label: {
// normal: {
// show: true, //省份名显示隐藏
// position: "right", //省份名显示位置
// offset: [5, 0], //省份名偏移设置
// formatter: function (params) {
// //圆环显示省份名
// return params.name; //这个名字是根据data中的name来显示的
// },
// fontSize: 12,//文字大小
// },
// emphasis: {
// show: true,
// },
// },
// symbol: "circle",//散点图
// symbolSize: 5,//散点大小
// itemStyle: {//散点样式
// normal: {
// show: true,
// color: "#fff",
// },
// },
// data: data_res, //处理好后的散点图坐标数组
// },
//点击高亮
{
type: "map",
mapType: "china",
zlevel: 1,
roam: true,
geoIndex: 0,
tooltip: {
show: true,
},
itemStyle: {
areaColor: "#00196d",
borderColor: "#0a53e9",
},
emphasis: {
show: true,
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: "#fff",
},
},
},
itemStyle: {
areaColor: "#00196d",
borderColor: "#0a53e9",
},
},
}
);
//配置
let option = {
//title可要可不要
// title: {
// text: "查查的地图",
// textStyle: {
// color: "#ffffff",
// },
// },
legend: {
show: true,
selected: {},
x: "left",
orient: "vertical",
textStyle: {
color: "white",
},
data: [],
},
//鼠标移上去的弹框
// tooltip: {
// trigger: "item",
// show: true,
// },
//geo：这是重点
visualMap: {
show: false,
seriesIndex: 2,
inRange: {
color: ["transparent", "rgba(122,218,255,0.2)"],
},
},
geo: {
map: "china", //中国地图
zoom: 1.2, //缩放倍数
roam: false, //是否允许缩放和拖拽地图
label: {
normal: {
show: true, // 是否显示省份名字，现在是隐藏的状态，因为和散点图的名字重叠了。如果需要就true
textStyle: {
//名字的样式
color: "#fff",
fontSize: 20,
},
},
emphasis: {
show: true,
},
},
//地图样式
itemStyle: {
normal: {
areaColor: "transparent",
borderWidth: 0.4,
borderColor: "#375d79",
shadowColor: "rgba(255,255,255,0.5)",
shadowBlur: 10,
},
//省份地图阴影
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "#fff",
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}
],
},
series: series, //图表配置
};
mapChart.setOption(option); //生成图表
},
1332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
