飞线图实现原理

  1. 绘制背景的地图，geogeo画地图
  2. 绘制散点图，effectScatter在地图上画散点图
  3. 绘制飞线图, series.type: ‘lines’，lines绘制飞线
    1. 需要关闭 animation: false，否则会有上一个飞线的残影痕迹

地图绘制要点

  1. geoJson
  2. geoCoordMap
    1. [开始城市数据，结束城市数据]
    2. convertLinesData 城市 geoCoord转换为飞线图的坐标系数据[

](https://echarts.apache.org/examples/zh/editor.html?c=geo-lines)

销售TOP排行

image.png

切换动画残影

解决: animation: false 关闭动画

  1. 需要单独设置 zlevel
  2. 关闭该层的动画（animation: false
  3. 不然位于同个层的其它系列的图形，和动画的标签也会产生不必要的残影。

timeline切换飞线图，清除上一个飞线的痕迹，即动画残影。
文档 https://echarts.apache.org/zh/option.html#series-lines.effect

options

  1. import * as echarts from 'echarts';
  2. import {chinaJson} from '@/components/ECharts/Map';
  3. import {getData, colors, provinces, convertData, convertLinesData} from './_data';
  4. import {geo, timeline, baseOption} from './config';
  6. const cities = ['北京', '上海', '广州', '郑州', '成都', '海口'];
  7. const mapData = cities.map((it, i) => []);
  9. const cityGeoCoord = [
  10.   [116.4551, 40.2539],
  11.   [121.4648, 31.2891],
  12.   [113.12244, 23.009505],
  13.   [113.4668, 34.6234],
  14.   [103.9526, 30.7617],
  15.   [110.3893, 19.8516],
  16. ];
  18. const series = {
  19.   data1: getData(10, 6000),
  20.   data2: getData(10, 7000),
  21.   data3: getData(10, 8000),
  22.   data4: getData(10, 9000),
  23.   data5: getData(100, 6000),
  24.   data6: getData(100, 3000),
  25. }
  27. function chinaOption() {
  28.   echarts.registerMap('china', chinaJson);
  30.   // 柱图数据 [[], [], [], [], [], []]
  31.   provinces
  32.     .filter(it => it.code)
  33.     .forEach((item, index) => {
  34.     const key = item.name;
  35.     mapData.forEach((child, i) => {
  36.       const {value} = series[`data${i + 1}`].find(it => it.name === key) || {};
  37.       child.push({name: key, value})
  38.       child.sort((a, b) => a.value - b.value)
  39.     })
  40.   });
  42.   // 柱图 X轴数据 [[], [], [], [], [], []]
  43.   // const xdata = cities.map((it, i) => {
  44.   //   return mapData[i].map(it => it.name);
  45.   // });
  47.   // 柱状图数据
  48.   const barData = cities.map((it, i) => {
  49.     return mapData[i].map(it => it.value);
  50.   });
  52.   const config = {
  53.     timeline: timeline(cities),
  54.     baseOption: {
  55.       ...baseOption(provinces),
  56.       geo,
  57.     },
  58.     options: [],
  59.   }
  61.   // options[] 里面的每一项会合并 baseOption
  62.   cities.forEach((item, i) => {
  63.     const color = colors[3][i];
  64.     const rowData = {
  65.       title: [
  66.         {
  67.           text: '区域销售TOP6',
  68.           left: 16,
  69.           top: 16,
  70.           textStyle: {
  71.             color: '#fff',
  72.             fontSize: 12,
  73.           }
  74.         },
  75.         {
  76.           id: 'statistic',
  77.           text: `${item}销售额统计情况`,
  78.           top: 8,
  79.           right: 4,
  80.           textStyle: {
  81.             color: '#fff',
  82.             fontSize: 12
  83.           }
  84.         }
  85.       ],
  86.       series: [
  87.         // 2 在绘制散点图
  88.         {
  89.           type: 'effectScatter',
  90.           coordinateSystem: 'geo',
  91.           data: convertData(mapData[i]),
  92.           symbolSize: arr => arr[2],
  93.           showEffectOn: 'render',
  94.           hoverAnimation: true,
  95.           zlevel: 1,
  96.           // 涟漪配置
  97.           // https://echarts.apache.org/zh/option.html#series-effectScatter.rippleEffect
  98.           rippleEffect: {
  99.             brushType: 'stroke'
  100.           },
  101.           label: {
  102.             normal: {
  103.               formatter: '{b}',
  104.               position: 'right',
  105.               show: false // 全部显示，太拥挤了，高亮显示文字
  106.             },
  107.             emphasis: {
  108.               show: true
  109.             }
  110.           },
  111.           // 散点图颜色和柱图保持一致
  112.           itemStyle: {
  113.             normal: {
  114.               color,
  115.               shadowBlur: 8,
  116.               shadowColor: color
  117.             }
  118.           },
  119.         },
  120.         // 3 最后绘制飞线图
  121.         {
  122.           name: `${item}销售TOP6`,
  123.           type: 'lines',
  124.           data: convertLinesData(mapData[i], cityGeoCoord[i]),
  125.           zlevel: 2,
  126.           effect: {
  127.             show: true, // 带有动画的飞线
  128.             period: 4, // 箭头指向速度，值越小速度越快
  129.             trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
  130.             symbol: 'arrow', // 箭头图标
  131.             symbolSize: 3 // 图标大小
  132.           },
  133.           lineStyle: {
  134.             normal: {
  135.               color,
  136.               width: 0.1, // 尾迹线条宽度
  137.               opacity: 0.5, // 尾迹线条透明度
  138.               curveness: 0.3 // 尾迹线条曲直度，线条的弧度，不加这个是直线
  139.             }
  140.           },
  141.           animation: false
  142.         },
  143.         // 1 先绘制柱状图
  144.         {
  145.           zlevel: 1.5,
  146.           type: 'bar',
  147.           data: barData[i],
  148.           itemStyle: {
  149.             normal: {color}
  150.           },
  151.         }
  152.       ]
  153.     }
  154.     config.options.push(rowData);
  155.   });
  157.   return config;
  158. }
  160. export default chinaOption;

convertLinesData

应用场景

  1. 物流的流向
    1. // 飞线图的数据
    2. export function convertLinesData(data, fromGeoCoord) {
    3. return data.map(item => {
    4.  const {name, value} = item;
    5.  const {geoCoord} = provinces.find(it => it.name === name) || {};
    6.  return [
    7.    // 起点位置
    8.    { coord: fromGeoCoord, value, },
    9.    // 终点位置
    10.    { coord: geoCoord }
    11.  ]
    12. });
    13. }