echarts画k线图

var charset = echarts.init(document.getElementById("k_line"))
            $.get(k_line.url_A).done(function (info) {
                var rawData = info.Data.History;
                var single = info.Data.Signal;
                var single_ = [];
                var arr = [];
                for (var i = 0; i < single.length; i++) {
                    var data = single[i][0];
                    var y = single[i][1];
                    var origle = single[i][2];
                    arr.push(data);
                    var obj = {};
                    if (origle == '0') {
                        obj = {
                            name: '0',
                            coord: [data, y],
                            symbol: k_line.buy_,
                            symbolSize: [40, 40],
                            label: "卖出"
                        }
                    } else {
                        obj = {
                            name: '1',
                            coord: [data, y],
                            symbol: k_line.sell_,
                            symbolSize: [40, 40],
                            label: "卖出"
                        }
                    }
                    single_.push(obj)
                }
                var dates = rawData.map(function (item) {
                    return item[0];
                });
                var data = rawData.map(function (item) {
                    return [+item[1], +item[2], +item[5], +item[6], ];
                });
                var option = {
                    title: {
                        text: k_line.title,
                        textStyle: {
                            color: "rgba(255,255,255,0.4)",
                            fontSize: "18"
                        }
                    },
                    backgroundColor: '#000',
                    brush: {
                        toolbox: ['rect'],
                        xAxisIndex: 0,
                        inBrush: {
                            symbolSize: '40px',
                            color: '#000',
                            color0: '#54FFFF',
                            borderColor: '#FF3232',
                            borderColor0: '#54FFFF'
                        },
                        outOfBrush: {
                            color: '#000',
                            color0: '#54FFFF',
                            borderColor: '#FF3232',
                            borderColor0: '#54FFFF'
                        },
                        z: 1000
                    },
                    toolbox: {
                        color: "red",
                        borderWidth: "10px",
                        itemGap: 25,
                        itemSize: 25,
                        left: 'center',
                        iconStyle: {
                            normal: {
                                color: 'red',
                                borderType: "solid",
                                borderColor: "red",
                                textPosition: "left"
                            },
                            emphasis: {
                                fontSize: "24px"
                            }
                        },
                        feature: {
                            brush: {
                                title: {
                                    rect: "点击进入选中模式"
                                },
                            }
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false,
                            type: 'cross',
                            lineStyle: {
                                color: '#376df4',
                                width: 2,
                                opacity: 1
                            }
                        },
                        formatter: function (params) {//鼠标在k线上显示的模态框
                            var res = params[0].seriesName + ' ' + params[0].name;
                            res += '<br/>  开盘 : ' + params[0].value[1];
                            res += '<br/>  最高 : ' + params[0].value[3];
                            res += '<br/>  收盘 : ' + params[0].value[2];
                            res += '<br/> 最低 : ' + params[0].value[4];
                            return res;
                        },
                        axisPointer: {
                            type: "cross",
                            crossStyle: {
                                color: "#666",
                                type: "solid"
                            },
                        },
                        textStyle: {
                            backgroundColor: "blue"
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: dates,
                        axisLine: { lineStyle: { color: 'red' } },
                        axisLabel: {//坐标轴文本样式
                            textStyle: {
                                color: "red",
                            },
                        }
                    },
                    yAxis: {
                        scale: true,
                        position: "right",
                        axisLine: { lineStyle: { color: 'red' } },
                        //背景的虚线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "red",
                                type: "dashed"
                            }
                        },
                        axisLabel: {//坐标轴文本样式
                            textStyle: {
                                color: "red",
                            }
                        },
                        boundaryGap: [0, 0.2]
                    },
                    grid: {//网格的区域 大小
                        width: "95%",
                        height: "100%",
                        left: 0,
                        bottom: 80
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 88,
 
                        }],
                    animation: false,
                    series: [//放跟数据相关的
                        {
                            type: 'candlestick',
                            name: '日K',
                            data: data,
                            markPoint: {
                                data: single_
                            },
                            itemStyle: {
                                normal: {
                                    color: '#FF3232',
                                    color0: '#54FFFF',
                                    borderColor: '#FF3232',
                                    borderColor0: '#54FFFF'
                                },
                                emphasis: {
                                    color: '#FF3232',
                                    color0: '#54FFFF',
                                    borderColor: '#FF3232',
                                    borderColor0: '#54FFFF'
                                }
                            }
                        },
                    ]
                };
                //实现响应式
                window.onresize = charset.resize;
                //绘图
                charset.setOption(option);
 
                //鼠标框选事件
                charset.on('brushSelected', renderBrushed);
                function renderBrushed(params) {
                    var brushed = [];
                    var brushComponent = params.batch[0];
                    for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                        var rawIndices = brushComponent.selected[sIdx].dataIndex;
                        brushed.push(rawIndices)
                    }
                    var start = brushed[0][0];
                    s_ = start = rawData[start][0];//框选开始位置
                    var end = brushed[0][brushed[0].length - 1];
                    n_ = end = rawData[end][0];//框选结束位置
                    var v1 = '您选择的回测的日期是:\n\n\n' + start + "--" + end + '\n\n\n点击进入回测页面';
                    var url_1 = k_line.success_link + "?" + start + "&" + end;
                    var v2 = '您选择的回测的日期不存在可回测数据';
                    var v3 = "您选择的区间过大，请重新选择";
                    var len_ = arr.length;
                    for (var i = 0; i < len_; i++) {
                        if (arr[i] > start && arr[i] < end) {
                            if (getDays(end, start) > 360) {
                                k_line.msg(v3, 'javascript:;')
                                break;
                                }
                            k_line.msg(v1, url_1);
                            break;
                        } else {
                            k_line.msg(v2, 'javascript:;')
                        }
                    }
                }
            })//画图完毕
            function getDays(strDateStart,strDateEnd){
                var strSeparator = "-"; //日期分隔符
                var oDate1;
                var oDate2;
                var iDays;
                oDate1= strDateStart.split(strSeparator);
                oDate2= strDateEnd.split(strSeparator);
                var strDateS = new Date(oDate1[0], oDate1[1]-1, oDate1[2]);
                var strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2]);
                iDays = parseInt(Math.abs(strDateS - strDateE ) / 1000 / 60 / 60 /24)//把相差的毫秒数转换为天数
                return iDays;
            }//判断日期

　　需求是通过后台给的数据去框选区间回测数据，如果超出一年了，就不让其回测了。

var k_line = { //k线图对象
                msg: function (v, url) {//提示框函数
                    charset.setOption({
                        title: {
                            backgroundColor: '#333',
                            text: v,
                            top: '50px',
                            right: 0,
                            width: '100px',
                            height: '80px',
                            textStyle: {
                                fontSize: 12,
                                color: '#fff',
                            },
                            link: url,
                            target: "self",
                        }
                    });
                },
                url_A: "/Home/GetKLineData?code=" + nums_code + "&areaType=" + areatype,//后台接口
                buy_: 'image:///public/imags/gou.png', //买入图片
                sell_: 'image:///public/imags/sale.png',//卖出图片
                title: areaname_ + ':' + nums_code,
                success_link: 'javascript:void(0)',//框选成功后的跳转链接
            };
 
            layer.open({ //打开k线图
                type: 1,
                title: 0,
                shade: 0.8,
                shadeClose: false,
                area: ['90%', '90%'],
                content: "<div style='position:relative;width:100%;height:100%;'><div id='k_line' style='width:100%;height:100%;'></div><div id='k_line_' style='width:158px;height:28px;position:absolute;right:0;top:116px;z-index:99999;cursor:pointer'></div></div>"
            });
            var s_ = "", n_ = "";
            $('#k_line_').on("click", function () { //关闭k线图
                if (s_ != '' && n_ != '') {
                    jBcs.s_time = s_, jBcs.n_time = n_;
                    jBcs.iSdisabled = false;
                    layer.close(layer.index);
                }
            });