vue3+klinecharts实现k线（附完整代码）

环境

vue3 + klinecharts

最终实现

安装

npm install klinecharts
1

图表配置

具体可用参考官网
https://klinecharts.com/guide/styles.html

const option = {
  crosshair: {
    show: true,
    // 十字光标水平线及文字
    horizontal: {
      show: true,
      line: {
        show: true,
        style: "solid",
        size: 1,
        color: "#333",
      },
   
    },
    vertical: {
      show: true,
      line: {
        show: true,
        style: 'solid',
        size: 1,
        color: '#333'
      },
  },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

配置图表

chart.setStyles(option);
1

创建一个容器

 <div id="chart_box" style="width: 100%; height: 450px"></div>
1

初始化图表

import { init} from "klinecharts";

const klineData = ref([...])

onMounted(() => {
  chart = init("chart_box");

  chart.setStyles(option);

  chart.createIndicator("VOL");

  chart.applyNewData(klineData.value[0].chart_data)
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

实现点击时间切换图表

	<div class="time">
      <span
        v-for="(item, index) in klineData"
        :key="index"
        @click="tabTime(item)"
        :class="item.time === active ? 'active' : ''"
        >{{ item.time }}</span
      >
    </div>
    
const active = ref("1M");
    
const tabTime = (item) => {
  active.value = item.time;
  chart.applyNewData(item.chart_data)
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

完整代码

<script setup>
import { onMounted, ref } from "vue";
import { init} from "klinecharts";

const active = ref("1M");

let chart;

const klineData = ref([
  {
    time: "1M",
    chart_data:[
  { "close": 4980.56, "high": 4982.33, "low": 4978.22, "open": 4980.22, "timestamp": 1635234000000, "volume": 220 },
  { "close": 4982.12, "high": 4984.45, "low": 4980.08, "open": 4981.15, "timestamp": 1635234060000, "volume": 165 },
  { "close": 4978.88, "high": 4980.75, "low": 4977.10, "open": 4980.50, "timestamp": 1635234120000, "volume": 145 },
  { "close": 4983.23, "high": 4985.12, "low": 4981.55, "open": 4982.10, "timestamp": 1635234180000, "volume": 200 },
  { "close": 4985.67, "high": 4987.25, "low": 4984.08, "open": 4986.22, "timestamp": 1635234240000, "volume": 165 },
 
]
  },
  {
    time: "5M",
    chart_data:[
  { "close": 4992.45, "high": 4994.12, "low": 4991.55, "open": 4991.88, "timestamp": 1635240000000, "volume": 190 },
  { "close": 4993.22, "high": 4995.10, "low": 4992.45, "open": 4992.55, "timestamp": 1635240060000, "volume": 225 },
  { "close": 4995.08, "high": 4996.55, "low": 4994.22, "open": 4994.88, "timestamp": 1635240120000, "volume": 160 },
  { "close": 4994.67, "high": 4996.22, "low": 4994.10, "open": 4995.22, "timestamp": 1635240180000, "volume": 155 },
  { "close": 4997.12, "high": 4998.45, "low": 4996.08, "open": 4996.55, "timestamp": 1635240240000, "volume": 200 },
  
]

  },
  {
    time: "15M",
    chart_data:[
    { "close": 4986.45, "high": 4988.10, "low": 4985.34, "open": 4986.98, "timestamp": 1635234300000, "volume": 198 },
  { "close": 4984.79, "high": 4987.55, "low": 4984.12, "open": 4985.22, "timestamp": 1635234360000, "volume": 225 },
  { "close": 4987.90, "high": 4989.25, "low": 4986.55, "open": 4987.10, "timestamp": 1635234420000, "volume": 210 },
  { "close": 4989.12, "high": 4991.20, "low": 4988.45, "open": 4989.55, "timestamp": 1635234480000, "volume": 215 },
  { "close": 4990.55, "high": 4992.34, "low": 4989.88, "open": 4990.12, "timestamp": 1635234540000, "volume": 230 }
    ]
  },
  {
    time: "30M",
    chart_data:[
    { "close": 4998.56, "high": 4999.25, "low": 4997.45, "open": 4997.90, "timestamp": 1635240300000, "volume": 220 },
  { "close": 4998.22, "high": 5000.10, "low": 4998.12, "open": 4998.45, "timestamp": 1635240360000, "volume": 215 },
  { "close": 5000.10, "high": 5001.22, "low": 4999.55, "open": 5000.00, "timestamp": 1635240420000, "volume": 210 },
  { "close": 4999.88, "high": 5001.55, "low": 4999.22, "open": 5000.45, "timestamp": 1635240480000, "volume": 225 },
  { "close": 5001.34, "high": 5002.45, "low": 5000.88, "open": 5001.22, "timestamp": 1635240540000, "volume": 230 }
    ]
  },
  {
    time: "1H",
    chart_data:[
    { "close": 5003.68, "high": 5004.42, "low": 5002.95, "open": 5003.00, "timestamp": 1635240600000, "volume": 220 },
    { "close": 5004.10, "high": 5005.28, "low": 5003.75, "open": 5003.80, "timestamp": 1635240660000, "volume": 215 },
    { "close": 5005.22, "high": 5006.15, "low": 5004.88, "open": 5005.00, "timestamp": 1635240720000, "volume": 210 },
    { "close": 5004.78, "high": 5006.22, "low": 5004.05, "open": 5005.22, "timestamp": 1635240780000, "volume": 225 },
    { "close": 5006.02, "high": 5007.45, "low": 5005.88, "open": 5006.10, "timestamp": 1635240840000, "volume": 230 }
    ]
  },
  {
    time: "4H",
    chart_data:[
    { "close": 5006.45, "high": 5007.90, "low": 5005.75, "open": 5006.68, "timestamp": 1635240900000, "volume": 220 },
    { "close": 5006.88, "high": 5008.22, "low": 5006.45, "open": 5007.00, "timestamp": 1635240960000, "volume": 215 },
    { "close": 5007.15, "high": 5008.50, "low": 5007.00, "open": 5007.25, "timestamp": 1635241020000, "volume": 210 },
  { "close": 4999.88, "high": 5001.55, "low": 4999.22, "open": 5000.45, "timestamp": 1635240480000, "volume": 225 },
  { "close": 5007.88, "high": 5009.10, "low": 5007.55, "open": 5007.95, "timestamp": 1635241140000, "volume": 230 }
    ]
  },
]);

const option = {
  crosshair: {
    show: true,
    // 十字光标水平线及文字
    horizontal: {
      show: true,
      line: {
        show: true,
        style: "solid",
        size: 1,
        color: "#333",
      },
   
    },
    vertical: {
      show: true,
      line: {
        show: true,
        style: 'solid',
        size: 1,
        color: '#333'
      },
  },
},

    
};

onMounted(() => {
  chart = init("chart_box");

  chart.setStyles(option);

  chart.createIndicator("VOL");

  chart.applyNewData(klineData.value[0].chart_data)
});

const tabTime = (item) => {
  active.value = item.time;
  chart.applyNewData(item.chart_data)
};
</script>

<template>
  <div class="charts">
    <div class="time">
      <span
        v-for="(item, index) in klineData"
        :key="index"
        @click="tabTime(item)"
        :class="item.time === active ? 'active' : ''"
        >{{ item.time }}</span
      >
    </div>
    <div id="chart_box" style="width: 100%; height: 450px"></div>
  </div>
</template>

<style lang="scss" scoped>
.charts {
  width: auto;
  height: 100vh;
  .time {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    .active {
      color: #1a89ee;
    }
  }
  #chart_box {
    margin: 15px 0px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150