echart基于日K数据实现周K、月K

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) {
 //更改k线图标题
     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'
     }
     //初始化k线图
     let myChart = echarts.init(document.getElementById('chartLineBox'));
     let result = []; //k线图数据容器
     let klineDate = [] //k线图时间容器
     let volumes = [] //k线图成交量容器
     let hightList = [] //k线图最近dayCount最高价
     let lowList = []  //k线图最近dayCount最低价
     let kData = [] //封装的k线图数据容器
     for(let i = 0;i < data.length;i++){
    if(i % dayCount == dayCount - 1 ){
        kData[0] = data[i][0]
        //slice分割数组，且返回分割的区间
        //reduce数组值求和
        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])
        //es6结构、求一组数中最大值
        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进指定数据后，将清空容器