<template>
|
<div class="home_ltr">
|
<div class="meta_box">
|
<div>
|
<div
|
class="code"
|
:class="{ lc_c: obj.hcrate > 0, r_c: obj.hcrate < 0 }"
|
>
|
{{ obj.spell }}
|
</div>
|
<div class="name">{{ obj.name }}</div>
|
</div>
|
|
<div class="price" :class="{ lc_c: obj.hcrate > 0, r_c: obj.hcrate < 0 }">
|
{{ obj.nowPrice }}
|
<span class="change">
|
{{ (obj.nowPrice - obj.preclose_px).toFixed(2) }}
|
({{ obj.hcrate ? obj.hcrate : "0" }}%)
|
</span>
|
</div>
|
|
<div class="attr_item">
|
<div class="label">{{ $t("hj72") }}</div>
|
<div class="value">{{ obj.open_px }}</div>
|
</div>
|
|
<div class="attr_item">
|
<div class="label">{{ $t("hj73") }}</div>
|
<div class="value">{{ obj.today_max }}</div>
|
</div>
|
|
<div class="attr_item">
|
<div class="label">{{ $t("hj74") }}</div>
|
<div class="value">{{ obj.preclose_px }}</div>
|
</div>
|
|
<div class="attr_item">
|
<div class="label">{{ $t("hj75") }}</div>
|
<div class="value">{{ obj.today_min }}</div>
|
</div>
|
</div>
|
|
<div class="tabs_box">
|
<el-tabs @tab-click="handleClick">
|
<el-tab-pane
|
:label="item.Name"
|
:Id="item.ID"
|
v-for="item in KLinePeriodMenu"
|
:key="item.ID"
|
></el-tab-pane>
|
</el-tabs>
|
</div>
|
|
<div ref="rightContent" class="map_box">
|
<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>
|
</template>
|
|
<script>
|
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 "@/lang/index.js";
|
import _ from "lodash";
|
|
HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) {
|
return 2;
|
}; // 一直交易
|
function DefaultData() {}
|
|
DefaultData.GetMinuteOption = function () {
|
var option = {
|
Type: "分钟走势图", // 创建图形类型
|
// Type:'分钟走势图横屏',
|
Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
|
// 窗口指标
|
Windows: [
|
// { Index:"KDJ", Modify: false, Change: true, Close: true},
|
// { Index: "KDJ", Modify: false, Change: false, Close: false }
|
],
|
SplashTitle: "loading...",
|
Symbol: "AAPL.usa",
|
IsAutoUpdate: true, // 是自动更新数据
|
AutoUpdateFrequency: 1000,
|
DayCount: 1, // 1 最新交易日数据 >1 多日走势图
|
IsShowRightMenu: false, // 是否显示右键菜单
|
CorssCursorTouchEnd: true,
|
|
CorssCursorInfo: {
|
Left: 1,
|
Right: 1,
|
},
|
|
MinuteLine: {
|
IsDrawAreaPrice: true, // 是否画价格面积图
|
IsShowAveragePrice: true, // 不显示均线
|
},
|
|
// 边框
|
Border: {
|
Left: 1, // 左边间距
|
Right: 1, // 右边间距
|
Top: 0,
|
Bottom: 1,
|
AutoRight: {
|
Blank: 10,
|
MinWidth: 40,
|
},
|
AutoLeft: {
|
Blank: 10,
|
MinWidth: 40,
|
},
|
},
|
|
// 子框架设置
|
// Height 是否显示成交量 柱状图 0 false
|
Frame: [
|
{
|
SplitCount: 5,
|
},
|
{
|
SplitCount: 3,
|
Height: 0,
|
},
|
],
|
|
// 扩展图形
|
ExtendChart: [
|
// {Name:'MinuteTooltip' } //手机端tooltip
|
],
|
};
|
|
return option;
|
};
|
|
DefaultData.GetKLineOption = function () {
|
var option = {
|
Type: "历史K线图", // 创建图形类型
|
Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
|
// 窗口指标
|
Windows: [
|
{
|
Index: "MA",
|
Modify: true,
|
Change: false,
|
height: 20,
|
},
|
// { Index: 'MA', Modify: true, Modify: false, Change: false, height: 20 },
|
{
|
Index: "ATR",
|
Modify: false,
|
Change: false,
|
Close: false,
|
},
|
// { Index: 'MACD', Modify: true, Change: true, Close: false }
|
],
|
SplashTitle: "loading...",
|
// Symbol: "600015.sh",
|
IsAutoUpdate: false, // 是自动更新数据
|
AutoUpdateFrequency: 2000,
|
IsApiPeriod: true,
|
IsShowRightMenu: false, // 是否显示右键菜单
|
CorssCursorTouchEnd: true,
|
|
KLine: {
|
DragMode: 1, // 拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
|
Right: 0, // 复权 0 不复权 1 前复权 2 后复权
|
Period: 0, // 周期 0 日线 1 周线 2 月线 3 年线
|
MaxReqeustDataCount: 1000, // 数据个数
|
PageSize: 60, // 一屏显示多少数据
|
KLineDoubleClick: false, // 双击分钟走势图
|
IsShowTooltip: true, // 是否显示K线提示信息
|
DrawType: 0,
|
RightSpaceCount: 2,
|
},
|
|
CorssCursorInfo: {
|
Left: 0,
|
Right: 1,
|
},
|
|
// 标题设置
|
KLineTitle: {
|
IsShowName: false, // 不显示股票名称
|
IsShowSettingInfo: false, // 不显示周期/复权
|
isShowDateTime: true,
|
},
|
|
// 边框
|
Border: {
|
Left: 1, // 左边间距
|
Right: 1, // 右边间距
|
Top: 0,
|
Bottom: 15,
|
AutoRight: {
|
Blank: 10,
|
MinWidth: 40,
|
},
|
},
|
|
// 子框架设置
|
Frame: [
|
{
|
SplitCount: 5,
|
IsShowLeftText: false,
|
IsShowYLine: false,
|
Custom: [
|
{
|
Type: 0,
|
Position: "right",
|
},
|
],
|
},
|
{
|
SplitCount: 3,
|
IsShowLeftText: false,
|
},
|
{
|
SplitCount: 3,
|
IsShowLeftText: false,
|
},
|
],
|
|
// 扩展图形
|
ExtendChart: [
|
// { Name:'KLineTooltip' }, //手机端tooltip
|
],
|
};
|
|
return option;
|
};
|
|
DefaultData.GetKLinePeriodMenu = function () {
|
var data = [
|
{
|
Name: i18n.t("hj87"),
|
ID: 0,
|
},
|
{
|
Name: i18n.t("hj88"),
|
ID: 1,
|
},
|
{
|
Name: i18n.t("hj89"),
|
ID: 2,
|
},
|
{
|
Name: i18n.t("hj90"),
|
ID: 4,
|
},
|
{
|
Name: i18n.t("hj91"),
|
ID: 5,
|
},
|
{
|
Name: i18n.t("hj92"),
|
ID: 7,
|
},
|
];
|
|
return data;
|
};
|
|
export default {
|
name: "HomeLtr",
|
props: {
|
obj: {
|
type: Object,
|
default: () => {},
|
},
|
},
|
data() {
|
return {
|
active: 0,
|
MinuteDayIndex: 0,
|
KLinePeriodMenu: DefaultData.GetKLinePeriodMenu(),
|
KLinePeriodIndex: 0,
|
KLineRightIndex: 0,
|
IsShowRightMenu: true,
|
chartType: "kline",
|
KLineChart: null, // 图形控件 K线图
|
Chart: null, // 图形控件 分时图
|
timerss: null,
|
isShow: false,
|
};
|
},
|
watch: {
|
obj: {
|
handler(newVal, oldVal) {
|
if (newVal.id && newVal.id != oldVal.id) {
|
this.KLineChart.ChangeSymbol(newVal.code + ".sz");
|
}
|
},
|
deep: true,
|
},
|
},
|
mounted() {
|
this.init();
|
},
|
beforeDestroy() {
|
this.KLineChart.ChartDestory();
|
this.Chart.ChartDestory();
|
if (this.timerss) {
|
clearInterval(this.timerss);
|
}
|
},
|
methods: {
|
init() {
|
this.OnSize();
|
this.SetChartStyle();
|
|
this.$nextTick(() => {
|
// this.CreateMinuteChart();
|
this.CreateKLineChart();
|
|
this.timerss = setInterval(() => {
|
if (this.KLineChart) {
|
this.KLineChart.ChangeSymbol(this.obj.code);
|
}
|
}, 30000);
|
});
|
let that = this;
|
window.onresize = _.debounce(this.OnSize, 200);
|
// 自适应K线图
|
var elementResizeDetectorMaker = require("element-resize-detector");
|
|
// 创建实例，无参数
|
var erd = elementResizeDetectorMaker(); // 使用默认选项（将使用基于对象的方法）。
|
|
// 创建实例带参数
|
// 使用基于超快速滚动的方法。
|
// 这是推荐的策略。
|
elementResizeDetectorMaker({
|
// var erdUltraFast = elementResizeDetectorMaker({
|
strategy: "scroll",
|
callOnAdd: true, // callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
|
// 如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
|
// 被调用（不会阻止其被调用）
|
debug: true,
|
});
|
// 监听class为staticNextMain的元素 大小变化
|
var self = this;
|
// 侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
|
// 覆盖实例选项
|
erd.listenTo(this.$refs["rightContent"], function (element) {
|
var width = element.offsetWidth;
|
var height = element.offsetHeight;
|
self.tableHeight = height - 10; // 将监听到的宽高进行赋值
|
self.tableWidth = width - 20;
|
that.offHeight = height;
|
that.OnSize();
|
});
|
},
|
OnSize() {
|
var width = this.$refs.rightContent.clientWidth;
|
|
var kline = this.$refs.kline;
|
kline.style.width = width + "px";
|
var kline2 = this.$refs.kline2;
|
kline2.style.width = width + "px";
|
|
if (this.Chart) this.Chart.OnSize();
|
if (this.KLineChart) this.KLineChart.OnSize();
|
},
|
SetChartStyle() {
|
EastMoney.HQData.SetMinuteChartCoordinate();
|
var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(
|
HQChart.Chart.STYLE_TYPE_ID.WHITE_ID
|
); // 读取黑色风格配置
|
|
blackStyle.UpBarColor = "#449b54"; //上涨
|
blackStyle.DownBarColor = "#e13b45";
|
HQChart.Chart.JSChart.SetStyle(blackStyle);
|
},
|
handleClick(tab) {
|
this.KLineChart.ChangePeriod(tab.$attrs.Id);
|
},
|
|
CreateMinuteChart() {
|
var option = DefaultData.GetMinuteOption();
|
option.NetworkFilter = (data, callback) => {
|
// console.log("CreateMinuteChart", data, callback);
|
this.NetworkFilter(data, callback);
|
}; // 网络请求回调函数
|
|
var chart = HQChart.Chart.JSChart.Init(this.$refs.kline);
|
chart.SetOption(option);
|
this.Chart = chart;
|
},
|
|
CreateKLineChart() {
|
var option = DefaultData.GetKLineOption();
|
var chart = HQChart.Chart.JSChart.Init(this.$refs.kline2);
|
HQChart.Chart.JSChart.GetResource().FrameLogo.Text = null;
|
|
option.NetworkFilter = (data, callback) => {
|
this.NetworkFilter(data, callback);
|
}; // 网络请求回调函数
|
|
chart.SetOption(option);
|
|
this.KLineChart = chart;
|
},
|
|
NetworkFilter(
|
data,
|
callback // 第3方数据替换接口
|
) {
|
// if (this.timerss) {
|
// clearInterval(this.timerss);
|
// this.timerss = null;
|
// }
|
this.timeChange(data, callback);
|
// this.timerss = setInterval(() => {
|
// // this.KLineChart.ChangeSymbol(this.obj.code);
|
// this.timeChange(data, callback);
|
// }, 3000);
|
},
|
timeChange(data, callback) {
|
EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data);
|
console.log("NetworkFilter", data.Name);
|
|
switch (data.Name) {
|
// 分时图数据对接
|
case "MinuteChartContainer::RequestMinuteData":
|
EastMoney.HQData.NetworkFilter(data, callback);
|
break;
|
case "MinuteChartContainer::RequestHistoryMinuteData":
|
EastMoney.HQData.NetworkFilter(data, callback);
|
break;
|
|
case "KLineChartContainer::RequestHistoryData": // 日线全量数据下载
|
EastMoney.HQData.NetworkFilter(data, callback);
|
break;
|
case "KLineChartContainer::RequestRealtimeData": // 日线实时数据更新
|
EastMoney.HQData.NetworkFilter(data, callback);
|
break;
|
case "KLineChartContainer::RequestFlowCapitalData": // 流通股本
|
EastMoney.HQData.NetworkFilter(data, callback);
|
break;
|
case "KLineChartContainer::ReqeustHistoryMinuteData": // 分钟全量数据下载
|
EastMoney.HQData.NetworkFilter(data, callback);
|
break;
|
case "KLineChartContainer::RequestMinuteRealtimeData": // 分钟增量数据更新
|
EastMoney.HQData.NetworkFilter(data, callback);
|
break;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.home_ltr {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
|
.map_box {
|
flex: 1;
|
height: 0;
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
|
#hqchart_minute {
|
height: 0;
|
flex: 1;
|
background-color: #fff;
|
position: relative;
|
}
|
|
#hqchart_kline {
|
height: 0;
|
flex: 1;
|
background-color: #fff;
|
position: relative;
|
}
|
}
|
|
.tabs_box {
|
padding: 0 10px;
|
}
|
|
.meta_box {
|
display: flex;
|
gap: 16px;
|
align-items: center;
|
padding: 10px 16px 6px;
|
.attr_item {
|
font-size: 14px;
|
display: flex;
|
flex-direction: column;
|
text-align: right;
|
margin-left: 10px;
|
.label {
|
color: #999;
|
}
|
.value {
|
color: #333;
|
}
|
}
|
.price {
|
display: flex;
|
align-items: center;
|
font-size: 20px;
|
flex: 1;
|
margin-right: auto;
|
font-weight: 700;
|
|
.change {
|
font-size: 14px;
|
white-space: nowrap;
|
margin-left: 10px;
|
}
|
}
|
.name {
|
font-size: 12px;
|
color: #999;
|
}
|
.code {
|
font-size: 20px;
|
}
|
}
|
}
|
</style>
|
