10.13 修改时间筛选逻辑，去掉分时图线上圆圈展示，修改K线图颜色
This commit is contained in:
尚政杰
@@ -13,7 +13,7 @@
|
||||
<l-echart ref="chartRef"></l-echart>
|
||||
</view>
|
||||
<view class="section">关联描述</view>
|
||||
<view class="des">{{relatedDesc}}</view>
|
||||
<view class="des">{{relatedDesc}}<text class="ai">（AI合成）</text></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">
|
||||
@@ -32,7 +32,7 @@
|
||||
<script>
|
||||
import { inject } from 'vue';
|
||||
import { stockCandlestickChartData, stockDetails } from '@/request/api';
|
||||
import { getLocalDate } from '@/utils/util.js';
|
||||
import { accDiv, accMul, accSub, getLocalDate } from '@/utils/util.js';
|
||||
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');
|
||||
|
||||
export default {
|
||||
@@ -47,115 +47,135 @@
|
||||
categoryList:['分时图','日K线'],
|
||||
selectCategory:0,
|
||||
option:{
|
||||
title: {
|
||||
show:false
|
||||
},
|
||||
tooltip: {
|
||||
position:function (pos, params, dom, rect, size) {
|
||||
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
|
||||
var obj = {top: '10%'};
|
||||
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
|
||||
|
||||
return obj;
|
||||
title: {
|
||||
show:false
|
||||
},
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: function (params) {
|
||||
console.log(params)
|
||||
let res = '日期：'+params[0].name+'\n'+'开盘价：'+params[0].data[1]+'\n'+'收盘价：'+params[0].data[2]+'\n'+'最低价：'+params[0].data[3]+'\n'+'最高价：'+params[0].data[4]
|
||||
console.log(res)
|
||||
return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果
|
||||
tooltip: {
|
||||
position:function (pos, params, dom, rect, size) {
|
||||
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
|
||||
var obj = {top: '10%'};
|
||||
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
|
||||
|
||||
return obj;
|
||||
},
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: function (params) {
|
||||
console.log(params)
|
||||
let res = '日期：'+params[0].name+'\n'+'开盘价：'+params[0].data[1]+'\n'+'收盘价：'+params[0].data[2]+'\n'+'最低价：'+params[0].data[3]+'\n'+'最高价：'+params[0].data[4]
|
||||
return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
legend: {
|
||||
show:false
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
boundaryGap: false,
|
||||
axisLine: { onZero: false },
|
||||
splitLine: { show: false },
|
||||
min: 'dataMin',
|
||||
max: 'dataMax'
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 50,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
top: '90%',
|
||||
start: 50,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom:"15%"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
boundaryGap: false,
|
||||
axisLine: { onZero: false },
|
||||
splitLine: { show: false },
|
||||
min: 'dataMin',
|
||||
max: 'dataMax'
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 50,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
top: '90%',
|
||||
start: 50,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '日K',
|
||||
type: 'candlestick',
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#ec0000',
|
||||
color0: '#8A0000',
|
||||
borderColor: '#00da3c',
|
||||
borderColor0: '#008F28'
|
||||
},
|
||||
}
|
||||
]
|
||||
color0: '#00da3c',
|
||||
// borderColor: '#8A0000',
|
||||
// borderColor0: '#008F28'
|
||||
}
|
||||
}],
|
||||
|
||||
},
|
||||
option1:{
|
||||
title: {
|
||||
show:false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
position:function (pos, params, dom, rect, size) {
|
||||
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
|
||||
var obj = {top: '10%'};
|
||||
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]+'%'
|
||||
return res;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '12%',
|
||||
top: '10%',
|
||||
left: '12%',
|
||||
right: '14%',
|
||||
bottom: '10%'
|
||||
},
|
||||
xAxis: {
|
||||
type:'category'
|
||||
type:'category',
|
||||
scale:true
|
||||
},
|
||||
yAxis: {
|
||||
scale:true
|
||||
show:false,
|
||||
scale:true,
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside'
|
||||
}
|
||||
],
|
||||
series: {
|
||||
series:{
|
||||
name: '分时图',
|
||||
type: 'line',
|
||||
symbol:'none',
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol:['none','none'],
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#AAA'
|
||||
},
|
||||
data: []
|
||||
silent: true,
|
||||
symbol:['none','none'],
|
||||
lineStyle: {
|
||||
type:'solid',
|
||||
width: 1,
|
||||
color: '#dedede'
|
||||
},
|
||||
z:1
|
||||
},
|
||||
}
|
||||
data: [],
|
||||
},
|
||||
animation:false
|
||||
},
|
||||
relatedDesc:'', //关联描述
|
||||
sourceList:[], //来源列表
|
||||
@@ -224,30 +244,84 @@
|
||||
let data = res.data.minute_chart_data
|
||||
let categoryData = []
|
||||
let valueData = []
|
||||
let open = data[0].open
|
||||
for (let item of data) {
|
||||
categoryData.push(item.time)
|
||||
valueData.push(item.close)
|
||||
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 min = open
|
||||
let max = 0
|
||||
for (let item of valueData) {
|
||||
let value = item[1]
|
||||
if(parseFloat(value)<min)
|
||||
{
|
||||
min = parseFloat(value)
|
||||
}
|
||||
if(parseFloat(value)>max)
|
||||
{
|
||||
max = parseFloat(value)
|
||||
}
|
||||
}
|
||||
let minInterval = (open - min)/3
|
||||
let maxInterval = (max - open)/3
|
||||
let intervalList = []
|
||||
if(minInterval>maxInterval)
|
||||
{
|
||||
for (var i = 3; i > 0; i--) {
|
||||
intervalList.push(open-i*minInterval)
|
||||
}
|
||||
for (var i = 0; i < 4; i++) {
|
||||
intervalList.push(open+i*minInterval)
|
||||
}
|
||||
}else
|
||||
{
|
||||
for (var i = 3; i > 0; i--) {
|
||||
intervalList.push(open-i*maxInterval)
|
||||
}
|
||||
for (var i = 0; i < 4; i++) {
|
||||
intervalList.push(open+i*maxInterval)
|
||||
}
|
||||
}
|
||||
this.option1.xAxis.data = categoryData
|
||||
this.option1.yAxis.min = intervalList[0].toFixed(2)
|
||||
this.option1.yAxis.max = intervalList[intervalList.length-1].toFixed(2)
|
||||
this.option1.series.data = valueData
|
||||
this.option1.series.markLine.data = [{
|
||||
yAxis:data[0].open,
|
||||
label:{
|
||||
show:true,
|
||||
position:'start',
|
||||
// formatter:'111',
|
||||
color:'#333'
|
||||
let markData = []
|
||||
let time = res.data.event_info
|
||||
for (let item of intervalList) {
|
||||
markData.push({
|
||||
xAxis:time,
|
||||
lineStyle:{
|
||||
type:'solid',
|
||||
width: 1,
|
||||
color: '#ffd700'
|
||||
},
|
||||
label:{
|
||||
position:'middle',
|
||||
formatter:'事件发生',
|
||||
color: '#ffd700'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
yAxis:data[0].open,
|
||||
label:{
|
||||
show:true,
|
||||
position:'end',
|
||||
formatter:'0.00%',
|
||||
color:'#333'
|
||||
{
|
||||
yAxis:item,
|
||||
label:{
|
||||
show:true,
|
||||
position:'start',
|
||||
color:'#333'
|
||||
},
|
||||
},
|
||||
}]
|
||||
{
|
||||
yAxis:item,
|
||||
label:{
|
||||
show:true,
|
||||
position:'end',
|
||||
formatter:accMul(accDiv(accSub(item,open),open).toFixed(4),100)+'%',
|
||||
color:'#333'
|
||||
},
|
||||
})
|
||||
}
|
||||
this.option1.series.markLine.data = markData
|
||||
let relatedDesc = res.data.related_desc
|
||||
if(relatedDesc)
|
||||
{
|
||||
@@ -359,6 +433,10 @@
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
.ai
|
||||
{
|
||||
color: #C00000;
|
||||
}
|
||||
}
|
||||
.list
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user