K线图演示

参考配置

基础K线图

html

<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'candle',
  animation: true,
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    data: [{
      min: 0,
      max: 100
    }]
  },
  series: [{
    name: '股价',
    data: [
      { value: [20, 30, 15, 25], color: '#2979ff' },
      { value: [25, 35, 20, 30], color: '#19be6b' },
      { value: [30, 40, 25, 35], color: '#ff9800' },
      { value: [35, 45, 30, 40], color: '#f44336' },
      { value: [40, 50, 35, 45], color: '#9c27b0' }
    ]
  }],
  categories: ['周一', '周二', '周三', '周四', '周五']
});
</script>

配置说明

type

图表类型，设置为 'candle' 表示K线图。

series

数据系列配置：

name: 系列名称
data: 数据数组，每个元素包含：
- value: 数组 [开盘价, 最高价, 最低价, 收盘价]
- color: 颜色

K线图演示 ​

参考配置 ​

基础K线图 ​

配置说明 ​

type ​

series ​

categories ​

K线图演示

参考配置

基础K线图

配置说明

type

series

categories