From fde4daf5bf6ace15c3f78eb3bb5b9dbdad763674 Mon Sep 17 00:00:00 2001
From: zzzz <690498789@qq.com>
Date: Wed, 24 Apr 2024 21:37:54 +0800
Subject: [PATCH] first
---
src/page/kline/components/kLine.vue | 83 ++++++++++++++++++++++++++++++++++++++---
1 files changed, 77 insertions(+), 6 deletions(-)
diff --git a/src/page/kline/components/kLine.vue b/src/page/kline/components/kLine.vue
index 13d6477..cd4f695 100644
--- a/src/page/kline/components/kLine.vue
+++ b/src/page/kline/components/kLine.vue
@@ -51,7 +51,7 @@
<div
class="hqchart"
id="hqchart_minute"
- ref="kline"
+ ref="mychart"
v-show="chartType == 'minute'"
></div>
<div
@@ -67,6 +67,8 @@
</template>
<script>
+import * as echarts from "echarts";
+
import _ from "lodash";
import HQChart from "hqchart";
import "hqchart/src/jscommon/umychart.resource/css/tools.css";
@@ -1014,6 +1016,7 @@
VolChartHeight: 10,
chartType: "kline",
isShow: false,
+ xData: [],
};
},
created() {
@@ -1033,6 +1036,7 @@
},
mounted() {
+ this.initEcharts();
this.offHeight = this.$refs["rightContent"].offsetHeight;
this.OnSize();
this.SetChartStyle();
@@ -1074,6 +1078,70 @@
},
methods: {
+ // 横坐标数据处理
+ initxData() {
+ for (let i = 0; i < this.klineData.length; i++) {
+ this.xData[i] = this.klineData[i].datetime;
+ }
+ },
+ // 数据计算以及拆分，将json数据转为数组数据
+ splitData(jsonData) {
+ const hourData = [];
+ for (let i = 0; i < jsonData.length; i++) {
+ hourData.push([
+ i,
+ jsonData[i].price,
+ jsonData[i].increase,
+ jsonData[i].volume,
+ jsonData[i].ratio,
+ jsonData[i].amount,
+ jsonData[i].datetime,
+ ]);
+ }
+ this.hourData = hourData;
+ },
+ initEcharts() {
+ const option = {
+ // 横坐标数据配置
+ xAxis: [
+ {
+ type: "category",
+ data: this.xData,
+ boundaryGap: false,
+ axisLine: { onZero: false },
+ splitLine: { show: false },
+ min: "dataMin",
+ max: "dataMax",
+ },
+ ],
+ // 纵坐标配置
+ yAxis: [
+ {
+ scale: true,
+ splitArea: {
+ show: true,
+ },
+ },
+ ],
+ //图形数据配置：
+ series: [
+ {
+ type: "line",
+ data: this.hourData,
+ symbol: "none", //无标记图案
+ lineStyle: {
+ width: 1,
+ },
+ },
+ ],
+ };
+ const myChart = echarts.init(this.$refs.mychart); // 图标初始化
+ myChart.setOption(option); // 渲染页面
+ //随着屏幕大小调节图表
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+ },
OnSize() {
var width = this.$refs.right.clientWidth;
// var rightTab = this.$refs.rightTab
@@ -1175,11 +1243,14 @@
item,
type // K线周期
) {
- // if (index !== 0) { //分时额外处理才注释的
- this.chartType = type;
- this.KLinePeriodIndex = index;
- this.KLineChart.ChangePeriod(item.ID);
- // }
+ if (index !== 0) {
+ //分时额外处理才注释的
+ this.chartType = type;
+ this.KLinePeriodIndex = index;
+ this.KLineChart.ChangePeriod(item.ID);
+ } else {
+ this.chartType = "minute";
+ }
},
OnClickKLineRightMenu(
--
Gitblit v1.9.3