Echarts在线免费图表

 
            var data=[
            [100, -21, 100, -21],
            [10, -21, -21, -21],
            [-21, 138, -21, 138],
            [138, 232, 138, 232],
            [232, 222, 232, 222],
            [222, 242, 222, 242],
            [242, 406, 242, 406],
            [0, 406, 0, 406]
        ]
option = {
    backgroundColor: '#000',
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function(p) {
            console.log('2', p);
            // var text = params[1].name + '<br />' + params[1].seriesName + '：' + params[1].value;
            // if (params[2].data.value) text += '<br />平均最大值：' + params[2].value[4];
            // if (params[2].data.value) text += '<br />平均最小值：' + params[2].value[3];
            // return '';
            return `${p[0].name}<br/>${p[0].marker}开盘：${p[0].value[1]}<br/>${p[0].marker}结束：${p[0].value[2]}<br/>${p[0].marker}最高：${p[0].value[4]}<br/>${p[0].marker}最低：${p[0].value[3]}`

        }
    },
    grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        splitLine: {
            show: false
        },
        data: ['11-01', '11-02', '11-03', '11-03', '11-04', '11-05', '11-06', '11-07']
    },
    yAxis: {
        type: 'value',
         splitLine: {
                show: true,
                 lineStyle: {
                    color: 'rgba(255,255,255,0.5)',
                    type:'dashed'
                },
            },
    },
    series: [{
        type: 'candlestick',
        barWidth: '20px',
        itemStyle: {
            color: '#268AFF', // 往上升
            borderColor: '#268AFF',
            color0: '#36F097', // 往下降
            borderColor0: '#36F097'
        },
       
        markPoint: {
            symbol: 'rect',
            symbolSize: 1,
            label: {
                show: true,
                color: 'rgba(255,255,255,0.5)',
                position: 'top',
                formatter: function(res) {
                    console.log(1, res);
                    return res.data.value;
                }
            },
            data: [
                {
                value: 100,
                coord: [0, 100]
            }, {
                value: 10,
                coord: [1, 10],
            }, {
                value: 138,
                coord: [2, 138]
            }, {
                value: 232,
                coord: [3, 232]
            }, {
                value: 222,
                coord: [4, 232]
            },
            {
                value: 222,
                coord: [5, 232]
            },
            {
                value: 406,
                coord: [6, 406]
            },
            {
                value: 406,
                coord: [7, 406]
            }
        ]
        },
        data: data
    }]
};