no message

jhzh

2024-09-19 e3097587828362e34352cf4f378c8f5a260ea700

 src/page/kline/components/kLine.vue

@@ -1,59 +1,8 @@
<template>
  <div class="box">
    <!-- <div class="left">
          <el-menu
              default-active="AAPL.usa"
              class="el-menu-vertical-demo"
              background-color="#191919"
              text-color="#dee4eb"
              active-text-color="#ff6900"
              :unique-opened="true"
              @select='handleSelect'
              @open="handleOpen"
              @close="handleClose">
              <el-submenu v-for="item in NavMenuAry" :key="item.Title" :index="item.Title">
              <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{item.Title}}</span>
              </template>
                  <el-menu-item v-for="subItem in item.Sub" :key='subItem.Code' :index="subItem.Code">{{subItem.Name}}</el-menu-item>
              </el-submenu>
          </el-menu>
    </div> -->

    <div class="right" ref="right">
      <!-- <div class="rightTab" ref="rightTab">
              <div class="btn showMinute" :class="{ active: chartType == 'minute' }"
                  @click="changeRightContent('minute')">分时图</div>
              <div class="btn showKline" :class="{ active: chartType == 'kline' }" @click="changeRightContent('kline')">
                  K线图</div>
      </div>-->
      <div class="rightContent" ref="rightContent">
        <!-- <div class="contentBox" v-show='chartType == "minute"'>
                  <div class="indexWrap" ref="minute_indexWrap">
                      <div class="btnGroup">
                          <div class="btn" v-for="(indexName) in MinuteIndexMenu" :key="indexName.ID"
                              @click="changeChartIndex(indexName.ID)">{{ indexName.Name }}</div>
                      </div>
                  </div>
                  <div class="periodWrap" ref='minute_periodWrap'>
                      <div class="btnGroup">
                          <div class="btn" :class="{ active: MinuteDayIndex == index }"
                              v-for="(item, index) in MinuteDayMenu" :key="item.ID"
                              @click="OnClickMinuteDayMenu(index, item)">{{ item.Name }}</div>
                      </div>
                  </div>

        </div>-->

        <div class="contentBox">
          <!-- 分时 -->
          <!-- <div class="indexWrap" ref="kline_indexWrap">
                      <div class="btnGroup">
                          <div class="btn" v-for="(item) in KLineIndexMenu" :key="item.ID"
                              @click="ChangeKLineIndex(item)">{{ item.Name }}</div>
                      </div>:class="{ active: KLinePeriodIndex == index }"
          </div>-->
          <div class="periodWrap kline_periodWrap" ref="kline_periodWrap">
            <!-- DWM 分 -->
            <div class="btnGroup" style="position: relative">
@@ -64,24 +13,9 @@
                :key="item.ID"
                @click="OnClickKLinePeriodMenu(index, item, 'kline')"
              >
                <!-- <div
                class="btn2"
                v-for="(item, index) in KLinePeriodMenu"
                :class="{ active: KLinePeriodIndex == index }"
                :key="item.ID"
                @click="index == 0 ? changeRightContent('minute') : OnClickKLinePeriodMenu(index, item, 'kline')"
              > -->
                <span>{{ item.Name }}</span>
              </div>
              <div
                class="btn2"
                @click="isShow ? (isShow = false) : (isShow = true)"
              >
                <div class="btn2">
                  <!-- :class="KLinePeriodIndex === index ? 'active' : ''" -->
                  <img src="../../../assets/img/options.png" alt />
                </div>
              </div>

              <div
                style="position: absolute; right: 0; top: 25px; z-index: 99"
                v-if="isShow == true"
@@ -126,32 +60,22 @@
            ref="kline2"
            v-show="chartType == 'kline'"
          ></div>

          <!-- <div class="statementWrap" ref="kline_statementWrap">
                      郑重声明：本页面所有数据来自互联网或自动生成的测试数据,仅用于学习HQChart图形库使用,不构成任何投资价值信息。如使用者依据本网站提供的信息、资料及图表进行金融、证券等投资所造成的盈亏与本网站无关。
          </div>-->
        </div>
      </div>
    </div>

    <!-- <div class="right" ref="kline_right" >

    </div>-->
  </div>
</template>

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

import _ from "lodash";
import HQChart from "hqchart";
import "hqchart/src/jscommon/umychart.resource/css/tools.css";
import "hqchart/src/jscommon/umychart.resource/font/iconfont.css";
import EastMoney from "../../../eastmoney/HQData.js";
import i18n from "@/locales/index.js";
// 源码调试用
// import Chart from '../jscommon/umychart.vue/umychart.vue.js'
// import '../jscommon/umychart.resource/css/tools.css'
// import '../jscommon/umychart.resource/font/iconfont.css'
// var HQChart={ Chart:Chart };

HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) {
  return 2;
}; // 一直交易
@@ -161,7 +85,7 @@
  var option = {
    Type: "分钟走势图", // 创建图形类型
    // Type:'分钟走势图横屏',
    Language: 1, // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
    Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
    // 窗口指标
    Windows: [
      // { Index:"KDJ", Modify: false, Change: true, Close: true},
@@ -953,7 +877,7 @@
DefaultData.GetKLineOption = function () {
  var option = {
    Type: "历史K线图", // 创建图形类型
    Language: 1, // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
    Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
    // 窗口指标
    Windows: [
      { Index: "MA", Modify: true, Change: false, height: 20 },
@@ -1039,7 +963,7 @@
DefaultData.GetKLinePeriodMenu = function () {
  var data = [
    // { Name: i18n.t('hj86'), ID: 3 },分时额外处理
    { Name: i18n.t("hj86"), ID: 4 },
    // { Name: i18n.t("hj86"), ID: 4 },
    { Name: i18n.t("hj87"), ID: 0 },
    { Name: i18n.t("hj88"), ID: 1 },
    { Name: i18n.t("hj89"), ID: 2 },
@@ -1073,7 +997,7 @@
      MinuteDayMenu: DefaultData.GetMinuteDayMenu(),
      MinuteDayIndex: 0,
      KLinePeriodMenu: DefaultData.GetKLinePeriodMenu(),
      KLinePeriodIndex: 1,
      KLinePeriodIndex: 0,
      KLineRightMenu: DefaultData.GetKLineRightMenu(),
      KLineRightIndex: 0,
      IsShowRightMenu: true,
@@ -1092,6 +1016,7 @@
      VolChartHeight: 10,
      chartType: "kline",
      isShow: false,
      xData: [],
    };
  },
  created() {
@@ -1115,7 +1040,7 @@
    this.OnSize();
    this.SetChartStyle();
    this.$nextTick(() => {
      this.CreateMinuteChart();
      // this.CreateMinuteChart();
      this.CreateKLineChart();
    });
    let that = this;
@@ -1144,7 +1069,7 @@
    erd.listenTo(this.$refs["rightContent"], function (element) {
      var width = element.offsetWidth;
      var height = element.offsetHeight;
      self.tableHeight = height - 100; // 将监听到的宽高进行赋值
      self.tableHeight = height - 10; // 将监听到的宽高进行赋值
      self.tableWidth = width - 20;
      that.offHeight = height;
      that.OnSize();
@@ -1186,7 +1111,8 @@
        HQChart.Chart.STYLE_TYPE_ID.WHITE_ID
      ); // 读取黑色风格配置

      // blackStyle.UpBarColor = "rgba(0,0,0,1)";
      blackStyle.UpBarColor = "#449b54"; //上涨
      blackStyle.DownBarColor = "#e13b45";
      HQChart.Chart.JSChart.SetStyle(blackStyle);
    },

@@ -1252,11 +1178,10 @@
      item,
      type // K线周期
    ) {
      // if (index !== 0) {  //分时额外处理才注释的
      //分时额外处理才注释的
      this.chartType = type;
      this.KLinePeriodIndex = index;
      this.KLineChart.ChangePeriod(item.ID);
      // }
    },

    OnClickKLineRightMenu(
@@ -1411,6 +1336,7 @@
    }

    .rightContent {
      // height: calc(100% - @rightTabHeight);
      height: calc(100% - @rightTabHeight);
      width: 100%;

@@ -1531,6 +1457,6 @@
}
.hqchart {
  width: 100%;
  height: 7.5rem;
  height: 100vh;
}
</style>