Echarts在线免费图表

 
            var data = [
    ['2017-05-04', 0.16],
    ['2017-11-03', 0.12],
    ['2017-12-15', 0.1],
    ['2017-12-29', 0.14],
    ['2018-01-05', 0.13],
    ['2018-01-19', 0.12],
    ['2018-02-09', 0.13],
    ['2018-02-14', 0.18],
    ['2018-02-14', 0.14],
    ['2018-02-14', 0.22],
    ['2018-02-23', 0.25],
    ['2018-02-23', 0.15],
    ['2018-03-09', -0.04],
    ['2018-03-09', 0.13],
    ['2018-03-09', 0.05],
    ['2018-03-09', 0.11],
    ['2018-03-09', 0.1],
    ['2018-03-16', 0.13],
    ['2018-03-16', 0.11],
    ['2018-03-16', 0.1],
    ['2018-03-16', 0.13],
    ['2018-03-16', 0.11],
    ['2018-03-16', 0],
    ['2018-03-16', 0.11],
    ['2018-03-16', 0.5],
    ['2018-03-16', 0.13],
    ['2018-03-16', -0.03],
    ['2018-03-16', 0.1],
    ['2018-03-16', -0.11],
    ['2018-03-16', 0.12],
    ['2018-03-16', 0],
    ['2018-03-16', 0.12],
    ['2018-03-16', 0.12],
    ['2018-03-23', 0.12],
    ['2018-03-23', 0.12],
    ['2018-03-23', 0.15],
    ['2018-03-30', 0.12],
    ['2018-03-30', 0.16],
    ['2018-03-30', 0.1]
];

option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
    },
    grid: {
        show: true, //是否显示直角坐标系的网格,true显示，false不显示 
        left: 100, //grid组件离容器左侧的距离 
        containLabel: false, //grid 区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器有比较小无法预留较多空间的时候，可以设为 true 防止标签溢出容器。 
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {
                readOnly: false
            },


            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'time',
        name: '时间轴',

    },
    yAxis: {
        type: 'value',
        name: '涨幅',
        max: 0.4,
        min: -0.2,
    },
    dataZoom: [{
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 35
        },

        {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 35
        },

    ],
    series: [{
        name: '',
        data: data,
        type: 'scatter',
        symbolSize: function (data) {
            return data[1]*150;
        },
    }]
};