| | |
| | | <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"; |
| | |
| | | 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 |
| | |
| | | |
| | | 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); |
| | |
| | | }); |
| | | }, |
| | | 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; |
| | |
| | | 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{ |
| | | background-color: #333 !important; |
| | | } |
| | | |
| | | .box { |
| | | width: 100%; |
| | | height: 100%; |