k线echarts 折线配置项内容和展示

      var datas = splitData([
    ['2017-1-3', 21.37, 20.99, 20.9, 21.37],
    ['2017-1-4', 20.92, 21.17, 20.84, 21.24],
    ['2017-1-5', 21.15, 20.99, 20.95, 21.18],
    ['2017-1-6', 20.98, 20.69, 20.68, 21.07],
    ['2017-1-9', 20.7, 20.47, 20.4, 20.78],
    ['2017-1-10', 20.44, 20.7, 20.42, 20.97],
    ['2017-1-11', 20.67, 20.69, 20.57, 20.98],
    ['2017-1-12', 20.62, 20.54, 20.45, 20.9],
    ['2017-1-13', 20.5, 20.13, 19.91, 20.66],
    ['2017-1-16', 20.18, 18.73, 18.12, 20.2],
    ['2017-1-17', 18.62, 18.9, 18.15, 19.1],
    ['2017-1-18', 18.97, 19.02, 18.89, 19.31],
    ['2017-1-19', 18.85, 19.12, 18.63, 19.25],
    ['2017-1-20', 18.99, 19.42, 18.98, 19.51],
    ['2017-1-23', 19.48, 19.65, 19.42, 19.96],
    ['2017-1-24', 19.65, 19.3, 19.22, 19.87],
    ['2017-1-25', 19.28, 19.66, 19.11, 19.66],
    ['2017-1-26', 19.6, 19.68, 19.6, 19.73],
    ['2017-2-3', 19.69, 19.44, 19.32, 19.69],
    ['2017-2-6', 19.45, 19.71, 19.37, 19.83],
    ['2017-2-7', 19.64, 19.87, 19.45, 19.87],
    ['2017-2-8', 20.55, 20.45, 20.35, 21.49],
    ['2017-2-9', 20.21, 20.58, 20.21, 20.66],
    ['2017-2-10', 20.58, 20.7, 20.58, 21.14],
    ['2017-2-13', 20.41, 20.98, 20.32, 21.16],
    ['2017-2-14', 20.98, 20.78, 20.71, 20.98],
    ['2017-2-15', 20.88, 20.81, 20.7, 21.27],
    ['2017-2-16', 20.63, 20.72, 20.54, 20.74],
    ['2017-2-17', 20.72, 20.2, 20.11, 20.85],
    ['2017-2-20', 20.17, 20.4, 20.08, 20.42],
    ['2017-2-21', 20.39, 20.56, 20.27, 20.7],
    ['2017-2-22', 20.65, 20.8, 20.61, 21.1],
    ['2017-2-23', 20.85, 20.95, 20.52, 20.96],
    ['2017-2-24', 20.94, 20.95, 20.8, 21.11],
    ['2017-2-27', 21.03, 20.71, 20.61, 21.1],
    ['2017-2-28', 20.73, 20.84, 20.6, 20.84],
    ['2017-3-1', 21.08, 21.91, 21.08, 22.2],
    ['2017-3-2', 21.7, 21.42, 21.35, 21.92],
    ['2017-3-3', 21.43, 21.8, 21.42, 22.15],
    ['2017-3-6', 21.81, 21.86, 21.7, 22.33],
    ['2017-3-7', 21.91, 22.13, 21.59, 22.13],
    ['2017-3-8', 22.1, 21.83, 21.7, 22.1],
    ['2017-3-9', 21.79, 21.73, 21.52, 21.99],
    ['2017-3-10', 21.8, 21.54, 21.42, 21.8],
    ['2017-3-13', 21.54, 21.86, 21.45, 21.99],
    ['2017-3-14', 21.78, 21.67, 21.6, 21.96],
    ['2017-3-15', 21.9, 21.94, 21.85, 22.42],
    ['2017-3-16', 21.82, 22.34, 21.8, 22.43],
    ['2017-3-17', 22.28, 21.84, 21.81, 22.28],
    ['2017-3-20', 21.78, 21.7, 21.55, 21.98],
    ['2017-3-21', 21.7, 21.71, 21.5, 21.79],
    ['2017-3-22', 21.71, 21.2, 21.08, 21.71],
    ['2017-3-23', 21.2, 21.07, 20.82, 21.3],
    ['2017-3-24', 21.06, 21.4, 20.91, 21.4],
    ['2017-3-27', 21.38, 21.01, 20.98, 21.39],
    ['2017-3-28', 21.01, 21.02, 20.97, 21.17],
    ['2017-3-29', 21.15, 21, 20.9, 21.36],
    ['2017-3-30', 20.87, 20.2, 20.11, 20.99],
    ['2017-3-31', 20.27, 20.09, 20.03, 20.39],
    ['2017-4-5', 20.12, 20.69, 20.11, 20.8],
    ['2017-4-6', 20.7, 20.67, 20.55, 20.83],
    ['2017-4-7', 20.62, 20.64, 20.61, 20.79],
    ['2017-4-10', 20.57, 20.24, 20.2, 20.57],
    ['2017-4-11', 20.24, 20.53, 20.2, 20.6],
    ['2017-4-12', 20.6, 20.4, 20.38, 20.63],
    ['2017-4-13', 20.4, 20.7, 20.4, 20.79],
    ['2017-4-14', 20.68, 20.2, 20.2, 20.75],
    ['2017-4-17', 20.15, 19.87, 19.84, 20.24],
    ['2017-4-18', 19.95, 19.56, 19.52, 20.05],
    ['2017-4-19', 19.58, 19.67, 19.2, 19.83],
    ['2017-4-20', 19.6, 19.95, 19.58, 19.98],
    ['2017-4-21', 19.86, 20.03, 19.86, 20.28],
    ['2017-4-24', 20.03, 19.86, 19.53, 20.04],
    ['2017-4-25', 19.81, 19.9, 19.7, 20.22],
    ['2017-4-26', 19.9, 19.75, 19.73, 19.95],
    ['2017-4-27', 19.9, 20.15, 19.42, 20.17],
    ['2017-4-28', 20.26, 20.45, 20.23, 20.58],
    ['2017-5-2', 20.5, 20.32, 20.26, 20.62],
    ['2017-5-3', 20.17, 20.18, 20.01, 20.33],
    ['2017-5-4', 20.1, 19.87, 19.82, 20.15],
    ['2017-5-5', 19.87, 19.58, 19.58, 19.87],
    ['2017-5-8', 19.5, 19.17, 19.08, 19.5],
    ['2017-5-9', 19.15, 19.4, 19.06, 19.53],
    ['2017-5-10', 19.4, 19.2, 19.18, 19.52],
    ['2017-5-11', 19.09, 19.54, 18.82, 19.55],
    ['2017-5-12', 19.55, 20, 19.41, 20],
    ['2017-5-15', 19.96, 20.13, 19.8, 20.15],
    ['2017-5-16', 20.04, 20.34, 19.81, 20.4],
    ['2017-5-17', 20.35, 20.17, 20.12, 20.38],
    ['2017-5-18', 15.1, 15.1, 15.1, 15.55],
    ['2017-5-19', 15.12, 15.11, 15.05, 15.23],
    ['2017-5-22', 15.55, 15.41, 15.15, 15.56],
    ['2017-5-23', 15.28, 15.03, 14.75, 15.3],
    ['2017-5-24', 14.92, 15.16, 14.6, 15.21],
    ['2017-5-25', 15.06, 15.32, 15.06, 15.35],
    ['2017-5-26', 15.33, 15.41, 15.18, 15.46],
    ['2017-5-31', 15.59, 15.53, 15.31, 15.67],
    ['2017-6-1', 15.49, 15.12, 15.05, 15.5],
    ['2017-6-2', 15, 15.08, 14.65, 15.23],
    ['2017-6-5', 15.11, 15.49, 15.02, 15.54],
    ['2017-6-6', 15.39, 15.47, 15.33, 15.55],
    ['2017-6-7', 15.46, 15.95, 15.39, 15.98],
    ['2017-6-8', 15.9, 15.93, 15.8, 15.96],
    ['2017-6-9', 15.92, 15.91, 15.73, 15.95],
    ['2017-6-12', 15.8, 15.86, 15.65, 15.88],
    ['2017-6-13', 15.79, 16.15, 15.78, 16.24],
    ['2017-6-14', 16.19, 16.15, 16.06, 16.29],
    ['2017-6-15', 16, 16.15, 15.93, 16.39],
    ['2017-6-16', 16.06, 16, 15.93, 16.14],
    ['2017-6-19', 15.89, 15.96, 15.85, 16.04],
    ['2017-6-20', 15.86, 15.88, 15.81, 15.99],
    ['2017-6-21', 15.87, 15.96, 15.74, 16.21],
    ['2017-6-22', 15.97, 15.72, 15.71, 16.04],
    ['2017-6-23', 15.66, 16.05, 15.64, 16.05],
    ['2017-6-26', 16.45, 16.24, 16.06, 16.76],
    ['2017-6-27', 16.29, 16.48, 16.12, 16.79],
    ['2017-6-28', 16.36, 16.03, 16, 16.4],
    ['2017-6-29', 16.05, 16.26, 16.02, 16.28],
    ['2017-6-30', 16.25, 16.41, 16.08, 16.43],
    ['2017-7-3', 16.46, 16.58, 16.31, 16.63],
    ['2017-7-4', 16.59, 16.5, 16.39, 16.59],
    ['2017-7-5', 16.6, 16.31, 16.18, 16.65],
    ['2017-7-6', 16.32, 16.07, 15.95, 16.32],
    ['2017-7-7', 16.07, 16.09, 16, 16.16],
    ['2017-7-10', 16.09, 16.03, 15.94, 16.22],
    ['2017-7-11', 16.04, 15.52, 15.51, 16.1],
    ['2017-7-12', 15.5, 15.47, 15.16, 15.64],
    ['2017-7-13', 15.76, 16.23, 15.75, 16.25],
    ['2017-7-14', 16.35, 16.1, 15.89, 16.35],
    ['2017-7-17', 16.37, 15.15, 15.11, 16.37],
    ['2017-7-18', 14.9, 15.27, 14.71, 15.3],
    ['2017-7-19', 15.21, 15.12, 14.92, 15.26],
    ['2017-7-20', 15.12, 15.02, 14.98, 15.3],
    ['2017-7-21', 15.02, 15.16, 14.93, 15.3],
    ['2017-7-24', 15.14, 14.98, 14.88, 15.25],
    ['2017-7-25', 15.08, 14.95, 14.9, 15.15],
    ['2017-7-26', 14.91, 15.03, 14.89, 15.18],
    ['2017-7-27', 15.02, 15.47, 15, 15.57],
    ['2017-7-28', 15.42, 15.28, 15.24, 15.57],
    ['2017-7-31', 15.37, 15.36, 15.25, 15.49],
    ['2017-8-1', 15.3, 15.25, 15.14, 15.42],
    ['2017-8-2', 15.26, 15.02, 15, 15.3],
    ['2017-8-3', 15.07, 15.26, 15, 15.45],
    ['2017-8-4', 15.25, 15.11, 15.1, 15.26],
    ['2017-8-7', 15.12, 15.37, 15.12, 15.56],
    ['2017-8-8', 15.37, 15.62, 15.21, 15.65],
    ['2017-8-9', 15.66, 16.32, 15.52, 16.58],
    ['2017-8-10', 16.1, 16.46, 16.07, 16.68],
    ['2017-8-11', 16.27, 16.54, 16.15, 16.78],
    ['2017-8-14', 16.54, 16.81, 16.4, 16.81],
    ['2017-8-15', 16.75, 16.68, 16.56, 16.81],
    ['2017-8-16', 16.68, 16.82, 16.51, 16.93],
    ['2017-8-17', 16.63, 16.52, 16.43, 16.82],
    ['2017-8-18', 16.52, 17.26, 16.51, 17.38],
    ['2017-8-21', 17.15, 17.2, 16.98, 17.23],
    ['2017-8-22', 17.2, 17.33, 17.13, 17.71],
    ['2017-8-23', 17.42, 16.74, 16.7, 17.42],
    ['2017-8-24', 16.7, 16.53, 16.36, 16.73],
    ['2017-8-25', 16.55, 16.78, 16.51, 16.97], //开盘价=收盘价=最低价
    ['2017-8-28', 16.8, 16.86, 16.74, 17.24], //开盘价=收盘价
    ['2017-8-29', 17.2, 17.34, 17.2, 17.7], //收盘价 > 开票价
    ['2017-8-30', 17.36, 17.2, 17.16, 17.75], //收盘价 < 开票价
    ['2017-8-31', 18.37, 18.42, 18.06, 18.92],
    ['2017-9-1', 18.76, 18.28, 18.07, 18.78],
    ['2017-9-4', 18.15, 18.1, 18.08, 18.64]
]);

// 获取对应的数据格式
function splitData(rawData) {
    var categoryData = [],
        values = [],
        nows = [];
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]); //日期
        nows.push(rawData[i][3]-0.23); //日期
        values.push(rawData[i]) //开，收，低，高
    }
    return {
        categoryData: categoryData,
        now: nows,
        values: values
    };
}
// 平均值
function calculateMA(dayCount) {
    var result = [];
    for (var i = 0, len = datas.values.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
            sum += datas.values[i - j][1];
        }
        result.push((sum / dayCount).toFixed(2));
    }
    return result;
}
// 下面折线图的数据
function calculateSA() {
    var result = [];
    result.push(0);
    for (var i = 0, len = datas.values.length; i < len; i++) {
        if (i > 0) {
            var k = Math.abs(datas.values[i][3] - datas.values[i][2]) / datas.values[i - 1][1] * 100;
            result.push(k.toFixed(2));
        }
    }
    return result;
}
// 下面柱状图的数据
function calculateUD() {
    var result = [];
    result.push(0);
    for (var i = 0, len = datas.values.length; i < len; i++) {
        if (i > 0) {
            var k = (datas.values[i][1] - datas.values[i - 1][1]) / datas.values[i - 1][1] * 100;
            result.push(k.toFixed(2));
        }
    }
    return result;
}
var config = {
    // barWidth: 10,//指定柱宽度
    col: {
        up: 'rgb(153, 14, 14)',
        down: '#19b34c',
        m5: '#f00',
        m10: 'yellow',
        m30: '#dd1ce0',
        // y: '#ffefef'
    },
    // bg: '#000',
    st: 10,
    ed: 40
}
option = {
    backgroundColor: config.bg,
    // color: '#fff',
    title: {
        text: 'k线'
    },

    // 提示框浮层的位置
    tooltip: {
        trigger: 'axis',
        position: [10, '70%'],
        formatter: '{a0}:{c0}  {a1}:{c1} {a2}:{c2}',
        // formatter:function(params){
        //     return params.data
        // },
        // backgroundColor: '#fff',
        borderWidth: 1,
        textStyle: {
            color: '#fff',
            width: '100%'
        },
        // 坐标轴指示器配置项
        axisPointer: {
            type: 'cross',
            label: {
                show: true,
                color: '#ff0',
                rich: {
                    a: {
                        // 没有设置 `lineHeight`，则 `lineHeight` 为 56
                    }
                }
                // formatter: function(params) {
                //     // 假设此轴的 type 为 'time'。
                //     return 'some text' + params.value;
                // },
            },
            crossStyle: {
                type: 'solid'
            },

        }
    },
    legend: {
        data: ['分时', '日K', '5日平均线', '10日平均线', '30日平均线', '振幅', '增加']
    },
    grid: [{
        top: '10%',
        // show:true,
        left: '5%', //grid 组件离容器左侧的距离。
        right: '5%',
        height: '60%',
        // borderColor:'#ccc',
    }, {
        top: '75%',
        left: '5%',
        right: '5%',
        height: '18%',
    }],
    axisPointer: {

        link: {
            xAxisIndex: 'all'
        },
        label: {
            backgroundColor: '#777'
        },
        // triggerOn:'click'
    },
    // 上下两个图表的x轴数据
    xAxis: [{
        type: 'category',
        // scale: true,
        // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
        // boundaryGap: false,
        axisLine: {
            // show: false,
            onZero: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
        data: datas.categoryData
    }, {
        type: 'category',
        //boundaryGap: false,
        gridIndex: 1,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        data: datas.categoryData
    }],
    // 
    yAxis: [{
        axisLabel: {
            color: config.col.y
        },
        scale: true,
        position: 'right',
        // splitArea: {
        //     show: false
        // },
        splitLine: {
            show: true,
            lineStyle: {
                color: ['#888'],
                type: 'dotted'
            }
        },

        // splitNumber: 10
    }, {
        gridIndex: 1,
        position: 'right',
        xAxisIndex: 1,
        //splitNumber: 3,
        splitArea: {
            show: false
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: ['#888'],
                type: 'dotted'
            }
        },
        axisLabel: {
            // show: true,
            color: config.col.y
        }
    }],

    dataZoom: [{
        type: 'inside',
        xAxisIndex: [0, 1],
        start: config.st,
        end: config.ed
    }, {
        show: false,
        type: 'slider',
        xAxisIndex: [0, 1],
        y: '94%',
        start: config.st,
        end: config.ed
    }],
    series: [
        {
            type: 'line',
            name: '分时',
            data: datas.now,
            itemStyle: {
                normal: {
                    areaStyle: {
                        type: 'default'
                    },
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(19, 37, 250,0.2)'
                    }, {
                        offset: 1,
                        color: 'rgba(19, 37, 250,0.2)'
                    }], false)
                }
            }
        },
        {
            type: 'line',
            name: '5日平均线',
            data: calculateMA(5),
            lineStyle: {
                normal: {
                    color: config.col.m5
                }
            },
            itemStyle: {
                normal: {
                    color: config.col.m5
                }
            }
        }, {
            type: 'line',
            name: '10日平均线',
            data: calculateMA(10),
            lineStyle: {
                normal: {
                    color: config.col.m10
                }
            },
            itemStyle: {
                normal: {
                    color: config.col.m10
                }
            }
        }, {
            type: 'line',
            name: '30日平均线',
            data: calculateMA(30),
            lineStyle: {
                normal: {
                    color: config.col.m30
                }
            },
            itemStyle: {
                normal: {
                    color: config.col.m30
                }
            }
        }, {
            type: 'line',
            name: '振幅', //下面的折线图
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: calculateSA()
        }, {
            type: 'bar',
            name: '增加', //下面的柱状图
            // barWidth: config.barWidth,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: calculateUD(),
            itemStyle: {
                normal: {
                    color: function(params) {
                        var col;
                        if (params.data >= 0) {
                            col = config.col.up;
                        } else {
                            col = config.col.down;
                        }
                        return col;
                    }
                }
            }
        },
        {
            type: 'k', //Candlestick 
            name: '日K',
            // barWidth: config.barWidth, //指定柱宽度
            itemStyle: {
                normal: {
                    color: config.col.up, //阳线填充色
                    color0: config.col.down,
                    borderColor: config.col.up, //阳线边框色
                    borderColor0: config.col.down
                }
            },
            // markPoint: {
            //     symbol: 'arrow',
            //     symbolSize: 4,
            //     label: {
            //         normal: {
            //             show: true,
            //             formatter: function(param) {
            //                 return param.value
            //             },
            //             color: '#2b8fa6',
            //             fontWeight: 'bold'
            //         }
            //     },
            //     itemStyle: {
            //         normal: {
            //             color: '#f221d6'
            //         }
            //     },
            //     data: [{
            //         name: '最高',
            //         type: 'max',
            //         valueDim: 'highest'
            //     }, {
            //         name: '最低',
            //         type: 'min',
            //         valueDim: 'lowest'
            //     }, {
            //         name: '平均',
            //         type: 'average',
            //         valueDim: 'close'
            //     }],
            // }, 
            data: datas.values
        }
    ]
};