|
@@ -26,9 +26,16 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div class="c-text-c c-text-18" style="color: #39a6fe;font-weight: bold ;">
|
|
|
|
- 月K线图
|
|
|
|
|
|
+ <div style="width: 30%; margin: 0 auto;">
|
|
|
|
+ <van-tabs v-model:active="active" type="card" swipeable @click-tab="onClickTab" color="#39a6fe">
|
|
|
|
+ <van-tab title="日K"></van-tab>
|
|
|
|
+ <van-tab title="月K"></van-tab>
|
|
|
|
+ </van-tabs>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ <!-- <div class="c-text-c c-text-18" style="color: #39a6fe;font-weight: bold ;">
|
|
|
|
+ 月K线图
|
|
|
|
+ </div> -->
|
|
<!-- ECharts -->
|
|
<!-- ECharts -->
|
|
<!-- <div v-if="!noData(salesVolume, salesNumber)"> -->
|
|
<!-- <div v-if="!noData(salesVolume, salesNumber)"> -->
|
|
<div v-if="!noData(stockPrice)">
|
|
<div v-if="!noData(stockPrice)">
|
|
@@ -115,6 +122,7 @@ import sHeader from "@/components/SimpleHeader";
|
|
import { getLoginUser, styleUrl } from "@/common/js/utils";
|
|
import { getLoginUser, styleUrl } from "@/common/js/utils";
|
|
import {
|
|
import {
|
|
getListStockInfoForMonth,
|
|
getListStockInfoForMonth,
|
|
|
|
+ getListStockInfoForDay,
|
|
// Api_getNotice,
|
|
// Api_getNotice,
|
|
getPageNotice,
|
|
getPageNotice,
|
|
// Api_getUpdateNotice,
|
|
// Api_getUpdateNotice,
|
|
@@ -193,8 +201,120 @@ watermarkVal.value = user.phone + "\n" + formattedDate;
|
|
const chartBox = ref();
|
|
const chartBox = ref();
|
|
let chartObj = null;
|
|
let chartObj = null;
|
|
|
|
|
|
|
|
+const showDay = ref(true);
|
|
|
|
+
|
|
|
|
+const onClickTab = ({ title }) => {
|
|
|
|
+ if (title === '日K') {
|
|
|
|
+ showDay.value = true
|
|
|
|
+ getListStockInfoForDayFunc()
|
|
|
|
+ } else {
|
|
|
|
+ showDay.value = false
|
|
|
|
+ getListStockInfoForMonthFun()
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const getListStockInfoFunc = () => {
|
|
|
|
+ if (showDay.value) {
|
|
|
|
+ getListStockInfoForDayFunc()
|
|
|
|
+ } else {
|
|
|
|
+ getListStockInfoForMonthFun()
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
const stockPrice = ref(0);
|
|
const stockPrice = ref(0);
|
|
-// 查询图表
|
|
|
|
|
|
+
|
|
|
|
+// 查询图表-日K
|
|
|
|
+const getListStockInfoForDayFunc = async () => {
|
|
|
|
+ const { data } = await getListStockInfoForDay();
|
|
|
|
+ if (data.code === '00000' && data.data) {
|
|
|
|
+ stockPrice.value = 0;
|
|
|
|
+ data.data.series[0].data.forEach((item) => {
|
|
|
|
+ stockPrice.value = parseInt(stockPrice.value + item);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // 解决eacharts与v-if的渲染问题
|
|
|
|
+ await nextTick();
|
|
|
|
+ if (chartBox.value) {
|
|
|
|
+ chartObj = window.echarts.init(chartBox.value, null, {
|
|
|
|
+ renderer: "canvas",
|
|
|
|
+ useDirtyRect: false,
|
|
|
|
+ });
|
|
|
|
+ const option = {
|
|
|
|
+ tooltip: { // 提示框
|
|
|
|
+ trigger: "axis",
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: "shadow",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ legend: { // 图例
|
|
|
|
+ bottom: 0,
|
|
|
|
+ right: 10,
|
|
|
|
+ itemWidth: 10,
|
|
|
|
+ itemHeight: 10,
|
|
|
|
+ icon: "roundRect",
|
|
|
|
+ orient: 'vertical', // 图例列表布局,vertical 垂直,horizontal 水平,当前只有一个无所谓
|
|
|
|
+ top: 5,
|
|
|
|
+ },
|
|
|
|
+ grid: { // 网格
|
|
|
|
+ top: "12%",
|
|
|
|
+ left: "3%",
|
|
|
|
+ right: "5%",
|
|
|
|
+ bottom: "7%",
|
|
|
|
+ containLabel: true, // 刻度标签
|
|
|
|
+ },
|
|
|
|
+ // 固定屏幕显示多少个,其余的滑动
|
|
|
|
+ dataZoom: [
|
|
|
|
+ {
|
|
|
|
+ type: "inside",
|
|
|
|
+ xAxisIndex: 0,
|
|
|
|
+ filterMode: "none",
|
|
|
|
+ startValue: null,
|
|
|
|
+ endValue: null,
|
|
|
|
+ zoomLock: true, // 锁定选择区域,只能平移,不能缩放。
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: "category",
|
|
|
|
+ axisLabel: {
|
|
|
|
+ rotate: 15, // 旋转角度
|
|
|
|
+ },
|
|
|
|
+ data: data.data.categories,
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: "value",
|
|
|
|
+ // min: 20,
|
|
|
|
+ // max: 120,
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ ...data.data.series[0],
|
|
|
|
+ type: "line", // line折线图,bar柱状图
|
|
|
|
+ // smooth: true, // 针对折线图,平滑曲线
|
|
|
|
+ itemStyle: { color: "#ff5d88" },
|
|
|
|
+ colorBy: 'series',
|
|
|
|
+ name: "股价¥",
|
|
|
|
+ label: {
|
|
|
|
+ show: true,
|
|
|
|
+ position: "top",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ option.dataZoom[0]["startValue"] =
|
|
|
|
+ data.data.categories[data.data.categories.length - 5];
|
|
|
|
+ option.dataZoom[0]["endValue"] =
|
|
|
|
+ data.data.categories[data.data.categories.length - 1];
|
|
|
|
+ chartObj && chartObj.setOption(option);
|
|
|
|
+ // 图形宽度随屏幕宽度改变而改变
|
|
|
|
+ window.onresize = chartObj.resize;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+// 查询图表-月K
|
|
const getListStockInfoForMonthFun = async () => {
|
|
const getListStockInfoForMonthFun = async () => {
|
|
const { data } = await getListStockInfoForMonth();
|
|
const { data } = await getListStockInfoForMonth();
|
|
if (data.code === '00000' && data.data) {
|
|
if (data.code === '00000' && data.data) {
|
|
@@ -247,14 +367,14 @@ const getListStockInfoForMonthFun = async () => {
|
|
xAxis: {
|
|
xAxis: {
|
|
type: "category",
|
|
type: "category",
|
|
axisLabel: {
|
|
axisLabel: {
|
|
- // rotate: 45, // 旋转角度
|
|
|
|
|
|
+ rotate: 15, // 旋转角度
|
|
},
|
|
},
|
|
data: data.data.categories,
|
|
data: data.data.categories,
|
|
},
|
|
},
|
|
yAxis: {
|
|
yAxis: {
|
|
type: "value",
|
|
type: "value",
|
|
// min: 20,
|
|
// min: 20,
|
|
- max: 120,
|
|
|
|
|
|
+ // max: 120,
|
|
},
|
|
},
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
@@ -262,7 +382,7 @@ const getListStockInfoForMonthFun = async () => {
|
|
type: "line", // line折线图,bar柱状图
|
|
type: "line", // line折线图,bar柱状图
|
|
// smooth: true, // 针对折线图,平滑曲线
|
|
// smooth: true, // 针对折线图,平滑曲线
|
|
itemStyle: { color: "#ff5d88" },
|
|
itemStyle: { color: "#ff5d88" },
|
|
- colorBy: 'series' ,
|
|
|
|
|
|
+ colorBy: 'series',
|
|
name: "股价¥",
|
|
name: "股价¥",
|
|
label: {
|
|
label: {
|
|
show: true,
|
|
show: true,
|
|
@@ -293,13 +413,19 @@ onMounted(async () => {
|
|
// }
|
|
// }
|
|
firstLogin.value = localStorage.getItem('firstLogin');
|
|
firstLogin.value = localStorage.getItem('firstLogin');
|
|
|
|
|
|
|
|
+ // 获取日/周曲线
|
|
|
|
+ // getListStockInfoForDayFunc();
|
|
// 获取月度曲线
|
|
// 获取月度曲线
|
|
- getListStockInfoForMonthFun();
|
|
|
|
|
|
+ // getListStockInfoForMonthFun();
|
|
|
|
+ // 获取股票曲线
|
|
|
|
+ getListStockInfoFunc();
|
|
|
|
+
|
|
// 获取首页公告
|
|
// 获取首页公告
|
|
getNotice();
|
|
getNotice();
|
|
|
|
|
|
getTop5Func();
|
|
getTop5Func();
|
|
|
|
|
|
|
|
+
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|