Echarts在线免费图表

 
            var data = [
    {name:'2016/12/01', value:['2016/12/01', 80]},
    {name:'2016/12/08', value:['2016/12/08', 60]},
    {name:'2016/12/15', value:['2016/12/15', 90]},
    {name:'2016/12/15', value:['2016/12/15', 70]}
    ];
    
var anchor = [
    {name:'2016/1/30 ', value:['2016/1/30', 0]},
    {name:'2016/12/31', value:['2016/12/31', 0]}
    ];
option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    grid:{ show:true,//是否显示直角坐标系的网格,true显示，false不显示 
    left:100,//grid组件离容器左侧的距离 
    containLabel:false,//grid 区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器有比较小无法预留较多空间的时候，可以设为 true 防止标签溢出容器。 
    },



    xAxis: {
        type: 'time',
        splitLine: {
            show: true
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '20%'],
        splitLine: {
            show: true
        }
    },
    dataZoom: [ { type: 'slider', 
        show: true, 
        xAxisIndex: [0],
        start: 1, 
        end: 35 }, 
       
        { type: 'inside',
        xAxisIndex: [0], 
        start: 1,
        end: 35 }, 
        
        ],



    series: [{
        name: '模拟数据',
        type: 'scatter',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    },
    {
        name:'.anchor',
        type:'scatter', 
        showSymbol:false, 
        data:anchor,
        itemStyle:{normal:{opacity:0}},
        lineStyle:{normal:{opacity:0}}
    }]
};