如何像基础Volume indicator一样在图表底部绘制满足条件的堆叠亮灯点？

核心思路：先在图表底部区域生成固定数量的堆叠圆点，默认处于灰色未激活状态；当预设条件满足时，通过切换圆点的样式（颜色/透明度）实现「亮起」效果。以下是具体实现方案：

1. 基础布局与样式（原生HTML/CSS） #

先给图表容器底部预留位置，创建堆叠点的容器，用CSS控制点的排列和样式：

<!-- 图表容器 -->
<div id="chart-container">
  <!-- 你的图表组件（比如ECharts/Highcharts的容器） -->
  <div id="main-chart"></div>
  <!-- 堆叠点容器 -->
  <div class="stacked-dots-wrap"></div>
</div>

#chart-container {
  position: relative;
  width: 800px;
  height: 500px;
}

#main-chart {
  width: 100%;
  height: calc(100% - 50px); /* 给底部点容器留空间 */
}

.stacked-dots-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 10px;
}

.stacked-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #aaa;
  transition: background-color 0.2s;
}

/* 亮起状态的样式 */
.stacked-dot.active {
  background-color: #27ae60;
  box-shadow: 0 0 4px #27ae60; /* 可选：加个发光效果增强视觉 */
}

2. 动态生成堆叠点 #

用JavaScript生成指定数量的圆点，插入到容器中：

const dotWrap = document.querySelector('.stacked-dots-wrap');
const totalDots = 25; // 你需要的堆叠点总数

// 批量创建圆点
for (let i = 0; i < totalDots; i++) {
  const dot = document.createElement('div');
  dot.classList.add('stacked-dot');
  dotWrap.appendChild(dot);
}

3. 条件判断与高亮控制 #

根据你的业务条件（比如成交量突破阈值、价格触发信号等），控制圆点的激活状态。这里以「成交量超过5日均值」为例：

// 模拟获取当前成交量和5日均值的函数，替换成你的实际数据逻辑
function getCurrentVolume() {
  return Math.floor(Math.random() * 1000);
}

function get5DayAvgVolume() {
  return 500;
}

// 检查条件是否满足
function isConditionMet() {
  return getCurrentVolume() > get5DayAvgVolume();
}

// 更新圆点状态的函数
function updateDotStatus() {
  const allDots = document.querySelectorAll('.stacked-dot');
  const conditionPassed = isConditionMet();

  // 示例1：满足条件时点亮最后一个未激活的点（依次堆叠亮起）
  if (conditionPassed) {
    const inactiveDots = Array.from(allDots).filter(dot => !dot.classList.contains('active'));
    if (inactiveDots.length > 0) {
      inactiveDots[0].classList.add('active');
    }
  }

  // 示例2：满足条件时全部点亮，不满足时全部熄灭（按需选择）
  // allDots.forEach(dot => {
  //   dot.classList.toggle('active', conditionPassed);
  // });
}

// 绑定到图表的更新事件，或者定时检查
// 比如ECharts的render完成后触发：
// myChart.on('rendered', updateDotStatus);
// 或者定时轮询（适合实时数据场景）
setInterval(updateDotStatus, 1500);

4. 适配专业图表库（以ECharts为例） #

如果用ECharts这类库，可以直接用自定义散点系列实现，无需额外DOM：

const myChart = echarts.init(document.getElementById('main-chart'));

// 生成堆叠点的初始数据
const dotData = Array(25).fill().map((_, idx) => ({
  value: [idx, 0], // 固定在y轴底部
  itemStyle: { color: '#aaa' }
}));

function updateChartDotStyle() {
  const conditionPassed = isConditionMet();
  // 这里可以自定义点亮逻辑，比如点亮第N个点
  dotData.forEach((dot, idx) => {
    // 示例：满足条件时，前10个点亮起（按需调整）
    dot.itemStyle.color = conditionPassed && idx < 10 ? '#27ae60' : '#aaa';
  });
  myChart.setOption({ series: [{ data: dotData }] });
}

const option = {
  grid: { bottom: 60 }, // 底部预留空间
  xAxis: { type: 'category', data: Array(25).fill().map((_, i) => i) },
  yAxis: { min: 0 },
  series: [
    // 你的主图表系列（比如K线/折线）
    { type: 'line', data: [/* 你的数据 */] },
    // 堆叠点系列
    {
      type: 'scatter',
      data: dotData,
      symbolSize: 7,
      z: 10 // 确保点在最上层
    }
  ]
};

myChart.setOption(option);
// 绑定更新事件
setInterval(updateChartDotStyle, 1500);

内容的提问来源于stack exchange，提问作者JohntheFisherman123