echarts 飞线光柱

如果你想在飞线图上添加光柱效果，可以使用 ECharts 中的 `effectScatter` 系列来实现。下面是创建飞线光柱的步骤：

1. 引入 ECharts 库和主题样式：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.css">

2. 创建一个包含飞线图和光柱的容器：

<div id="chartContainer" style="width: 600px; height: 400px;"></div>

3. 使用 JavaScript 代码初始化图表并设置配置项：

var chart = echarts.init(document.getElementById('chartContainer'));

var option = {
    series: [
        {
            type: 'lines',
            coordinateSystem: 'geo',
            data: [...], // 飞线的数据，包含起始点和终点坐标
            polyline: true, // 设置为多段线模式
            lineStyle: {
                color: '#fff', // 线条颜色
                width: 1, // 线条宽度
                opacity: 0.6, // 线条透明度
                curveness: 0.2, // 线条曲度，值为 [0, 1]，表示曲线的弯曲程度
            },
        },
        {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [...], // 光柱的数据，包含光柱的位置坐标
            symbolSize: 8, // 光柱的大小
            showEffectOn: 'render', // 在渲染时显示特效
            rippleEffect: {
                brushType: 'stroke', // 特效的绘制方式，可选值为 'stroke' 或 'fill'
                scale: 4, // 特效的缩放比例
            },
            itemStyle: {
                color: '#fff', // 光柱的颜色
                opacity: 0.6, // 光柱的透明度
            },
        },
    ],
    // 其他配置项...
};

// 使用配置项绘制图表
chart.setOption(option);

在上面的代码中，我们使用了两个系列类型：`lines` 和 `effectScatter`。`lines` 用于绘制飞线，`effectScatter` 用于绘制光柱特效。你可以根据需要调整数据和配置项来实现自定义的飞线光柱效果。