| | |
| | | <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"> |
| | | <div class="periodWrap kline_periodWrap" ref="kline_periodWrap"> |
| | |
| | | > |
| | | <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" |
| | |
| | | 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; |
| | | }; // 一直交易 |
| | |
| | | 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 }, |
| | |
| | | MinuteDayMenu: DefaultData.GetMinuteDayMenu(), |
| | | MinuteDayIndex: 0, |
| | | KLinePeriodMenu: DefaultData.GetKLinePeriodMenu(), |
| | | KLinePeriodIndex: 1, |
| | | KLinePeriodIndex: 0, |
| | | KLineRightMenu: DefaultData.GetKLineRightMenu(), |
| | | KLineRightIndex: 0, |
| | | IsShowRightMenu: true, |
| | |
| | | VolChartHeight: 10, |
| | | chartType: "kline", |
| | | isShow: false, |
| | | xData: [], |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | this.OnSize(); |
| | | this.SetChartStyle(); |
| | | this.$nextTick(() => { |
| | | this.CreateMinuteChart(); |
| | | // this.CreateMinuteChart(); |
| | | this.CreateKLineChart(); |
| | | }); |
| | | let that = this; |
| | |
| | | item, |
| | | type // K线周期 |
| | | ) { |
| | | // if (index !== 0) { //分时额外处理才注释的 |
| | | //分时额外处理才注释的 |
| | | this.chartType = type; |
| | | this.KLinePeriodIndex = index; |
| | | this.KLineChart.ChangePeriod(item.ID); |
| | | // } |
| | | }, |
| | | |
| | | OnClickKLineRightMenu( |