首页echarts 根据曲线图绘制k线图

echarts 根据曲线图绘制k线图

时间: 2023-07-07 08:45:50 浏览: 128

ECharts 是一个非常流行的 JavaScript 图表库，可以用来绘制各种类型的图表，包括 K 线图。下面是一个简单的示例，使用 ECharts 绘制 K 线图，数据是从曲线图转换而来： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts K 线图示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 800px; height: 400px;"></div> <script type="text/javascript"> // 计算 K 线图数据 var data = [10, 15, 20, 25, 20, 15, 10]; var kdata = []; for (var i = 0; i < data.length; i += 2) { var open = data[i]; var close = data[i + 1]; var high = Math.max(data[i], data[i + 1]); var low = Math.min(data[i], data[i + 1]); kdata.push([open, close, low, high]); } // 绘制 K 线图 var myChart = echarts.init(document.getElementById('main')); var option = { xAxis: { type: 'category', data: ['T1', 'T2', 'T3'] }, yAxis: { type: 'value' }, series: [{ type: 'candlestick', data: kdata }] }; myChart.setOption(option); </script> </body> </html> ``` 以上代码将绘制一个包含开盘价、收盘价、最高价和最低价的 K 线图，并使用 "T1" 到 "T3" 作为 X 轴标签。你可以根据自己的需求修改数据和参数。

阅读全文