107Echarts - K 线图（OHLC Chart）

效果图

源代码

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


function renderItem(params, api) {
    var xValue = api.value(0);
    var openPoint = api.coord([xValue, api.value(1)]);
    var closePoint = api.coord([xValue, api.value(2)]);
    var lowPoint = api.coord([xValue, api.value(3)]);
    var highPoint = api.coord([xValue, api.value(4)]);
    var halfWidth = api.size([1, 0])[0] * 0.35;
    var style = api.style({
        stroke: api.visual('color')
    });

    return {
        type: 'group',
        children: [{
            type: 'line',
            shape: {
                x1: lowPoint[0], y1: lowPoint[1],
                x2: highPoint[0], y2: highPoint[1]
            },
            style: style
        }, {
            type: 'line',
            shape: {
                x1: openPoint[0], y1: openPoint[1],
                x2: openPoint[0] - halfWidth, y2: openPoint[1]
            },
            style: style
        }, {
            type: 'line',
            shape: {
                x1: closePoint[0], y1: closePoint[1],
                x2: closePoint[0] + halfWidth, y2: closePoint[1]
            },
            style: style
        }]
    };
}


$.get('data/asset/data/stock-DJI.json', function (rawData) {

    var data = splitData(rawData);

    myChart.setOption(option = {
        backgroundColor: '#eee',
        animation: false,
        legend: {
            bottom: 10,
            left: 'center',
            data: ['Dow-Jones index']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            backgroundColor: 'rgba(245, 245, 245, 0.8)',
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            textStyle: {
                color: '#000'
            },
            position: function (pos, params, el, elRect, size) {
                var obj = {top: 10};
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                return obj;
            },
            extraCssText: 'width: 170px'
        },
        axisPointer: {
            link: {xAxisIndex: 'all'},
            label: {
                backgroundColor: '#777'
            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: false
                },
                brush: {
                    type: ['lineX', 'clear']
                }
            }
        },
        grid: [
            {
                left: '10%',
                right: '8%',
                bottom: 150
            }
        ],
        xAxis: [
            {
                type: 'category',
                data: data.categoryData,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                    z: 100
                }
            }
        ],
        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            }
        ],
        dataZoom: [
            {
                type: 'inside',
                start: 98,
                end: 100,
                minValueSpan: 10
            },
            {
                show: true,
                type: 'slider',
                bottom: 60,
                start: 98,
                end: 100,
                minValueSpan: 10
            }
        ],
        series: [
            {
                name: 'Dow-Jones index',
                type: 'custom',
                renderItem: renderItem,
                dimensions: [null, 'open', 'close', 'lowest', 'highest'],
                encode: {
                    x: 0,
                    y: [1, 2, 3, 4],
                    tooltip: [1, 2, 3, 4]
                },
                data: data.values
            }
        ]
    }, true);

});