| | |
| | | <div class="periodWrap kline_periodWrap" ref="kline_periodWrap"> |
| | | <!-- DWM 分 --> |
| | | <div class="btnGroup" style="position: relative"> |
| | | <div |
| | | class="btn2" |
| | | v-for="(item, index) in KLinePeriodMenu" |
| | | :class="{ active: KLinePeriodIndex == index }" |
| | | :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="OnClickKLinePeriodMenu(index, item, 'kline')"> |
| | | <span>{{ item.Name }}</span> |
| | | </div> |
| | | |
| | | <div |
| | | style="position: absolute; right: 0; top: 25px; z-index: 99" |
| | | v-if="isShow == true" |
| | | > |
| | | <div |
| | | class="btnGroup" |
| | | v-show="IsShowRightMenu" |
| | | style="display: flex; flex-direction: column" |
| | | > |
| | | <div |
| | | class="btn" |
| | | :class="{ active: KLineRightIndex == index }" |
| | | v-for="(item, index) in KLineRightMenu" |
| | | :key="item.ID" |
| | | style="padding: 10px" |
| | | @click="OnClickKLineRightMenu(index, item)" |
| | | > |
| | | <div style="position: absolute; right: 0; top: 25px; z-index: 99" v-if="isShow == true"> |
| | | <div class="btnGroup" v-show="IsShowRightMenu" style="display: flex; flex-direction: column"> |
| | | <div class="btn" :class="{ active: KLineRightIndex == index }" v-for="(item, index) in KLineRightMenu" |
| | | :key="item.ID" style="padding: 10px" @click="OnClickKLineRightMenu(index, item)"> |
| | | {{ item.Name }} |
| | | </div> |
| | | <div |
| | | class="btn" |
| | | v-for="item in KLineIndexMenu" |
| | | :key="item.ID" |
| | | style="padding: 10px" |
| | | @click="ChangeKLineIndex(item)" |
| | | > |
| | | <div class="btn" v-for="item in KLineIndexMenu" :key="item.ID" style="padding: 10px" |
| | | @click="ChangeKLineIndex(item)"> |
| | | {{ item.Name }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="hqchart" |
| | | id="hqchart_minute" |
| | | ref="kline" |
| | | v-show="chartType == 'minute'" |
| | | ></div> |
| | | <div |
| | | class="hqchart" |
| | | id="hqchart_kline" |
| | | ref="kline2" |
| | | v-show="chartType == 'kline'" |
| | | ></div> |
| | | <div class="hqchart" id="hqchart_minute" ref="kline" v-show="chartType == 'minute'"></div> |
| | | <div class="hqchart" id="hqchart_kline" ref="kline2" v-show="chartType == 'kline'"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | var _timers = [] |
| | | import * as echarts from "echarts"; |
| | | |
| | | import _ from "lodash"; |
| | | import HQChart from "hqchart"; |
| | | import "hqchart/src/jscommon/umychart.resource/css/tools.css"; |
| | |
| | | import EastMoney from "../../../eastmoney/HQData.js"; |
| | | import i18n from "@/locales/index.js"; |
| | | |
| | | HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function(symbol) { |
| | | HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) { |
| | | return 2; |
| | | }; // 一直交易 |
| | | function DefaultData() {} |
| | | function DefaultData() { } |
| | | |
| | | DefaultData.GetMinuteOption = function() { |
| | | DefaultData.GetMinuteOption = function () { |
| | | var option = { |
| | | Type: "分钟走势图", // 创建图形类型 |
| | | // Type:'分钟走势图横屏', |
| | |
| | | return option; |
| | | }; |
| | | |
| | | DefaultData.GetMinuteIndexMenu = function() { |
| | | DefaultData.GetMinuteIndexMenu = function () { |
| | | var data = [ |
| | | { |
| | | Name: "MACD", |
| | |
| | | return data; |
| | | }; |
| | | |
| | | DefaultData.GetKLineIndexMenu = function() { |
| | | DefaultData.GetKLineIndexMenu = function () { |
| | | var data = [ |
| | | { |
| | | Name: "MA", |
| | |
| | | return data; |
| | | }; |
| | | |
| | | DefaultData.GetTestSymbolMenu = function() { |
| | | DefaultData.GetTestSymbolMenu = function () { |
| | | // 品种代码规则 ${东方财富品种代码}_${东方财富市场}.${HQChart内部市场后缀} |
| | | var data = [ |
| | | { |
| | |
| | | }; |
| | | |
| | | // k形图 |
| | | DefaultData.GetKLineOption = function() { |
| | | DefaultData.GetKLineOption = function () { |
| | | var option = { |
| | | Type: "历史K线图", // 创建图形类型 |
| | | Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文:"TC" |
| | |
| | | return option; |
| | | }; |
| | | |
| | | DefaultData.GetMinuteDayMenu = function() { |
| | | DefaultData.GetMinuteDayMenu = function () { |
| | | var data = [ |
| | | { |
| | | Name: "1D", |
| | |
| | | return data; |
| | | }; |
| | | |
| | | DefaultData.GetKLinePeriodMenu = function() { |
| | | DefaultData.GetKLinePeriodMenu = function () { |
| | | var data = [ |
| | | // { Name: i18n.t('hj86'), ID: 3 },分时额外处理 |
| | | // { Name: i18n.t("hj86"), ID: 4 }, |
| | |
| | | Name: i18n.t("hj89"), |
| | | ID: 2 |
| | | }, |
| | | // { |
| | | // Name: i18n.t("hj90"), |
| | | // ID: 4 |
| | | // }, |
| | | // { |
| | | // Name: i18n.t("hj91"), |
| | | // ID: 5 |
| | | // }, |
| | | { |
| | | Name: i18n.t("hj90"), |
| | | ID: 4 |
| | | }, |
| | | { |
| | | Name: i18n.t("hj91"), |
| | | ID: 5 |
| | | }, |
| | | { |
| | | Name: i18n.t("hjsfz"), |
| | | ID: 6 |
| | | }, |
| | | { |
| | | Name: i18n.t("hj92"), |
| | | ID: 7 |
| | |
| | | return data; |
| | | }; |
| | | |
| | | DefaultData.GetKLineRightMenu = function() { |
| | | DefaultData.GetKLineRightMenu = function () { |
| | | var data = [ |
| | | { |
| | | Name: i18n.t("hj93"), |
| | |
| | | |
| | | VolChartHeight: 10, |
| | | chartType: "kline", |
| | | timerss: null, |
| | | isShow: false, |
| | | xData: [] |
| | | xData: [], |
| | | }; |
| | | }, |
| | | |
| | |
| | | this.$nextTick(() => { |
| | | // this.CreateMinuteChart(); |
| | | this.CreateKLineChart(); |
| | | |
| | | // this.timerss = setInterval(() => { |
| | | // // this.KLineChart = null |
| | | // // this.CreateMinuteChart(); |
| | | // // this.CreateKLineChart(); |
| | | // console.log(this.KLinePeriodMenu); |
| | | // //此处为了 让k线实时刷新 |
| | | // this.OnClickKLinePeriodMenu(this.KLinePeriodIndex, 0, 'kline') |
| | | // this.OnClickKLinePeriodMenu(this.KLinePeriodIndex, this.KLinePeriodMenu[this.KLinePeriodIndex], |
| | | // 'kline') |
| | | // }, 3000); |
| | | }); |
| | | let that = this; |
| | | window.onresize = _.debounce(this.OnSize, 200); |
| | |
| | | var self = this; |
| | | // 侦听元素的调整大小事件,并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将 |
| | | // 覆盖实例选项 |
| | | erd.listenTo(this.$refs["rightContent"], function(element) { |
| | | erd.listenTo(this.$refs["rightContent"], function (element) { |
| | | var width = element.offsetWidth; |
| | | var height = element.offsetHeight; |
| | | self.tableHeight = height - 10; // 将监听到的宽高进行赋值 |
| | |
| | | }); |
| | | }, |
| | | beforeDestroy() { |
| | | clearInterval(this.timerss); // 在组件销毁前清除定时器 |
| | | this.timerss = null; |
| | | this.clearTime(); |
| | | }, |
| | | methods: { |
| | | // 清除所有定时器 |
| | | clearTime() { |
| | | // 创建一个额外的定时器以获取当前最大定时器 ID |
| | | let lastIntervalId = setInterval(() => {}, 1000); |
| | | // 遍历并清除所有定时器 |
| | | for (let i = 1; i <= lastIntervalId; i++) { |
| | | clearInterval(i); |
| | | clearTimeout(i); |
| | | } |
| | | _timers.forEach(id => { |
| | | clearInterval(id); |
| | | clearTimeout(id); |
| | | }); |
| | | _timers = []; |
| | | }, |
| | | OnSize() { |
| | | var width = this.$refs.right.clientWidth; |
| | |
| | | item, |
| | | type // K线周期 |
| | | ) { |
| | | this.clearTime(); |
| | | this.clearTime() |
| | | //分时额外处理才注释的 |
| | | this.chartType = type; |
| | | this.KLinePeriodIndex = index; |
| | |
| | | callback // 第3方数据替换接口 |
| | | ) { |
| | | EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data); |
| | | |
| | | |
| | | this.getFilter(data, callback); |
| | | this.timerss = setInterval(() => { |
| | | |
| | | let timerId = setInterval(() => { |
| | | this.getFilter(data, callback); |
| | | }, 5000); |
| | | }, 2000); |
| | | _timers.push(timerId); |
| | | }, |
| | | getFilter(data, callback) { |
| | | switch (data.Name) { |
| | |
| | | </script> |
| | | <style lang="less"> |
| | | @animation-duration: 0.3s; |
| | | .parameter{ |
| | | |
| | | .parameter { |
| | | background-color: #333 !important; |
| | | } |
| | | |
| | | .box { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | justify-content: center; |
| | | // flex-direction: column; |
| | | |
| | | > .btn { |
| | | >.btn { |
| | | cursor: pointer; |
| | | width: 100%; |
| | | text-align: center; |