echart基于日K数据实现周K、月K
使用技术栈：vue+echart
前言
echart原生案例中，只有日k数据与平均线之间的转换，而没有日k、周k、月k之间k线图的转换，这里我将根据日k数据重新封装，转换成周k数据
一、周k、月k是什么？
周k指的是周一的开盘价、周五的收盘价、一周的最高价、一周的最低价，以及一周的成交量、周五的成交时间等，月k以此类推，本案例只对数据进行大致处理，不分大小月，一周统一按5天算，一月统一按20天算。
二、代码实现
1.引入echrt
import echarts from 'echarts/lib/echarts';
2.data中定义数据结构
optionOne:{
animation: false,
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
title: {
left: 'center',
text: 'K线图'
},
legend: {
top: 30,
data: ['日K']
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
},
axisPointer: {
type: 'cross'
},
formatter: function (params) {
params = params[0];
let currentItemData = params.data;
return params.name + '<br>' +
'开盘:' + currentItemData[1] + '<br>' +
'收盘:' + currentItemData[2] + '<br>' +
'最低:' + currentItemData[3] + '<br>' +
'最高:' + currentItemData[4] + '<br>'
}
},
axisPointer: {
link: [{
xAxisIndex: [0, 1]
}]
},
dataZoom: [{
type: 'slider',
xAxisIndex: [0, 1],
realtime: false,
start: 20,
end: 70,
top: 65,
height: 20,
handleIcon: 'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '120%'
}, {
type: 'inside',
xAxisIndex: [0, 1],
start: 40,
end: 70,
top: 30,
height: 20
}],
xAxis: [{
type: 'category',
data: [],
boundaryGap : false,
axisLine: { lineStyle: { color: '#777' } },
axisLabel: {
formatter: function (value) {
return echarts.format.formatTime('yyyy-MM-dd', value);
}
},
min: 'dataMin',
max: 'dataMax',
axisPointer: {
show: true
}
}, {
type: 'category',
gridIndex: 1,
data: [],
scale: true,
boundaryGap : false,
splitLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
axisLine: { lineStyle: { color: '#777' } },
splitNumber: 20,
min: 'dataMin',
max: 'dataMax',
axisPointer: {
type: 'shadow',
label: {show: false},
triggerTooltip: true,
handle: {
show: true,
margin: 30,
color: '#B80C00'
}
}
}],
yAxis: [{
scale: true,
splitNumber: 2,
axisLine: { lineStyle: { color: '#777' } },
splitLine: { show: true },
axisTick: { show: false },
axisLabel: {
inside: true,
formatter: '{value}\n'
}
}, {
scale: true,
gridIndex: 1,
splitNumber: 2,
axisLabel: {show: false},
axisLine: {show: false},
axisTick: {show: false},
splitLine: {show: false}
}],
grid: [{
left: 20,
right: 20,
top: 110,
height: 120
}, {
left: 20,
right: 20,
height: 40,
top: 260
}],
graphic: [{
type: 'group',
left: 'center',
top: 70,
width: 300,
bounding: 'raw',
children: [{
id: 'MA5',
type: 'text',
style: {fill: '#2f4554', font: 'bold 12px Sans-serif'},
left: 0
}, {
id: 'MA10',
type: 'text',
style: {fill: '#61a0a8', font: 'bold 12px Sans-serif'},
left: 'center'
}, {
id: 'MA20',
type: 'text',
style: {fill: '#d48265', font: 'bold 12px Sans-serif'},
right: 0
}]
}],
series: [{
name: 'Volume',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: '#7fbe9e'
},
emphasis: {
itemStyle: {
color: '#140'
}
},
data: []
}, {
type: 'candlestick',
name: '日K',
data: [],
itemStyle: {
color: '#ef232a',
color0: '#14b143',
borderColor: '#ef232a',
borderColor0: '#14b143'
},
emphasis: {
itemStyle: {
color: 'black',
color0: '#444',
borderColor: 'black',
borderColor0: '#444'
}
}
}]
}
3.template中定义按钮
<el-button type="primary" @click="calculateMA(1)">日K</el-button>
<el-button type="primary" @click="calculateMA(5)">周K</el-button>
<el-button type="primary" @click="calculateMA(20)">月K</el-button>
4.script中书写方法
（1）日k案例数据结构如下
let data =
[[17512.58,17633.11,17434.27,17642.81,86160000],
[17652.36,17716.66,17652.36,17790.11,79330000],
[17716.05,17685.09,17669.72,17755.7,102600000],
[17661.74,17792.75,17568.02,17811.48,104890000],
[17799.39,17737,17710.67,17806.38,85230000],
[17718.03,17603.32,17579.56,17718.03,115230000],
[17605.45,17716.05,17542.54,17723.55,99410000],
[17687.28,17541.96,17484.23,17687.28,90120000],
[17555.39,17576.96,17528.16,17694.51,79990000],
[17586.48,17556.41,17555.9,17731.63,107100000],
[17571.34,17721.25,17553.57,17744.43,81020000],
[17741.66,17908.28,17741.66,17918.35,91710000]]
let dates =
["2016-03-29", "2016-03-30", "2016-03-31", "2016-04-01", "2016-04-04", "2016-04-05", "2016-04-06", "2016-04-07", "2016-04-08", "2016-04-11", "2016-04-12", "2016-04-13"]
let volumes =
[86160000,79330000,102600000,104890000,85230000,115230000,99410000,90120000,79990000,107100000,107100000,81020000]
（2）主要方法
calculateMA(dayCount) {
if(dayCount == 1){
this.optionOne.legend.data[0] = '日K'
this.optionOne.series[1].name = '日K'
}
if(dayCount == 5){
this.optionOne.legend.data[0] = '周K'
this.optionOne.series[1].name = '周K'
}
if(dayCount == 20){
this.optionOne.legend.data[0] = '月K'
this.optionOne.series[1].name = '月K'
}
let myChart = echarts.init(document.getElementById('chartLineBox'));
let result = [];
let klineDate = []
let volumes = []
let hightList = []
let lowList = []
let kData = []
for(let i = 0;i < data.length;i++){
if(i % dayCount == dayCount - 1 ){
kData[0] = data[i][0]
let kvolumn = volumes.slice(i,i + dayCount + 1).reduce((pre,next) => {return pre+next}
hightList = data.slice(i,i + dayCount + 1).map(item => item[2] )
klineDate.push(dates[i])
lowList = data.slice(i,i + dayCount + 1).map(item => item[3])
kData[2] = Math.max(...hightList)
kData[3] = Math.min(...lowList)
kData[4] = kvolumn
volumes.push(kvolumn)
result.push(kData);
kData = []
}
if(i % dayCount == 0 ){
kData[1] = data[i][1]
}
}
this.optionOne.xAxis[0].data = klineDate
this.optionOne.xAxis[1].data = klineDate
this.optionOne.series[0].data = volumes
this.optionOne.series[1].data = result
myChart.setOption(this.optionOne);
},
总结
（1）理解了周k的原理，
（2）对数据进行二次处理封装，
（3）注意每次单个k线图数据push进指定数据后，将清空容器
|