MiThink 记事本

要做一个行情走势图，要求X轴的日期按天显示，每天显示5条数据，效果如下：

用ECharts实现，代码如下：

option = {
    title : {
        text: '行情走势图',
        subtext: '数据来自Huison.cn',
        x: 'center',
        align: 'right'
    },
    grid: {
        bottom: 80
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
    dataZoom: [
        {
            show: false,
            realtime: false,
        }
    ],
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            axisLine: {show: true},
            axisTick:{
                interval:function(index, value) {
                    return value.substring(value.length-5) == '00:00';
                }
            },
            axisLabel:{
                show:true,
                interval:function(index, value) {
                   return value.substring(value.length-5) == '00:00'; 
                },
                formatter:function(value, index) {
                    return value.substring(0, 4);
                }
            },
            data : [
                '6-11 20:00',
                '6-12 00:00', '6-12 4:00', '6-12 8:00', '6-12 12:00', '6-12 16:00', '6-12 20:00',
                '6-13 00:00', '6-13 4:00', '6-13 8:00', '6-13 12:00', '6-13 16:00', '6-13 20:00',
                '6-14 00:00', '6-14 4:00', '6-14 8:00', '6-14 12:00', '6-14 16:00', '6-14 20:00',
                '6-15 00:00', '6-15 4:00', '6-15 8:00', '6-15 12:00', '6-15 16:00', '6-15 20:00',
                '6-16 00:00', '6-16 4:00', '6-16 8:00', '6-16 12:00', '6-16 16:00', '6-16 20:00',
                '6-17 00:00', '6-17 4:00', '6-17 8:00', '6-17 12:00', '6-17 16:00', '6-17 20:00',
                '6-18 00:00', '6-18 4:00', '6-18 8:00', '6-18 12:00', '6-18 16:00', '6-18 20:00'
            ]
        }
    ],
    yAxis: [
        {
            type: 'value',
            min:100,
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel:{
                formatter:function(value, index) {
                    return value > 1000 ? value/1000 + 'k' : value;
                }
            },
            splitLine:{
                show:true
            }
        }
    ],
    series: [
        {
            name:'模拟数据',
            type:'line',
            smooth:true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: 'green'
                }
            },
            markLine: {
                silent:true,
                animation:false,
                symbol:'',
                label:{
                    normal:{show:false}
                },
                lineStyle:{
                    normal:{
                        color:'#666',
                        type:'dotted'
                    }
                },
                data: [{
                    yAxis: 920
                }]
            },
            data:[
                600,870,1050,980,900,880,
                980,1120,1000,910,800,690,
                450,194,210,320,400,550,
                460,670,700,700,700,700,
                870,910,1020,1140,990,990,
                990,800,960,1000,1200,1300,
                1400,1450,1380,1300,1200,1200,
                1210
            ]
        }
    ]
};