longcai/JiaZhiQianYan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11.26 修改K线图样式

Browse Source
This commit is contained in:
尚政杰
2025-11-26 17:19:38 +08:00
parent 48f49c6cf0
commit 4e64455b9b
4803 changed files with 146408 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
pages/index/stockDetails/stockDetails.vue
View File

@@ -9,11 +9,18 @@
</view>
</view>
<view :class="'contentC fixed '+(type==2?'radius':'')" :style="'top:'+contentTop+'px;'">
<!-- <view v-if="type==1&&tradeData" class="volumeAmountC flex">
<text class="volume">成交量：{{tradeData.volume}}</text>
<text class="amount">成交金额：{{tradeData.amount}}</text>
</view> -->
<view v-if="type==1" style="width:750rpx; height:400rpx">
<l-echart ref="chartRef"></l-echart>
</view>
<view class="section">关联描述</view>
<view class="des">{{relatedDesc}}<text class="ai">（AI合成）【风险提示：解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息，团队辛苦编写，未经许可严禁转载。本产品内容内容均不构成投资建议，请投资者注意风险，独立审慎决策。】</text></view>
<view class="des">{{relatedDesc}}<text class="ai">（AI合成）</text></view>
<view class="riskTips">
【风险提示：解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息，团队辛苦编写，未经许可严禁转载。本产品内容内容均不构成投资建议，请投资者注意风险，独立审慎决策。】
</view>
<view v-if="type==1&&sourceList.length>0" class="section">信息来源</view>
<view class="list">
<view class="item" v-for="(item,index) in sourceList" :key="index">
@@ -46,6 +53,7 @@
stockCode:'', //股票code
categoryList:['分时图','日K线'],
selectCategory:0,
tradeData:null, //成交数据
option:{
title: {
show:false
@@ -84,7 +92,7 @@
axisLine: { onZero: false },
splitLine: { show: false },
min: 'dataMin',
max: 'dataMax'
max: ''
},
yAxis: {
scale: true,
@@ -112,10 +120,10 @@
type: 'candlestick',
data: [],
itemStyle: {
color: '#ec0000',
color0: '#00da3c',
borderColor: '#ec0000',
borderColor0: '#00da3c'
color: '#ffffff',
color0: '#355422',
borderColor: '#c00000',
borderColor0: '#355422'
}
}],
@@ -127,16 +135,16 @@
tooltip: {
position:function (pos, params, dom, rect, size) {
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
var obj = {top: '10%'};
var obj = {top: '5%'};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
return obj;
},
trigger: 'axis',
formatter: function (params) {
console.log(params)
let res = '时间：'+params[0].name+'\n'+'高：'+params[0].data[2]+'\n'+'开：'+params[0].data[3]
+'\n'+'低：'+params[0].data[4]+'\n'+'收：'+params[0].data[1]+'\n'+'涨幅：'+params[0].data[5]+'%'
+'\n'+'低：'+params[0].data[4]+'\n'+'收：'+params[0].data[1]+'\n'+'涨幅：'+params[0].data[5]+'%'
+'\n'+'量：'+params[0].data[6]+'\n'+'金额：'+params[0].data[7]
return res;
},
},
@@ -148,7 +156,10 @@
},
xAxis: {
type:'category',
scale:true
scale:true,
axisLabel: {
customValues:['09:30','10:00','10:30','11:00','11:30','13:00','13:30','14:00','14:30','15:00',]
},
},
yAxis: {
show:false,
@@ -206,6 +217,9 @@
async init() {
// chart 图表实例不能存在data里
const chart = await this.$refs.chartRef.init(echarts);
// chart.on('click',function (params) {
// console.log(params)
// })
if(this.selectCategory==0)
{
//分时图
@@ -242,13 +256,23 @@
{
this.navTitle = res.data.basic_info.stock_name+'('+res.data.basic_info.stock_code+')'
let data = res.data.minute_chart_data
this.tradeData = res.data.latest_trade
let categoryData = []
let valueData = []
let open = data[0].open
for (let item of data) {
categoryData.push(item.time)
let rate = accMul(accDiv(accSub(item.close,open),open).toFixed(4),100)
valueData.push([item.time,item.close,item.high,item.open,item.low,rate])
let volume = item.volume
if (volume>10000) {
volume = (volume/10000).toFixed(0)+'万'
}
let amount = item.amount
if (amount>10000)
{
amount = (amount/10000).toFixed(0)+'万'
}
valueData.push([item.time,item.close,item.high,item.open,item.low,rate,volume,amount])
}
let min = open
let max = 0
@@ -288,7 +312,8 @@
this.option1.yAxis.max = intervalList[intervalList.length-1].toFixed(2)
this.option1.series.data = valueData
let markData = []
let time = res.data.event_info
let time = res.data.event_info.event_start_time.split('T')[1]
time = time.substring(0,5)
for (let item of intervalList) {
markData.push({
xAxis:time,
@@ -416,6 +441,14 @@
right: 0;
bottom: 0;
overflow-y: scroll;
.volumeAmountC {
padding: 20rpx;
font-size: 26rpx;
color: #333;
.volume {
margin-right: 20rpx;
}
}
.section
{
padding: 0 28rpx;
@@ -426,9 +459,7 @@
}
.des
{
padding: 0 0 30rpx;
margin: 0 25rpx;
border-bottom: solid 1rpx #E4E4E4;
line-height: 1.4rem;
font-size: 24rpx;
font-weight: 500;
@@ -438,6 +469,15 @@
color: #C00000;
}
}
.riskTips
{
margin: 20rpx 25rpx 0;
padding-bottom: 30rpx;
line-height: 1.4rem;
font-size: 20rpx;
color: #999;
border-bottom: solid 1rpx #E4E4E4;
}
.list
{
padding: 0 25rpx;