Browse Source

引入疯牛出栏图表

master
no99 4 weeks ago
parent
commit
9644bdecf1
  1. 715
      src/views/AIchat.vue

715
src/views/AIchat.vue

@ -3071,7 +3071,7 @@ function KlineCanvsEcharts(containerId) {
]
}
} else if (klineData.type === 7) {
} else if (klineData.type === 5 || klineData.type === 7) {
console.log('进入第7分类')
const upColor = '#00da3c'
@ -3536,6 +3536,719 @@ function KlineCanvsEcharts(containerId) {
]
}
} else if (klineData.type === 6) {
console.log('进入第6分类')
var bodongliang = splitData(data.WAVEVOL)
function bodongliangData(values, i) {
return values.map((subArray) => subArray[i])
}
function calculateMA(index, data) {
let result = []
if (data.FTLINE) {
data.FTLINE.forEach((item) => {
result.push(item[index])
})
}
return result
}
function vwToPx(vw) {
return (window.innerWidth * vw) / 100
}
const arr1 = []
const arr2 = []
const arr3 = []
const arr4 = []
const changeColorKline = (QSXH, KLine20) => {
if (QSXH) {
QSXH.map((item) => {
KLine20.map((kline_item) => {
if (item[1] == 1 && item[0] == kline_item[0]) {
arr1.push(kline_item)
arr2.push([kline_item[0], null, null, null, null, null, null, null])
arr3.push([kline_item[0], null, null, null, null, null, null, null])
arr4.push([kline_item[0], null, null, null, null, null, null, null])
}
if (item[1] == 2 && item[0] == kline_item[0]) {
arr2.push(kline_item)
arr1.push([kline_item[0], null, null, null, null, null, null, null])
arr3.push([kline_item[0], null, null, null, null, null, null, null])
arr4.push([kline_item[0], null, null, null, null, null, null, null])
}
if (item[1] == 3 && item[0] == kline_item[0]) {
arr3.push(kline_item)
arr2.push([kline_item[0], null, null, null, null, null, null, null])
arr1.push([kline_item[0], null, null, null, null, null, null, null])
arr4.push([kline_item[0], null, null, null, null, null, null, null])
}
if (item[1] == 4 && item[0] == kline_item[0]) {
arr4.push(kline_item)
arr2.push([kline_item[0], null, null, null, null, null, null, null])
arr3.push([kline_item[0], null, null, null, null, null, null, null])
arr1.push([kline_item[0], null, null, null, null, null, null, null])
}
})
})
}
}
changeColorKline(data.QSXH, data.KLine20)
var dealData = splitData(data.KLine20)
var dealData1 = splitData(arr1)
var dealData2 = splitData(arr2)
var dealData3 = splitData(arr3)
var dealData4 = splitData(arr4)
var dealGnBullData = data.JN
const processBarData = (data) => {
const barData = []
const markPointData = []
data.forEach((item) => {
let color
switch (item[4]) {
case 1:
color = '#13E113'
break
case 2:
color = '#FF0E00'
break
case 3:
color = '#0000FE'
break
case 4:
color = '#1397FF'
break
}
barData.push({
value: item[5],
itemStyle: {
normal: {
color: color
}
}
})
if (item[1] === 1) {
markPointData.push({
coord: [item[0], item[5]],
symbol:
'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d5si3v3hr7w2vg0h43z1u.png',
symbolSize: [30, 30],
label: {
normal: {
color: 'rgba(0, 0, 0, 0)'
}
}
})
}
if (item[2] === 1) {
markPointData.push({
coord: [item[0], item[5] / 2],
symbol:
'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d5si016bxdf6vh0377d2h.png',
symbolSize: [30, 30],
label: {
normal: {
color: 'rgba(0, 0, 0, 0)'
}
}
})
}
if (item[3] === 1) {
markPointData.push({
coord: [item[0], 0],
symbol:
'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d5shzls0tmd4vs0e5tdrw.png',
symbolSize: [30, 30],
label: {
normal: {
color: 'rgba(0, 0, 0, 0)'
}
}
})
}
})
return { barData, markPointData }
}
const { barData, markPointData } = processBarData(dealGnBullData)
KlineOption = {
legend: [
{
textStyle: {
color: 'black',
fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8)
},
width: '100%',
// top: ,
left: 'center',
itemGap: window.innerWidth > 768 ? 20 : 10,
itemWidth: 10,
itemHeight: 10,
data: [
{
name: '进攻K线',
itemStyle: {
color: 'rgb(255,0,0)'
}
},
{
name: '防守K线',
itemStyle: {
color: 'red'
}
},
{
name: '推进K线',
itemStyle: {
color: 'orange'
}
},
{
name: '撤退K线',
itemStyle: {
color: 'rgb(84,252,252)'
}
}
]
},
{
textStyle: {
color: 'black',
fontSize: window.innerWidth > 768 ? 15 : vwToPx(2.8)
},
width: '100%',
top: '5%',
left: 'center',
itemGap: window.innerWidth > 768 ? 20 : 10,
itemWidth: 10,
itemHeight: 10,
data: [
{
name: '天线'
},
{
name: '飞线',
itemStyle: {
color: '#fff'
}
},
{
name: '中线'
},
{
name: '流线'
}
]
},
{
textStyle: {
color: 'black',
fontSize: window.innerWidth > 768 ? 15 : vwToPx(2.8)
},
orient: 'horizontal',
top: window.innerWidth > 768 ? '8%' : '8%',
width: '100%',
left: 'center',
itemGap: 15,
data: [
{
name: '龙线'
},
{
name: '虫线'
}
]
}
],
tooltip: {
formatter: function (a, b, d) {
if (a[0].seriesIndex == 0) {
const KlineTag = ref([])
const AIBullTag = ref([])
KlineTag.value = a.find((item) => item.data[1])?.data || []
AIBullTag.value = a.slice(4).find((item) => item.data[1] !== '-')?.data || []
return (
a[0].name +
'<br/>' +
'开盘价' +
':' +
KlineTag.value[1] +
'<br/>' +
'收盘价' +
':' +
KlineTag.value[2] +
'<br/>' +
'最低价' +
':' +
KlineTag.value[3] +
'<br/>' +
'最高价' +
':' +
KlineTag.value[4] +
'<br/>' +
a[4].seriesName +
':' +
a[4].value +
'<br/>' +
a[5].seriesName +
':' +
a[5].value +
'<br/>' +
a[6].seriesName +
':' +
a[6].value +
'<br/>' +
a[7].seriesName +
':' +
a[7].value
)
}
if (a[0].seriesIndex == 4) {
let formattedVolume
if (a[0].data.value >= 10000) {
formattedVolume = (a[0].data.value / 10000).toFixed(2) + 'w'
} else {
formattedVolume = a[0].data.value
}
return a[0].name + '<br/>' + '成交量' + ':' + formattedVolume
}
if (a[0].seriesIndex == 9) {
return (
a[0].name +
'<br/>' +
a[0].marker +
a[0].seriesName +
':' +
a[0].value +
'<br/>' +
a[1].marker +
a[1].seriesName +
':' +
a[1].value +
'<br/>' +
a[2].marker +
a[2].seriesName +
':' +
a[2].value +
'<br/>' +
a[3].marker +
a[3].seriesName +
':' +
a[3].value +
'<br/>' +
a[4].marker +
a[4].seriesName +
':' +
a[4].value +
'<br/>'
)
}
},
trigger: 'axis',
axisPointer: {
type: 'cross'
},
backgroundColor: 'rgba(119, 120, 125, 0.6)',
borderWidth: 1,
borderColor: '#77787D',
padding: 10,
textStyle: {
color: '#fff'
}
},
axisPointer: {
link: [
{
xAxisIndex: 'all'
}
],
label: {
backgroundColor: '#77787D'
}
},
toolbox: {
show: false
},
grid: [
{
left: window.innerWidth > 768 ? '14%' : '15%',
right: window.innerWidth > 768 ? '4%' : '5%',
top: window.innerWidth > 768 ? '10%' : '12%',
height: window.innerWidth > 768 ? '36%' : '34%',
containLabel: false
},
{
left: window.innerWidth > 768 ? '14%' : '15%',
right: window.innerWidth > 768 ? '4%' : '5%',
top: window.innerWidth > 768 ? '50%' : '50%',
height: window.innerWidth > 768 ? '20%' : '22%',
containLabel: false
},
{
left: window.innerWidth > 768 ? '14%' : '15%',
right: window.innerWidth > 768 ? '4%' : '5%',
top: window.innerWidth > 768 ? '74%' : '75%',
height: window.innerWidth > 768 ? '20%' : '20%',
containLabel: false
}
],
xAxis: [
{
type: 'category',
data: dealData.categoryData,
boundaryGap: true,
axisLine: { onZero: false },
splitLine: { show: false },
min: 'dataMin',
max: 'dataMax',
axisPointer: {
z: 100
},
axisLine: {
lineStyle: {
color: 'black'
}
}, //
axisLabel: { show: false },
axisTick: { show: false }
},
{
type: 'category',
gridIndex: 1,
data: dealData.categoryData,
boundaryGap: true,
axisLine: { lineStyle: { color: 'black' } },
axisLabel: {
show: false,
// fontSize: window.innerWidth > 768 ? 10 : 8,
interval: 'auto'
},
axisTick: { show: false }
},
{
type: 'category',
gridIndex: 2,
data: dealData.categoryData,
boundaryGap: true,
axisLine: { lineStyle: { color: 'black' } },
axisLabel: {
show: true,
interval: 'auto'
},
axisTick: { show: false }
}
],
yAxis: [
{
scale: true,
gridIndex: 0,
position: 'left',
axisLabel: {
inside: false,
align: 'right',
fontSize: window.innerWidth > 768 ? 15 : 10
},
axisLine: {
show: true,
lineStyle: {
fontSize: '',
color: 'black'
}
},
axisTick: { show: false },
splitLine: { show: false }
},
{
scale: true,
gridIndex: 1,
splitNumber: 4,
min: 0,
minInterval: 1,
axisLabel: {
show: true,
fontSize: window.innerWidth > 768 ? 15 : 10,
margin: 8,
formatter: (value) => {
if (value >= 1000000000) {
return (value / 1000000000).toFixed(1) + 'B'
} else if (value >= 1000000) {
return (value / 1000000).toFixed(1) + 'M'
} else if (value >= 10000) {
return (value / 10000).toFixed(1) + 'W'
}
return value.toFixed(0)
}
},
axisLine: { show: true, lineStyle: { color: 'black' } },
axisTick: { show: false },
splitLine: { show: true, lineStyle: { type: 'dashed' } },
boundaryGap: ['20%', '20%']
},
{
scale: true,
gridIndex: 2,
splitNumber: 2,
axisLabel: {
show: true,
fontSize: window.innerWidth > 768 ? 15 : 10
},
axisLine: { show: true, lineStyle: { color: 'black' } },
axisTick: { show: false },
splitLine: { show: false }
}
],
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1, 2],
start: 55,
end: 100
},
{
show: true,
xAxisIndex: [0, 1, 2],
type: 'slider',
top: window.innerWidth > 768 ? '95%' : '95%',
left: window.innerWidth > 768 ? '14%' : '14%',
start: 98,
end: 100
}
],
series: [
{
name: '进攻K线',
type: 'candlestick',
barWidth: '50%',
data: dealData1.values,
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
color: 'rgb(255,0,0)',
color0: 'rgb(255,0,0)',
borderColor: 'rgb(255,0,0)',
borderColor0: 'rgb(255,0,0)'
}
},
gridIndex: 0
},
//
{
name: '推进K线',
type: 'candlestick',
barWidth: '50%',
data: dealData2.values,
// markPoint: { data: dealMarkPointData },
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
color: 'rgb(0,0,252)',
color0: 'rgb(0,0,252)',
borderColor: 'rgb(0,0,252)',
borderColor0: 'rgb(0,0,252)'
}
},
gridIndex: 0
},
{
name: '防守K线',
type: 'candlestick',
barWidth: '50%',
data: dealData3.values,
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
color: 'orange',
color0: 'orange',
borderColor: 'orange',
borderColor0: 'orange'
}
},
gridIndex: 0
},
{
name: '撤退K线',
type: 'candlestick',
barWidth: '50%',
data: dealData4.values,
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
color: 'rgb(84,252,252)',
color0: 'rgb(84,252,252)',
borderColor: 'rgb(84,252,252)',
borderColor0: 'rgb(84,252,252)'
}
},
gridIndex: 0
},
{
name: '成交量',
type: 'bar',
barWidth: '70%',
xAxisIndex: 1,
yAxisIndex: 1,
data: barData,
markPoint: {
data: markPointData,
label: {
show: false
}
}
},
{
name: '飞线',
type: 'line',
data: calculateMA(1, data),
smooth: true,
symbol: 'none',
itemStyle: {
normal: {
color: '#00a32e',
lineStyle: {
color: '#00a32e',
width: 2,
type: 'solid'
}
}
}
},
{
name: '中线',
type: 'line',
data: calculateMA(2, data),
smooth: true,
symbol: 'none',
itemStyle: {
normal: {
color: '#de0000',
lineStyle: {
color: '#de0000',
width: 2,
type: 'solid'
}
}
}
},
{
name: '天线',
type: 'line',
data: calculateMA(3, data),
smooth: true,
symbol: 'none',
itemStyle: {
normal: {
color: '#ffb300',
lineStyle: {
color: '#ffb300',
width: 2,
type: 'solid'
}
}
}
},
{
name: '流线',
type: 'line',
data: calculateMA(4, data),
smooth: true,
symbol: 'none',
itemStyle: {
normal: {
color: '#00c8ff',
lineStyle: {
color: '#00c8ff',
width: 2,
type: 'solid'
}
}
}
},
{
name: '买盘',
data: bodongliangData(bodongliang.values, 1),
barWidth: '70%',
xAxisIndex: 2,
yAxisIndex: 2,
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: '#ec0000'
}
}
},
{
name: '卖盘',
data: bodongliangData(bodongliang.values, 0),
barWidth: '70%',
xAxisIndex: 2,
yAxisIndex: 2,
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: '#00ffff'
}
}
},
{
name: 'CJ',
data: bodongliangData(bodongliang.values, 2),
xAxisIndex: 2,
yAxisIndex: 2,
type: 'line',
smooth: !0,
showSymbol: false,
itemStyle: {
normal: {
color: '#000'
}
},
lineStyle: {
width: 2
}
},
{
name: 'CD',
data: bodongliangData(bodongliang.values, 3),
xAxisIndex: 2,
yAxisIndex: 2,
type: 'line',
smooth: !0,
showSymbol: false,
itemStyle: {
normal: {
color: '#ffb300'
}
},
lineStyle: {
width: 2
}
},
{
name: 'CK',
data: bodongliangData(bodongliang.values, 4),
xAxisIndex: 2,
yAxisIndex: 2,
type: 'line',
smooth: !0,
showSymbol: false,
itemStyle: {
normal: {
color: '#ff00ff'
}
},
lineStyle: {
width: 2
}
}
]
// graphic: {
// markPointData : generateGraphicmarkPointData(data11111)
// }
}
} else {
console.log('其他分类')

Loading…
Cancel
Save