在react中使用echarts地图（带攻击线）
在react中使用echarts地图（带攻击线）
- 项目源代码在这里：
https://gallery.echartsjs.com/editor.html?c=x9mmIwwZX8 - 所需导入的包
//可以按需引入
import React, { Component } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/chart/map';
import 'echarts/lib/chart/bar';
import 'echarts/map/js/china';
import { Modal, Table } from 'tinper-bee';
import sort from 'css-select/lib/sort';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/chart/pie';
- react中部分代码如下：
var geoCoordMap = {
'上海': [121.4648, 31.2891],
'合肥': [117.29, 32.0581],
'北京': [116.4551, 40.2539],
'南京': [118.8062, 31.9208],
};
var BJData = [
[{
name: '上海',
value: 327
}, {
name: '南京'
}],
];
var NJData = [
[{
name: '南京'
}, {
name: '上海',
value: 327
}],
];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
},
{
coord: toCoord
}
]);
}
}
return res;
};
var series = [];
[
["南京", BJData],
["南京", NJData]
].forEach(function (item, i) {
series.push({
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 5 //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 0, //尾迹线条透明度
curveness: 0.3 //尾迹线条曲直度
}
},
data: convertData(item[1])
}, {
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: "stroke", //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: "right", //显示位置
offset: [5, 0], //偏移设置
formatter: "{b}" //圆环显示文字
},
emphasis: {
show: true
}
},
symbol: "circle",
symbolSize: function (val) {
return 4 + val[2] / 1000; //圆环大小
},
itemStyle: {
normal: {
show: false,
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[0].name,
value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
})
},
//被攻击点
{
type: "scatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
period: 4,
brushType: "stroke",
scale: 4
},
label: {
normal: {
show: true,
position: "right",
color: "#00ffff",
formatter: "{b}",
textStyle: {
color: "#0bc7f3"
}
},
emphasis: {
show: true
}
},
symbol: "pin",
symbolSize: 30,
itemStyle: {
normal: {
show: true,
color: "#9966cc"
}
},
data: [{
name: item[0],
value: geoCoordMap[item[0]].concat([100])
}]
}
);
});
class new_page4 extends React.Component {
componentDidMount() {
this.chart0()
}
chart0() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
var option = {
backgroundColor: '#000',
tooltip: {
trigger: "item",
backgroundColor: "#1540a1",
borderColor: "#FFFFCC",
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: "z-index:100",
formatter: function(params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
res =
"<span style='color:#fff;'>" +
name +
"</span><br/>人数：" + value;
return res;
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true,
excludeComponents: ['toolbox'],
pixelRatio: 2
}
}
},
visualMap: {
//图例值控制
min: 0,
max: 10000,
show: false,
calculable: true,
color: ["#0bc7f3"],
textStyle: {
color: "#fff"
},
},
geo: {
map: "china",
label: {
emphasis: {
show: false
}
},
roam: true, //是否允许缩放
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "180%",
itemStyle: {
normal: {
color: "#04284e", //地图背景色
borderColor: "#5bc1c9" //省市边界线
},
emphasis: {
color: "rgba(37, 43, 61, .5)" //悬浮背景
}
}
},
series: series
};
myChart.setOption(option);
}
render() {
return (
<div>
<span id="main" style={{ width: 1000, height: 1000 }}></span>
</div>
);
}
}
- 直接引入时会报如下错误：
- 获取不到value的数组内容，将如下代码修改即可：
formatter: function(params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
res =
"<span style='color:#fff;'>" +
name +
"</span><br/>人数：" + value;
return res;
}
修改为：
formatter: function (params) {
console.log('000', params);
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.data.value ? params.data.value[2] : [];
if (value) {
res =
"<span style='color:#fff;'>" +
name +
"</span><br/>人数：" + value;
} else {
res =
"<span style='color:#fff;'>" +
" " +
"</span><br/>人数：" + undefined;
}
//console.log('ddd',value);
return res;
}
- 效果如下图：