echart k线图之交易策略信号展示图（二）

本章为k线图展示基本代码。
以未来量化k线图数据为参考。
详见代码及效果图。

<div id="charts_k" class="center"></div>

var upColor = ‘#ec0000’;
var upBorderColor = ‘#8A0000’;
var downColor = ‘#00da3c’;
var downBorderColor = ‘#008F28’;
var k_bz = “btc”;
var k_time = “15m”;
var k_gdd = “dc”;
var k_key = k_bz + k_time + k_gdd;
var myChart = echarts.init(document.getElementById(‘charts_k’));
// 时间 time 开盘(open)，收盘(close)，最低(low)，最高(high)
// upper 上轨 lower 下轨
// signal_long 开多信号 1 开多 0 开空 signal_short 开空信号 -1 开空 0 平空
// signal 0 平仓 1 开多 -1 开空 null 没信号（不提示）signal

    initialization();
    function initialization(){
        var option = {
            title: {
                text: '交易策略信号展示',
                left: 0
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data: ['K线']
            },
            grid: {
                left: '12%',
                right: '5%',
                bottom: '15%'
            },
            xAxis: {
                type: 'category',
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
            },
            yAxis: {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 60,
                    end: 100
                },
                {
                    show: true,
                    type: 'slider',
                    top: '90%',
                    start: 50,
                    end: 100
                }
            ],
            series: [
                {
                    name: '日K',
                    type: 'candlestick',
                    itemStyle: {
                        color: upColor,
                        color0: downColor,
                        borderColor: upBorderColor,
                        borderColor0: downBorderColor
                    },
                }
            ]
        }
        myChart.setOption(option);
    }

        get_k_charts();

        function get_k_charts(){
            myChart.showLoading();
            $.ajax({    
                url:url+k_key,
                type:'GET',
                crossDomain: true,
                success:function (data) {
                    json_data = JSON.parse(data);
                    // console.log(json_data);

                    var data_a = json_data['time'];
                    var data_b = json_data['open'];
                    var data_c = json_data['close'];
                    var data_d = json_data['low'];
                    var data_e = json_data['high'];
                    var data_upper = json_data['upper'];    //上轨
                    var data_lower = json_data['lower'];    //下轨
                    var data_signal = json_data['signal'];  //信号

                    var a_arr = [];
                    var b_arr = [];
                    var c_arr = [];
                    var d_arr = [];
                    var e_arr = [];
                    var upper_arr = [];
                    var lower_arr = [];
                    var signal_arr = [];

                    for(var item in data_a){
                        a_arr.push(data_a[item]);
                    }
                    for(var item in data_b){
                        b_arr.push(data_b[item]);
                    }
                    for(var item in data_c){
                        c_arr.push(data_c[item]);
                    }
                    for(var item in data_d){
                        d_arr.push(data_d[item]);
                    }
                    for(var item in data_e){
                        e_arr.push(data_e[item]);
                    }
                    for(var item in data_upper){
                        upper_arr.push(data_upper[item]);
                    }
                    for(var item in data_lower){
                        lower_arr.push(data_lower[item]);
                    }
                    for(var item in data_signal){
                        signal_arr.push(data_signal[item]);
                    }

                    var xy = 200; //可自定义，设置数据长度
                    var a_arr_new = a_arr.slice(a_arr.length-xy-1,a_arr.length-1);
                    var b_arr_new = b_arr.slice(b_arr.length-xy-1,b_arr.length-1);
                    var c_arr_new = c_arr.slice(c_arr.length-xy-1,c_arr.length-1);
                    var d_arr_new = d_arr.slice(d_arr.length-xy-1,d_arr.length-1);
                    var e_arr_new = e_arr.slice(e_arr.length-xy-1,e_arr.length-1);
                    var upper_arr_new = upper_arr.slice(upper_arr.length-xy-1,upper_arr.length-1);
                    var lower_arr_new = lower_arr.slice(lower_arr.length-xy-1,lower_arr.length-1);
                    var signal_arr_new = signal_arr.slice(signal_arr.length-xy-1,signal_arr.length-1);

                    var data_all = [];
                    for(var i=0; i<signal_arr_new.length;i++){
                        let x_1 = [];
                        x_1.push(a_arr_new[i],b_arr_new[i],c_arr_new[i],d_arr_new[i],e_arr_new[i]);
                        data_all.push(x_1);
                    }

                    var data0 = splitData(data_all);
                    function splitData(rawData) {
                        var categoryData = [];
                        var values = []
                        for (var i = 0; i < rawData.length; i++) {
                            categoryData.push(rawData[i].splice(0, 1)[0]);
                            values.push(rawData[i])
                        }
                        return {
                            categoryData: categoryData,
                            values: values
                        };
                    }

                    myChart.setOption({
                        xAxis: {
                            type: 'category',
                            data: data0.categoryData, //时间数组
                            scale: true,
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            splitLine: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        },
                        series: [
                            {
                                name: '日K',
                                type: 'candlestick',
                                data: data0.values, //合并后数组
                                itemStyle: {
                                    color: upColor,
                                    color0: downColor,
                                    borderColor: upBorderColor,
                                    borderColor0: downBorderColor
                                },
                                symbol: 'none',  //取消折点圆圈
                                markPoint: {
                                    data: maodian, //锚点，高低点
                                },                               
                            },
                            {
                                name:'upper',
                                type:'line',
                                smooth: true,
                                symbol: 'none',  //取消折点圆圈
                                lineStyle: {
                                    opacity: 0.5
                                },
                                data:upper_arr_new //上轨

                            },
                            {
                                name:'lower',
                                data:lower_arr_new,//下轨
                                symbol: 'none',  //取消折点圆圈
                                type:'line',
                                smooth: true,
                                lineStyle: {
                                    opacity: 0.5
                                }
                            },
                        ]
                    })
                    myChart.hideLoading();
                }
            })

        }

        ![K线图](http://blog.yunmell.vip/zb_users/upload/2020/08/202008281435568137313.png "K线图")