public render() { //图表绘制方法
this.chart.clear();
const isMock = !this.items.length;
const items = isMock ? Visual.mockItems : this.items;
this.container.style.opacity = isMock ? '0.3' : '1';
const options = this.properties;
let planePath = options.effect ? options.symbol : options.symbolStyle;
let departureValue = isMock ? ['北京', '上海', '广州市'] : this.legendData;
let color = isMock ? ['#a6c84c', '#ffa022', '#46bee9'] : options.palette;
var series = [];
items.map((item: any, i: number) => {
if (item.length) {
let j = i % color.length;
series.push({
name: item[0].fromName,
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: options.period,
trailLength: 0.7,
color: color[j],
symbolSize: 4},
lineStyle: {
normal: {
color: color[j],
width: 0.1,
curveness: 0.2 } },
data: item },
{
name: item[0].fromName,
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: options.period,
trailLength: 0,
symbol: planePath,
symbolSize: options.symbolSize },
lineStyle: {
normal: {
color: color[j],
width: 1,
opacity: 0.6,
curveness: 0.2 } },
data: item},
{
name: item[0].fromName,
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke' },
label: {
normal: {
show: true,
position: "right", //显示位置
offset: [5, 0], //偏移设置
formatter: "{b}" //圆环显示文字 },
emphasis: {
show: true } },
symbolSize: options.pointSize,
itemStyle: {
normal: {
color: color[j] } },
data: this.parseData(item) } ); } });
var option = {
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
if (params.seriesType == "lines") {
return params.data.fromName + " --> " + params.data.toName + "
" + params.data.value;
} else {
return params.name; } } },
legend: {
show: options.showLegend,
orient: 'vertical',
top: 'bottom',
left: 'right',
data: departureValue,
textStyle: {
color: '#fff' },
selectedMode: 'multiple', },
geo: {
map: options.mapName,
label: {
emphasis: {
sfalsehow: true,
color: '#fff' } },
roam: options.roam,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "125%",
itemStyle: {
normal: {
borderColor: options.borderColor,
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: options.startColor // 0% 处的颜色
}, {
offset: 1,
color: options.endColor // 100% 处的颜色 }], },
shadowColor: options.shadowColor,
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10 },
emphasis: {
areaColor: options.emphasisColor,
borderWidth: 0 } } },
series: series };
this.chart.setOption(option); }