当前位置：首页 > VUE

vue实现股市图

2026-01-18 12:50:52VUE

Vue 实现股市图的方法

使用 ECharts 实现股市图

ECharts 是一个强大的数据可视化库，支持多种图表类型，包括 K 线图、折线图等适合股市数据的展示方式。在 Vue 项目中可以通过 vue-echarts 封装组件快速集成。

安装依赖：

npm install echarts vue-echarts

示例代码：

<template>
  <v-chart :option="option" style="height: 400px" />
</template>

<script>
import { use } from "echarts/core";
import { CandlestickChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import VChart from "vue-echarts";

use([CandlestickChart, GridComponent, TooltipComponent, CanvasRenderer]);

export default {
  components: { VChart },
  data() {
    return {
      option: {
        xAxis: { type: "category", data: ["Day1", "Day2", "Day3"] },
        yAxis: { scale: true },
        series: [{
          type: "candlestick",
          data: [
            [20, 30, 10, 25],
            [25, 35, 15, 30],
            [30, 40, 20, 35]
          ]
        }]
      }
    };
  }
};
</script>

使用 TradingVue.js 实现专业级股市图

TradingVue.js 是专为金融数据可视化设计的 Vue 库，支持 K 线图、技术指标叠加等高级功能。

安装依赖：

npm install trading-vue-js

示例代码：

<template>
  <trading-vue :data="chartData" :width="800" :height="500" />
</template>

<script>
import TradingVue from "trading-vue-js";

export default {
  components: { TradingVue },
  data() {
    return {
      chartData: {
        ohlcv: [
          [ 1551128400000, 33,  37.1, 14,  14,  196 ],
          [ 1551132000000, 13.7, 30, 6.6, 30,  206 ],
          [ 1551135600000, 29.9, 33, 21.3, 21.8, 74 ]
        ]
      }
    };
  }
};
</script>

使用 Lightweight Charts 实现高性能渲染

Lightweight Charts 是 TradingView 推出的轻量级金融图表库，适合需要高性能渲染的场景。

安装依赖：

npm install lightweight-charts

示例代码：

<template>
  <div ref="chartContainer" style="width: 800px; height: 500px"></div>
</template>

<script>
import { createChart } from "lightweight-charts";

export default {
  mounted() {
    const chart = createChart(this.$refs.chartContainer);
    const candlestickSeries = chart.addCandlestickSeries();
    candlestickSeries.setData([
      { time: "2019-01-01", open: 10, high: 20, low: 5, close: 15 },
      { time: "2019-01-02", open: 15, high: 25, low: 10, close: 20 }
    ]);
  }
};
</script>

自定义 SVG 实现简单股市图

对于简单需求，可以直接使用 SVG 和 Vue 的响应式特性实现基础图表。

示例代码：

<template>
  <svg width="600" height="300">
    <g v-for="(item, index) in data" :key="index">
      <line 
        :x1="index * 50 + 25" 
        :y1="300 - item.high * 10"
        :x2="index * 50 + 25"
        :y2="300 - item.low * 10"
        stroke="black"
      />
      <rect
        :x="index * 50 + 10"
        :y="300 - (item.open > item.close ? item.open : item.close) * 10"
        width="30"
        :height="Math.abs(item.open - item.close) * 10"
        :fill="item.open > item.close ? 'red' : 'green'"
      />
    </g>
  </svg>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { open: 15, high: 20, low: 10, close: 18 },
        { open: 18, high: 25, low: 15, close: 16 }
      ]
    };
  }
};
</script>