| | |
| | | <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> |
| | |
| | | // { Index:"KDJ", Modify: false, Change: true, Close: true}, |
| | | // { Index: "KDJ", Modify: false, Change: false, Close: false } |
| | | ], |
| | | SplashTitle: 'loading...', |
| | | SplashTitle: "loading...", |
| | | Symbol: "AAPL.usa", |
| | | IsAutoUpdate: true, // 是自动更新数据 |
| | | AutoUpdateFrequency: 20000, |
| | |
| | | } |
| | | // { Index: 'MACD', Modify: true, Change: true, Close: false } |
| | | ], |
| | | SplashTitle: 'loading...', |
| | | SplashTitle: "loading...", |
| | | Symbol: "600015.sh", |
| | | IsAutoUpdate: true, // 是自动更新数据 |
| | | AutoUpdateFrequency: 15000, |
| | |
| | | SetChartStyle() { |
| | | EastMoney.HQData.SetMinuteChartCoordinate(); |
| | | var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig( |
| | | HQChart.Chart.STYLE_TYPE_ID.WHITE_ID |
| | | ); // 读取黑色风格配置 |
| | | // HQChart.Chart.STYLE_TYPE_ID.WHITE_ID // 白色风格 |
| | | HQChart.Chart.STYLE_TYPE_ID.BLACK_ID // 黑色风格 |
| | | ); |
| | | |
| | | blackStyle.UpBarColor = "#449b54"; //上涨 |
| | | blackStyle.DownBarColor = "#e13b45"; |
| | |
| | | |
| | | option.NetworkFilter = (data, callback) => { |
| | | this.NetworkFilter(data, callback); |
| | | |
| | | // this.NetworkFilter(data, callback); |
| | | }; // 网络请求回调函数 |
| | | var chart = HQChart.Chart.JSChart.Init(this.$refs.kline2); |
| | | HQChart.Chart.JSChart.GetResource().FrameLogo.Text = null; |
| | |
| | | clearInterval(this.timerss); |
| | | this.timerss = null; |
| | | } |
| | | this.getFilter(data, callback); |
| | | this.timerss = setInterval(() => { |
| | | this.getFilter(data, callback); |
| | | }, 5000); |
| | | }, |
| | | getFilter(data, callback) { |
| | | switch (data.Name) { |
| | | // 分时图数据对接 |
| | | case "MinuteChartContainer::RequestMinuteData": |
| | |
| | | EastMoney.HQData.NetworkFilter(data, callback); |
| | | break; |
| | | } |
| | | }, 5000); |
| | | }, |
| | | |
| | | handleSelect(key, keyPath) { |
| | | console.log(key, keyPath); |
| | | this.ChangeSymbol(keyPath[1]); |
| | |
| | | |
| | | .btnGroup { |
| | | // border: 1px solid #242424; |
| | | color: #000; |
| | | color: #fff; |
| | | display: flex; |
| | | background: #fff; |
| | | // background: #fff; |
| | | |
| | | .btn { |
| | | margin: 0 0.1rem; |
| | |
| | | .active { |
| | | color: #c4d600; |
| | | font-weight: 800; |
| | | background: rgb(245, 245, 245); |
| | | background: #444; |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | #hqchart_minute { |
| | | // height: 100%; |
| | | background-color: #fff; |
| | | background-color: #000; |
| | | height: 5rem; |
| | | position: relative; |
| | | } |
| | | |
| | | #hqchart_kline { |
| | | // height: 100% !important; |
| | | background-color: #fff; |
| | | background-color: #000; |
| | | height: 5rem; |
| | | position: relative; |
| | | } |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | background: #fff !important; |
| | | // background: #fff !important; |
| | | } |
| | | |
| | | .btnGroup { |