vue实现k线图

使用 Vue 实现 K 线图

安装依赖

K 线图通常需要借助图表库实现，推荐使用 echarts 或 lightweight-charts。以下是安装 echarts 的步骤：

npm install echarts --save

引入 ECharts

在 Vue 组件中引入 ECharts 并初始化：

import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.klineChart;
      const myChart = echarts.init(chartDom);
      const option = this.getChartOption();
      myChart.setOption(option);
    },
    getChartOption() {
      return {
        title: { text: 'K 线图示例' },
        tooltip: { trigger: 'axis' },
        xAxis: { data: ['2023-01', '2023-02', '2023-03', '2023-04'] },
        yAxis: {},
        series: [{
          type: 'candlestick',
          data: [
            [20, 30, 10, 25],
            [25, 35, 20, 30],
            [30, 40, 25, 35],
            [35, 45, 30, 40]
          ]
        }]
      };
    }
  }
}

模板部分

在模板中定义图表容器：

<template>
  <div ref="klineChart" style="width: 600px; height: 400px;"></div>
</template>

动态数据绑定

若需动态更新数据，可通过监听数据变化并调用 setOption：

watch: {
  data(newVal) {
    const myChart = echarts.getInstanceByDom(this.$refs.klineChart);
    myChart.setOption({ series: [{ data: newVal }] });
  }
}

响应式调整

监听窗口大小变化，自动调整图表尺寸：

mounted() {
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    const myChart = echarts.getInstanceByDom(this.$refs.klineChart);
    myChart.resize();
  }
}

使用 Lightweight-Charts（备选方案）

若需更轻量级的库，可安装 lightweight-charts：

npm install lightweight-charts --save

示例代码：

import { createChart } from 'lightweight-charts';

export default {
  mounted() {
    const chart = createChart(this.$refs.klineChart);
    const candlestickSeries = chart.addCandlestickSeries();
    candlestickSeries.setData([
      { time: '2023-01-01', open: 20, high: 30, low: 10, close: 25 },
      { time: '2023-02-01', open: 25, high: 35, low: 20, close: 30 }
    ]);
  }
}