轻量级金融图表【lightweight-charts】【klinecharts】

珈一.

已于 2024-05-09 10:31:54 修改

阅读量287

点赞数 1

分类专栏： charts 文章标签：金融 javascript 前端

于 2024-04-23 11:17:24 首次发布

本文链接：https://blog.csdn.net/weixin_49870389/article/details/138117229

版权

charts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中利用lightweight-charts库创建实时股票K线图，以及如何从API获取数据并展示成交量和MACD等指标。展示了两个示例，分别使用lightweight-charts和klinecharts组件进行图表生成和数据处理。

摘要由CSDN通过智能技术生成

【lightweight-charts】

<template>
  <div class="p-4">
    <div ref="chartContainer" style="width: 100%; height: calc(100vh - 120px)"></div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { createChart } from 'lightweight-charts';
  import { exec_sql } from '@/api/factor';

  const chartContainer = ref(null);
  const data_list = ref<any>([]);
  const line_list = ref<any>([]);
  const option = ref<any>({
    // margin: [0, 0, 0, 0], // 动态改变大小，必须取消宽高
    localization: {
      // 设置x周时间格式
      dateFormat: 'yyyy-MM-dd',
    },
  });
  function handle_sql() {
    exec_sql({
      sql_command: `SELECT * FROM stock_base.tu_daily WHERE code='000001' order by date format JSONEachRow`,
    }).then((res) => {
      const dataList = !res.res ? [] : res.res.split('\n');
      dataList.map((item) => {
        const list = JSON.parse(item);
        const obj = {
          time: list.date,
          open: list.open,
          high: list.high,
          low: list.low,
          close: list.close,
          volume: Number(list.volume),
          turnover: ((list.open + list.high + list.low + list.close) / 4) * list.volume,
        };
        data_list.value.push(obj);
        line_list.value.push({
          time: list.date,
          value: Number(list.dtprice),
        });
      });
      const chart = createChart(chartContainer.value, option.value);

      // 蜡烛图
      const candlestickSeries = chart.addCandlestickSeries();
      candlestickSeries.setData(data_list.value);

      // 地区图
      // const areaSeries = chart.addAreaSeries();
      // areaSeries.setData(line_list.value);
      // const baselineSeries = chart.addBaselineSeries();
      // baselineSeries.setData(line_list.value);

      // 折线图
      // const lineSeries = chart.addLineSeries();
      // lineSeries.setData(line_list.value);

      // 柱状图
      const histogramSeries = chart.addHistogramSeries({
        // color: '#26A69A',
        priceScaleId: 'volume',
      });
      histogramSeries.setData(line_list.value);

      chart.timeScale().fitContent();
    });
  }
  handle_sql();
</script>

【klinecharts】

<template>
  <div class="p-4">
    <div id="chart" style="width: 100%; height: calc(100vh - 120px)"></div>
  </div>
</template>
<script lang="ts" setup>
  import { onUnmounted, ref } from 'vue';
  import { init, dispose } from 'klinecharts';
  import { exec_sql } from '@/api/factor';

  const data_list = ref<any>([]);
  function handle_sql() {
    exec_sql({
      sql_command: `SELECT * FROM stock_base.tu_daily WHERE code='000001' order by date format JSONEachRow`,
    }).then((res) => {
      const dataList = !res.res ? [] : res.res.split('\n');
      dataList.map((item) => {
        const list = JSON.parse(item);
        const obj = {
          timestamp: new Date(list.date).getTime(),
          open: list.open,
          high: list.high,
          low: list.low,
          close: list.close,
          volume: Number(list.volume),
          turnover: ((list.open + list.high + list.low + list.close) / 4) * list.volume,
        };
        data_list.value.push(obj);
      });
      const chart = init('chart');
      chart?.createIndicator('VOL');
      chart?.createIndicator('MACD');
      chart?.applyNewData(data_list.value);
    });
  }
  handle_sql();

  onUnmounted(() => {
    // 销毁图表
    dispose('chart');
  });
</script>