美文网首页
echars时间轴

echars时间轴

作者: IT小池 | 来源:发表于2018-07-24 10:50 被阅读0次

    代码如下:

    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('box'));
    var option = {
        title: {
            text: '带份收益统计',
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
             // 自定义提示框
                var res = '<div><p>';
                for(var i=0;i<params.length;i++){
                    res += params[i].data[0]+'</p>';
                    res += '<p>收益:'+params[i].data[1]+'</p>';
                    res += '<p>关注的公众号数量:'+params[i].data[2]+'个</p>';
                }
                return res+='</div>';
            }
        },
        xAxis: {
            type: 'time',
            boundaryGap:false,
            axisLabel: {
                formatter: function(value, index){
                    // 格式化成月/日,只在第一个刻度显示年份
                    var date = new Date(value);
                    var texts = [(date.getMonth() + 1), date.getDate()];
                    if (index === 0) {
                        texts.unshift(date.getFullYear());
                    }
                    return texts.join('-');
                }
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            // data 的格式就是一个二维数组或对象
            /* data:[{
                    name:'2018-07-21',
                    value:['2018-07-21',10]
                },{
                    name:'2018-07-21',
                    value:['2018-07-21',10]
                }]
            */
            data:[['2018-07-21',10],['2018-07-22',15],['2018-07-23',3]],
            type: 'line',
            smooth: true
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);}

    相关文章

      网友评论

          本文标题:echars时间轴

          本文链接:https://www.haomeiwen.com/subject/ebdemftx.html