vue实现分时图

Vue 实现分时图的方法

分时图是金融领域中常见的图表类型，用于展示股票或其他金融产品在一天内的价格走势。以下是使用 Vue 实现分时图的几种方法。

使用 ECharts 实现分时图

ECharts 是一个强大的可视化库，支持多种图表类型，包括分时图。

安装 ECharts：

npm install echarts --save

在 Vue 组件中使用 ECharts：

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

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          text: '分时图示例'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['09:30', '10:00', '10:30', '11:00', '11:30', '13:30', '14:00', '14:30', '15:00']
        },
        yAxis: {
          type: 'value',
          scale: true
        },
        series: [
          {
            name: '价格',
            type: 'line',
            data: [10.2, 10.5, 10.3, 10.8, 10.6, 10.9, 11.2, 11.0, 10.8],
            smooth: true
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

使用 Highcharts 实现分时图

Highcharts 是另一个流行的图表库，适合金融数据的可视化。

安装 Highcharts：

npm install highcharts --save

在 Vue 组件中使用 Highcharts：

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

<script>
import Highcharts from 'highcharts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      Highcharts.chart(this.$refs.chart, {
        title: {
          text: '分时图示例'
        },
        xAxis: {
          categories: ['09:30', '10:00', '10:30', '11:00', '11:30', '13:30', '14:00', '14:30', '15:00']
        },
        yAxis: {
          title: {
            text: '价格'
          }
        },
        series: [{
          name: '价格',
          data: [10.2, 10.5, 10.3, 10.8, 10.6, 10.9, 11.2, 11.0, 10.8],
          type: 'line'
        }]
      });
    }
  }
};
</script>

使用自定义 SVG 实现分时图

如果需要更灵活的定制，可以使用 SVG 手动绘制分时图。

<template>
  <svg width="800" height="500" ref="chart">
    <path :d="pathData" stroke="blue" fill="none" stroke-width="2" />
    <g v-for="(point, index) in points" :key="index">
      <circle :cx="getX(index)" :cy="getY(point)" r="3" fill="red" />
      <text :x="getX(index)" :y="getY(point) - 10" font-size="12">{{ point }}</text>
    </g>
  </svg>
</template>

<script>
export default {
  data() {
    return {
      points: [10.2, 10.5, 10.3, 10.8, 10.6, 10.9, 11.2, 11.0, 10.8],
      times: ['09:30', '10:00', '10:30', '11:00', '11:30', '13:30', '14:00', '14:30', '15:00']
    };
  },
  computed: {
    pathData() {
      return this.points.map((point, index) => {
        const x = this.getX(index);
        const y = this.getY(point);
        return `${index === 0 ? 'M' : 'L'} ${x} ${y}`;
      }).join(' ');
    }
  },
  methods: {
    getX(index) {
      return 50 + index * 80;
    },
    getY(value) {
      return 450 - (value - 10) * 100;
    }
  }
};
</script>

使用 TradingVue.js 实现分时图

TradingVue.js 是专门为金融图表设计的 Vue 库。

安装 TradingVue.js：

npm install trading-vue-js

在 Vue 组件中使用 TradingVue.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: [
          [ 1577836800000, 10.2, 10.5, 10.1, 10.3 ],
          [ 1577837100000, 10.3, 10.8, 10.2, 10.6 ],
          [ 1577837400000, 10.6, 10.9, 10.5, 10.8 ],
          [ 1577837700000, 10.8, 11.2, 10.7, 11.0 ],
          [ 1577838000000, 11.0, 11.0, 10.8, 10.8 ]
        ]
      }
    };
  }
};
</script>

以上方法可以根据需求选择适合的方案，ECharts 和 Highcharts 适合快速实现，自定义 SVG 适合高度定制化，TradingVue.js 则专为金融图表设计。