本文详细介绍了如何使用ECharts库创建动态的飞线地图效果，包括设置地图数据、配置飞线路径、动画效果以及交互功能，为数据可视化的展示提供了一种创新方式。
<template>
<div id="myChart" :style="{width: '1000px', height: '500px'}"></div>
</template>
<script>
export default {
data() {
return {
geoJson: {
type: "FeatureCollection",
features: [
{
type: "Feature",
id: "xin_jiang",
properties: {
name: "新疆", cp: [84.9023, 41.748], childNum: 18 },
geometry: {
type: "Polygon",
coordinates: [
[
[96.416, 42.7588],
[96.416, 42.7148],
[95.9766, 42.4951],
[96.0645, 42.3193],
[96.2402, 42.2314],
[95.9766, 41.9238],
[95.2734, 41.6162],
[95.1855, 41.792],
[94.5703, 41.4844],
[94.043, 41.0889],
[93.8672, 40.6934],
[93.0762, 40.6494],
[92.6367, 39.6387],
[92.373, 39.3311],
[92.373, 39.1113],
[92.373, 39.0234],
[90.1758, 38.4961],
[90.3516, 38.2324],
[90.6152, 38.3203],
[90.5273, 37.8369],
[91.0547, 37.4414],
[91.3184, 37.0898],
[90.7031, 36.7822],
[90.791, 36.6064],
[91.0547, 36.5186],
[91.0547, 36.0791],
[90.8789, 36.0352],
[90, 36.2549],
[89.9121, 36.0791],
[89.7363, 36.0791],
[89.209, 36.2988],
[88.7695, 36.3428],
[88.5938, 36.4746],
[87.3633, 36.4307],
[86.2207, 36.167],
[86.1328, 35.8594],
[85.6055, 35.6836],
[85.0781, 35.7275],
[84.1992, 35.376],
[83.1445, 35.4199],
[82.8809, 35.6836],
[82.4414, 35.7275],
[82.002, 35.332],
[81.6504, 35.2441],
[80.4199, 35.4199],
[80.2441, 35.2881],
[80.332, 35.1563],
[80.2441, 35.2002],
[79.8926, 34.8047],
[79.8047, 34.4971],
[79.1016, 34.4531],
[79.0137, 34.3213],
[78.2227, 34.7168],
[78.0469, 35.2441],
[78.0469, 35.5078],
[77.4316, 35.4639],
[76.8164, 35.6396],
[76.5527, 35.8594],
[76.2012, 35.8154],
[75.9375, 36.0352],
[76.0254, 36.4746],
[75.8496, 36.6943],
[75.498, 36.7383],
[75.4102, 36.958],
[75.0586, 37.002],
[74.8828, 36.9141],
[74.7949, 37.0459],
[74.5313, 37.0898],
[74.5313, 37.2217],
[74.8828, 37.2217],
[75.1465, 37.4414],
[74.8828, 37.5732],
[74.9707, 37.749],
[74.8828, 38.4521],
[74.3555, 38.6719],
[74.1797, 38.6719],
[74.0918, 38.54],
[73.8281, 38.584],
[73.7402, 38.8477],
[73.8281, 38.9795],
[73.4766, 39.375],
[73.916, 39.5068],
[73.916, 39.6826],
[73.8281, 39.7705],
[74.0039, 40.0342],
[74.8828, 40.3418],
[74.7949, 40.5176],
[75.2344, 40.4297],
[75.5859, 40.6494],
[75.7617, 40.2979],
[76.377, 40.3857],
[76.9043, 41.001],
[77.6074, 41.001],
[78.1348, 41.2207],
[78.1348, 41.3965],
[80.1563, 42.0557],
[80.2441, 42.2754],
[80.1563, 42.627],
[80.2441, 42.8467],
[80.5078, 42.8906],
[80.4199, 43.0664],
[80.7715, 43.1982],
[80.4199, 44.165],
[80.4199, 44.6045],
[79.9805, 44.8242],
[79.9805, 44.9561],
[81.7383, 45.3955],
[82.0898, 45.2197],
[82.5293, 45.2197],
[82.2656, 45.6592],
[83.0566, 47.2412],
[83.6719, 47.0215],
[84.7266, 47.0215],
[84.9023, 46.8896],
[85.5176, 47.0654],
[85.6934, 47.2852],
[85.5176, 48.1201],
[85.7813, 48.4277],
[86.5723, 48.5596],
[86.8359, 48.8232],
[86.748, 48.9551],
[86.8359, 49.1309],
[87.8027, 49.1748],
[87.8906, 48.999],
[87.7148, 48.9111],
[88.0664, 48.7354],
[87.9785, 48.6035],
[88.5059, 48.3838],
[88.6816, 48.1641],
[89.1211, 47.9883],
[89.5605, 48.0322],
[89.7363, 47.8564],
[90.0879, 47.8564],
[90.3516, 47.6807],
[90.5273, 47.2412],
[90.8789, 46.9775],
[91.0547, 46.582],
[90.8789, 46.3184],
[91.0547, 46.0107],
[90.7031, 45.7471],
[90.7031, 45.5273],
[90.8789, 45.2197],
[91.582, 45.0879],
[93.5156, 44.9561],
[94.7461, 44.3408],
[95.3613, 44.2969],
[95.3613, 44.0332],
[95.5371, 43.9014],
[95.8887, 43.2422],
[96.3281, 42.9346],
[96.416, 42.7588],
],
],
},
},
{
type: "Feature",
id: "xi_zang",
properties: {
name: "西藏", cp: [88.7695, 31.6846], childNum: 7 },
geometry: {
type: "Polygon",
coordinates: [
[
[79.0137, 34.3213],
[79.1016, 34.4531],
[79.8047, 34.4971],
[79.8926, 34.8047],
[80.2441, 35.2002],
[80.332, 35.1563],
[80.2441, 35.2881],
[80.4199, 35.4199],
[81.6504, 35.2441],
[82.002, 35.332],
[82.4414, 35.7275],
[82.8809, 35.6836],
[83.1445, 35.4199],
[84.1992, 35.376],
[85.0781, 35.7275],
[85.6055, 35.6836],
[86.1328, 35.8594],
[86.2207, 36.167],
[87.3633, 36.4307],
[88.5938, 36.4746],
[88.7695, 36.3428],
[89.209, 36.2988],
[89.7363, 36.0791],
[89.3848, 36.0352],
[89.4727, 35.9033],
[89.7363, 35.7715],
[89.7363, 35.4199],
[89.4727, 35.376],
[89.4727, 35.2441],
[89.5605, 34.8926],
[89.8242, 34.8486],
[89.7363, 34.6729],
[89.8242, 34.3652],
[89.6484, 34.0137],
[90.0879, 33.4863],
[90.7031, 33.1348],
[91.4063, 33.1348],
[91.9336, 32.8271],
[92.1973, 32.8271],
[92.2852, 32.7393],
[92.9883, 32.7393],
[93.5156, 32.4756],
[93.7793, 32.5635],
[94.1309, 32.4316],
[94.6582, 32.6074],
[95.1855, 32.4316],
[95.0098, 32.2998],
[95.1855, 32.3438],
[95.2734, 32.2119],
[95.3613, 32.168],
[95.3613, 31.9922],
[95.4492, 31.8164],
[95.8008, 31.6846],
[95.9766, 31.8164],
[96.1523, 31.5967],
[96.2402, 31.9482],
[96.5039, 31.7285],
[96.8555, 31.6846],
[96.7676, 31.9922],
[97.2949, 32.0801],
[97.3828, 32.5635],
[97.7344, 32.5195],
[98.1738, 32.3438],
[98.4375, 31.8604],
[98.877, 31.4209],
[98.6133, 31.2012],
[98.9648, 30.7617],
[99.1406, 29.2676],
[98.9648, 29.1357],
[98.9648, 28.8281],
[98.7891, 28.8721],
[98.7891, 29.0039],
[98.7012, 28.916],
[98.6133, 28.5205],
[98.7891, 28.3447],
[98.7012, 28.2129],
[98.3496, 28.125],
[98.2617, 28.3887],
[98.1738, 28.125],
[97.5586, 28.5205],
[97.2949, 28.0811],
[97.3828, 27.9053],
[97.0313, 27.7295],
[96.5039, 28.125],
[95.7129, 28.2568],
[95.3613, 28.125],
[95.2734, 27.9492],
[94.2188, 27.5537],
[93.8672, 27.0264],
[93.6035, 26.9385],
[92.1094, 26.8506],
[92.0215, 27.4658],
[91.582, 27.5537],
[91.582, 27.9053],
[91.4063, 28.0371],
[91.0547, 27.8613],
[90.7031, 28.0811],
[89.8242, 28.2129],
[89.6484, 28.1689],
[89.1211, 27.5977],
[89.1211, 27.334],
[89.0332, 27.2021],
[88.7695, 27.4219],
[88.8574, 27.9932],
[88.6816, 28.125],
[88.1543, 27.9053],
[87.8906, 27.9492],
[87.7148, 27.8174],
[87.0996, 27.8174],
[86.748, 28.125],
[86.5723, 28.125],
[86.4844, 27.9053],
[86.1328, 28.125],
[86.0449, 27.9053],
[85.6934, 28.3447],
[85.6055, 28.2568],
[85.166, 28.3447],
[85.166, 28.6523],
[84.9023, 28.5645],
[84.4629, 28.7402],
[84.2871, 28.8721],
[84.1992, 29.2236],
[84.1113, 29.2676],
[83.584, 29.1797],
[83.2324, 29.5752],
[82.1777, 30.0586],
[82.0898, 30.3223],
[81.3867, 30.3662],
[81.2109, 30.0146],
[81.0352, 30.2344],
[80.0684, 30.5859],
[79.7168, 30.9375],
[79.0137, 31.0693],
[78.75, 31.333],
[78.8379, 31.5967],
[78.6621, 31.8164],
[78.75, 31.9043],
[78.4863, 32.124],
[78.3984, 32.5195],
[78.75, 32.6953],
[78.9258, 32.3438],
[79.2773, 32.5635],
[79.1016, 33.1787],
[78.6621, 33.6621],
[78.6621, 34.1016],
[78.9258, 34.1455],
[79.0137, 34.3213],
],
],
},
},
{
type: "Feature",
id: "nei_meng_gu",
properties: {
name: "内蒙古", cp: [117.5977, 44.3408], childNum: 12 },
geometry: {
type: "Polygon",
coordinates: [
[
[97.207, 42.8027],
[99.4922, 42.583],
[100.8105, 42.6709],
[101.7773, 42.4951],
[102.041, 42.2314],
[102.7441, 42.1436],
[103.3594, 41.8799],
[103.8867, 41.792],
[104.502, 41.8799],
[104.502, 41.6602],
[105.0293, 41.5723],
[105.7324, 41.9238],
[107.4023, 42.4512],
[109.4238, 42.4512],
[110.3906, 42.7588],
[111.0059, 43.3301],
[111.9727, 43.6816],
[111.9727, 43.8135],
[111.4453, 44.3848],
[111.7969, 45],
[111.9727, 45.0879],
[113.6426, 44.7363],
[114.1699, 44.9561],
[114.5215, 45.3955],
[115.6641, 45.4395],
[116.1914, 45.7031],
[116.2793, 45.9668],
[116.543, 46.2744],
[117.334, 46.3623],
[117.4219, 46.582],
[117.7734, 46.5381],
[118.3008, 46.7578],
[118.7402, 46.7139],
[118.916, 46.7578],
[119.0918, 46.6699],
[119.707, 46.626],
[119.9707, 46.7139],
[119.707, 47.1973],
[118.4766, 47.9883],
[117.8613, 48.0322],
[117.334, 47.6807],
[116.8066, 47.9004],
[116.1914, 47.8564],
[115.9277, 47.6807],
[115.5762, 47.9004],
[115.4883, 48.1641],
[115.8398, 48.252],
[115.8398, 48.5596],
[116.7188, 49.834],
[117.7734, 49.5264],
[118.5645, 49.9219],
[119.2676, 50.0977],
[119.3555, 50.3174],
[119.1797, 50.3613],
[119.5313, 50.7568],
[119.5313, 50.8887],
[119.707, 51.0645],
[120.1465, 51.6797],
[120.6738, 51.9434],
[120.7617, 52.1191],
[120.7617, 52.251],
[120.5859, 52.3389],
[120.6738, 52.5146],
[120.4102, 52.6465],
[120.0586, 52.6025],
[120.0586, 52.7344],
[120.8496, 53.2617],
[121.4648, 53.3496],
[121.8164, 53.042],
[121.2012, 52.5586],
[121.6406, 52.4268],
[121.7285, 52.2949],
[121.9922, 52.2949],
[122.168, 52.5146],
[122.6953, 52.251],
[122.6074, 52.0752],
[122.959, 51.3281],
[123.3105, 51.2402],
[123.6621, 51.3721],
[124.3652, 51.2842],
[124.541, 51.3721],
[124.8926, 51.3721],
[125.0684, 51.6357],
[125.332, 51.6357],
[126.0352, 51.0205],
[125.7715, 50.7568],
[125.7715, 50.5371],
[125.332, 50.1416],
[125.1563, 49.834],
[125.2441, 49.1748],
[124.8047, 49.1309],
[124.4531, 48.1201],
[124.2773, 48.5156],
[122.4316, 47.373],
[123.0469, 46.7139],
[123.3984, 46.8896],
[123.3984, 46.9775],
[123.4863, 46.9775],
[123.5742, 46.8457],
[123.5742, 46.8896],
[123.5742, 46.6699],
[123.0469, 46.582],
[123.2227, 46.2305],
[122.7832, 46.0107],
[122.6953, 45.7031],
[122.4316, 45.8789],
[122.2559, 45.791],
[121.8164, 46.0107],
[121.7285, 45.7471],
[121.9043, 45.7031],
[122.2559, 45.2637],
[122.0801, 44.8682],
[122.3438, 44.2529],
[123.1348, 44.4727],
[123.4863, 43.7256],
[123.3105, 43.5059],
[123.6621, 43.374],
[123.5742, 43.0225],
[123.3105, 42.9785],
[123.1348, 42.8027],
[122.7832, 42.7148],
[122.3438, 42.8467],
[122.3438, 42.6709],
[121.9922, 42.7148],
[121.7285, 42.4512],
[121.4648, 42.4951],
[120.498, 42.0996],
[120.1465, 41.7041],
[119.8828, 42.1875],
[119.5313, 42.3633],
[119.3555, 42.2754],
[119.2676, 41.7041],
[119.4434, 41.6162],
[119.2676, 41.3086],
[118.3887, 41.3086],
[118.125, 41.748],
[118.3008, 41.792],
[118.3008, 42.0996],
[118.125, 42.0557],
[117.9492, 42.2314],
[118.0371, 42.4072],
[117.7734, 42.627],
[117.5098, 42.583],
[117.334, 42.4512],
[116.8945, 42.4072],
[116.8066, 42.0117],
[116.2793, 42.0117],
[116.0156, 41.792],
[115.9277, 41.9238],
[115.2246, 41.5723],
[114.9609, 41.6162],
[114.873, 42.0996],
[114.5215, 42.1436],
[114.1699, 41.792],
[114.2578, 41.5723],
[113.9063, 41.4404],
[113.9941, 41.2207],
[113.9063, 41.1328],
[114.082, 40.7373],
[114.082, 40.5176],
[113.8184, 40.5176],
[113.5547, 40.3418],
[113.2031, 40.3857],
[112.7637, 40.166],
[112.3242, 40.2539],
[111.9727, 39.5947],
[111.4453, 39.6387],
[111.3574, 39.4189],
[111.0938, 39.375],
[111.0938, 39.5947],
[110.6543, 39.2871],
[110.127, 39.4629],
[110.2148, 39.2871],
[109.8633, 39.2432],
[109.9512, 39.1553],
[108.9844, 38.3203],
[109.0723, 38.0127],
[108.8965, 37.9688],
[108.8086, 38.0127],
[108.7207, 37.7051],
[108.1934, 37.6172],
[107.666, 37.8809],
[107.3145, 38.1006],
[106.7871, 38.1885],
[106.5234, 38.3203],
[106.9629, 38.9795],
[106.7871, 39.375],
[106.3477, 39.2871],
[105.9082, 38.7158],
[105.8203, 37.793],
[104.3262, 37.4414],
[103.4473, 37.8369],
[103.3594, 38.0127],
[103.5352, 38.1445],
[103.4473, 38.3643],
[104.2383, 38.9795],
[104.0625, 39.4189],
[103.3594, 39.3311],
[103.0078, 39.1113],
[102.4805, 39.2432],
[101.8652, 39.1113],
[102.041, 38.8916],
[101.7773, 38.6719],
[101.3379, 38.7598],
[101.25, 39.0234],
[100.9863, 38.9355],
[100.8105, 39.4189],
[100.5469, 39.4189],
[100.0195, 39.7705],
[99.4922, 39.8584],
[100.1074, 40.2539],
[100.1953, 40.6494],
[99.9316, 41.001],
[99.2285, 40.8691],
[99.0527, 40.6934],
[98.9648, 40.7813],
[98.7891, 40.6055],
[98.5254, 40.7373],
[98.6133, 40.6494],
[98.3496, 40.5615],
[98.3496, 40.9131],
[97.4707, 41.4844],
[97.8223, 41.6162],
[97.8223, 41.748],
[97.207, 42.8027],
],
],
},
},
{
type: "Feature",
id: "qing_hai",
properties: {
name: "青海", cp: [96.2402, 35.4199], childNum: 8 },
geometry: {
type: "Polygon",
coordinates: [
[
[89.7363, 36.0791],
[89.9121, 36.0791],
[90, 36.2549],
[90.8789, 36.0352],
[91.0547, 36.0791],
[91.0547, 36.5186],
[90.791, 36.6064],
[90.7031, 36.7822],
[91.3184, 37.0898],
[91.0547, 37.4414],
[90.5273, 37.8369],
[90.6152, 38.3203],
[90.3516, 38.2324],
[90.1758, 38.4961],
[92.373, 39.0234],
[92.373, 39.1113],
[93.1641, 39.1992],
[93.1641, 38.9795],
[93.6914, 38.9355],
[93.8672, 38.7158],
[94.3066, 38.7598],
[94.5703, 38.3643],
[95.0098, 38.4082],
[95.4492, 38.2764],
[95.7129, 38.3643],
[96.2402, 38.1006],
[96.416, 38.2324],
[96.6797, 38.1885],
[96.6797, 38.4521],
[97.1191, 38.584],
[97.0313, 39.1992],
[98.1738, 38.8037],
[98.3496, 39.0234],
[98.6133, 38.9355],
[98.7891, 39.0674],
[99.1406, 38.9355],
[99.8438, 38.3643],
[100.1953, 38.2764],
[100.0195, 38.4521],
[100.1074, 38.4961],
[100.459, 38.2764],
[100.7227, 38.2324],
[101.1621, 37.8369],
[101.5137, 37.8809],
[101.7773, 37.6172],
[101.9531, 37.7051],
[102.1289, 37.4414],
[102.5684, 37.1777],
[102.4805, 36.958],
[102.6563, 36.8262],
[102.5684, 36.7383],
[102.832, 36.3428],
[103.0078, 36.2549],
[102.9199, 36.0791],
[102.9199, 35.9033],
[102.6563, 35.7715],
[102.832, 35.5957],
[102.4805, 35.5957],
[102.3047, 35.4199],
[102.3926, 35.2002],
[101.9531, 34.8486],
[101.9531, 34.6289],
[102.2168, 34.4092],
[102.1289, 34.2773],
[101.6895, 34.1016]
最低0.47元/天 解锁文章
扫一扫
04-08
4415
4415
01-05
1884
1884
05-19
1314
1314
05-12
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
