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); }

總結

以上是生活随笔為你收集整理的echarts迁徙图 vue_【可视化插件】Vue项目中Echarts流向图迁徙图实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。