echarts关系图连线动画

要在ECharts关系图中添加连线动画，可以通过设置series中的lineStyle.normal.curveness参数来实现。curveness参数的取值范围为0到1，数值越大曲线越明显。

以下是示例代码：

option = {
    // ...
    series: [
        {
            type: 'graph',
            // ...
            lineStyle: {
                normal: {
                    curveness: 0.2 // 设置曲线程度
                }
            },
            // ...
        }
    ]
};

当有新的节点加入或节点位置变化时，可以通过调用chart实例的setOption方法来更新图表数据，从而实现连线动画。

// 假设新增了一个节点node
option.series[0].data.push(node);
chart.setOption(option);

在更新图表数据时，ECharts会自动计算新节点与已有节点之间的连线，并自动添加连线动画效果。

相关问题

echarts折线图连线动画

要为 Echarts 折线图添加连线动画，可以使用 Echarts 提供的 `series-line.data` 中每个数据项的 `itemStyle` 属性中的 `opacity` 属性来实现。

具体方法如下：

1. 首先，在 `series-line.data` 中每个数据项的 `itemStyle` 属性中添加 `opacity` 属性，并设置为 0。

   data: [
       {
           value: 20,
           itemStyle: {
               opacity: 0
           }
       },
       {
           value: 40,
           itemStyle: {
               opacity: 0
           }
       },
       ...
   ]

2. 然后，在 `option` 中添加 `animationDuration` 和 `animationDelay` 属性，分别用于设置动画持续时间和延迟时间。

   option = {
       ...
       series: [{
           type: 'line',
           data: [...],
           itemStyle: {...},
           animationDuration: 2000,    // 动画持续时间为 2 秒
           animationDelay: 1000,       // 延迟时间为 1 秒
           ...
       }],
       ...
   }

3. 最后，在 `series-line.data` 中每个数据项的 `itemStyle` 属性中添加 `animationDelay` 属性，并设置为一个函数，用于根据数据项的下标计算出相应的延迟时间。

   data: [
       {
           value: 20,
           itemStyle: {
               opacity: 0,
               animationDelay: function (dataIndex) {
                   return dataIndex * 100;   // 计算延迟时间，每个数据项延迟 100 毫秒
               }
           }
       },
       {
           value: 40,
           itemStyle: {
               opacity: 0,
               animationDelay: function (dataIndex) {
                   return dataIndex * 100;   // 计算延迟时间，每个数据项延迟 100 毫秒
               }
           }
       },
       ...
   ]

这样，当 Echarts 折线图加载完成后，每个数据项的连线都会从透明度为 0 的状态渐变到不透明的状态，形成连线动画效果。

echarts地图绘制连线

要在 echarts 中绘制地图连线，你可以使用 echarts 的 geo 组件和 lines 这个系列类型。下面是一个简单的示例代码，展示了如何绘制两个城市之间的连线：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 地图数据
var geoData = [
    { name: '城市A', coord: [lon1, lat1] },
    { name: '城市B', coord: [lon2, lat2] }
];

// 连线数据
var lineData = [
    { from: '城市A', to: '城市B' }
];

// 绘制地图
myChart.setOption({
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        type: 'lines',
        zlevel: 2,
        symbolSize: 10,
        effect: {
            show: true,
            period: 4,
            trailLength: 0.5,
            symbolSize: 5
        },
        lineStyle: {
            color: '#fff',
            width: 1,
            opacity: 0.6,
            curveness: 0.2
        },
        data: lineData.map(function (dataItem) {
            var fromCoord = geoData.find(function (geoItem) {
                return geoItem.name === dataItem.from;
            }).coord;
            var toCoord = geoData.find(function (geoItem) {
                return geoItem.name === dataItem.to;
            }).coord;
            return { fromCoord, toCoord };
        })
    }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
            brushType: 'stroke'
        },
        label: {
            emphasis: {
                show: true,
                position: 'right',
                formatter: '{b}'
            }
        },
        symbolSize: 10,
        itemStyle: {
            normal: {
                color: '#fff'
            }
        },
        data: geoData.map(function (geoItem) {
            return {
                name: geoItem.name,
                value: geoItem.coord.concat(10)
            };
        })
    }]
});

你需要将 `chart` 替换为你的 HTML 元素 ID，`lon1`、`lat1`、`lon2`、`lat2` 替换为城市 A 和城市 B 的经纬度。这样就可以在地图上绘制出两个城市之间的连线了。你可以根据自己的需求修改样式和数据。