vue3 echarts实现k线

echarts实现k线

安装

npm install echarts
1

实现效果
没有添加成交量和均线

核心代码

引入echarts
echartsData表示echarts数据
这样写是为了方便点击时间切换k线数据

window.addEventListener(“resize”, () => {
chart.resize();
});
当屏幕大小切换之后自动切换图表大小

import * as echarts from "echarts";

const echartsData = ref([
  {
    time: "1M",
    data: [
      [20, 34, 10, 38],
      [40, 35, 30, 50],
      [31, 38, 33, 44],
      [38, 15, 5, 42],
    ],
  },
  {
    time: "5M",
    data: [
      [25, 30, 20, 35],
      [45, 36, 32, 48],
      [33, 39, 31, 45],
      [37, 14, 4, 41],
    ],
  },
  {
    time: "15M",
    data: [
      [33, 39, 31, 45],
      [37, 14, 4, 41],
      [22, 32, 18, 36],
      [42, 37, 29, 47],
    ],
  },
  {
    time: "30M",
    data: [
      [31, 38, 33, 44],
      [38, 15, 5, 42],
      [25, 30, 20, 35],
      [45, 36, 32, 48],
    ],
  },
  {
    time: "1H",
    data: [
      [33, 39, 31, 45],
      [37, 14, 4, 41],
      [22, 32, 18, 36],
      [42, 37, 29, 47],
    ],
  },
  {
    time: "4H",
    data: [
      [30, 45, 28, 50],
      [50, 38, 35, 55],
      [53, 45, 35, 48],
      [52, 42, 38, 49],
    ],
  },
]);

let chart;

onMounted(() => {
  chart = echarts.init(chart_box.value);
  option && chart.setOption(option);

  window.addEventListener("resize", () => {
    chart.resize();
  });
});
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

完整代码

<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";

const chart_box = ref(null);

const active = ref("1M");

const echartsData = ref([
  {
    time: "1M",
    data: [
      [20, 34, 10, 38],
      [40, 35, 30, 50],
      [31, 38, 33, 44],
      [38, 15, 5, 42],
    ],
  },
  {
    time: "5M",
    data: [
      [25, 30, 20, 35],
      [45, 36, 32, 48],
      [33, 39, 31, 45],
      [37, 14, 4, 41],
    ],
  },
  {
    time: "15M",
    data: [
      [33, 39, 31, 45],
      [37, 14, 4, 41],
      [22, 32, 18, 36],
      [42, 37, 29, 47],
    ],
  },
  {
    time: "30M",
    data: [
      [31, 38, 33, 44],
      [38, 15, 5, 42],
      [25, 30, 20, 35],
      [45, 36, 32, 48],
    ],
  },
  {
    time: "1H",
    data: [
      [33, 39, 31, 45],
      [37, 14, 4, 41],
      [22, 32, 18, 36],
      [42, 37, 29, 47],
    ],
  },
  {
    time: "4H",
    data: [
      [30, 45, 28, 50],
      [50, 38, 35, 55],
      [53, 45, 35, 48],
      [52, 42, 38, 49],
    ],
  },
]);

const option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
    },
  },
  xAxis: {
    data: ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"],
  },
  yAxis: {},
  series: [
    {
      type: "candlestick",
      data: echartsData.value[0].data,
    },
  ],
};

let chart;

onMounted(() => {
  chart = echarts.init(chart_box.value);
  option && chart.setOption(option);

  window.addEventListener("resize", () => {
    chart.resize();
  });
});

const goTime = (item) => {
  active.value = item.time;
  option.series[0].data = item.data;
  chart.setOption(option)
};
</script>

<template>
  <div class="chart">
    <div class="time">
      <span
        v-for="(item, index) in echartsData"
        :key="index"
        @click="goTime(item)"
        :class="active === item.time ? 'active' : ''"
        >{{ item.time }}</span
      >
    </div>
    <div
      class="chart_box"
      ref="chart_box"
      style="width: 100%; height: 400px"
    ></div>
  </div>
</template>

<style lang="scss" scoped>
.chart {
  padding: 15px 0px;
}
.time {
  display: flex;
  justify-content: space-around;
}
.active {
  color: #1a73e8;
  font-weight: 600;
}
</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