当前位置：首页 > JavaScript

js 实现股票k线图

2026-01-31 00:58:20JavaScript

实现股票K线图的基本步骤

使用JavaScript实现股票K线图通常需要借助图表库（如ECharts、Highcharts或Chart.js），以下是基于ECharts的实现方法。

引入ECharts库

通过CDN或npm安装ECharts：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

准备HTML容器

创建一个用于渲染图表的DOM元素：

<div id="klineChart" style="width: 800px; height: 500px;"></div>

初始化图表实例

在JavaScript中初始化图表并配置基本参数：

const chartDom = document.getElementById('klineChart');
const myChart = echarts.init(chartDom);

配置K线图数据

构造K线图所需的数据格式（包含开盘价、收盘价、最低价、最高价）：

const data = [
    // 格式: [日期, 开盘价, 收盘价, 最低价, 最高价, 成交量]
    ['2023-01-01', 20, 30, 10, 35, 1000],
    ['2023-01-02', 30, 25, 15, 40, 1500],
    // 更多数据...
];

设置图表选项

配置ECharts的K线图选项：

const option = {
    title: { text: '股票K线图' },
    tooltip: { trigger: 'axis' },
    xAxis: {
        type: 'category',
        data: data.map(item => item[0]),
    },
    yAxis: { scale: true },
    series: [{
        type: 'candlestick',
        data: data.map(item => [item[1], item[2], item[3], item[4]]),
    }]
};
myChart.setOption(option);

添加成交量指标

如果需要显示成交量，可以添加柱状图系列：

series: [
    {
        type: 'candlestick',
        data: data.map(item => [item[1], item[2], item[3], item[4]]),
    },
    {
        type: 'bar',
        data: data.map(item => item[5]),
    }
]

响应式调整

监听窗口大小变化以实现自适应：

window.addEventListener('resize', () => myChart.resize());

数据动态更新

通过API或WebSocket实时更新数据：

js 实现股票k线图

function updateData(newData) {
    myChart.setOption({
        series: [{
            data: newData.map(item => [item[1], item[2], item[3], item[4]])
        }]
    });
}