6
回答
ECharts 时间横坐标自动计算
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

求助各位大牛,我需要画一个折线图。横坐标是时间。显示数据如下

series: [
            {
                "name": "销量",
                "type": "line",
                "data": [5, 20, 40, 10, 10, 20, 20, 40, 10, 10, 25, 20, 40, 10, 10, 25, 20]
            }
现在的需求是,时间轴只给一个开始时间,结束时间是当前时间,需要根据数据自动计算横坐标。求指点!!!



举报
LsHao
发帖于3年前 6回/11K+阅
共有6个答案 最后回答: 3年前

引用来自“zhonghai”的评论

axis.axisLabel formatter 能满足你的需求吗

我刚开始学习使用,您能给我写一个DEMO么


var option1 = {
        tooltip: {
            show: true
        },
        legend: {
            data: ['销量']
        },
        xAxis: [
            {
               // type: 'time',
                //name: '时间',
               // splitNumber:24*3600,
                //min: (new Date()).setDate(1),
                //scale:true,
                //splitNumber:14,
               //max:new Date(),
                //boundaryGap: false,
                //data: []
                //data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                "name": "销量",
                "type": "line",
                "data": [5, 20, 40, 10, 10, 20, 20, 40, 10, 10, 25, 20, 40, 10, 10, 25, 20]
            }
        ]
    };



这里是整个option的设置,我注释掉了关于x轴的部分。可以在这个上面改



引用来自“zhonghai”的评论

“根据数据自动计算横坐标”,你能给出这些数据是什么样的吗

意思是这样,横坐标只有开始时间,一天一个跨度,根据给定的数据条数自动匹配横坐标

series: [

            {
                "name":"销量",
                "type":"line",
                "data": [5, 20, 40, 10, 10, 20, 20, 40, 10, 10, 25, 20, 40, 10, 10, 25, 20]
            }
        ]

你是不是说的这个意思


var beginDt = new Date('2015-01-01');
var data =  [5, 20, 40, 10, 10, 20, 20, 40, 10, 10, 25, 20, 40, 10, 10, 25, 20];
echartsDate  = [];
for(var i=0;i<data.length;i++){
  var d = beginDt.getFullYear() + "-" + (beginDt.getMonth() + 1) + "-" + beginDt.getDate();
  echartsDate.push(d);
  beginDt.setDate(beginDt.getDate() + 1)
}




option = {
        tooltip: {
            show: true
        },
        legend: {
            data: ['销量']
        },
        xAxis: [
            {
              name:'sss',
data:echartsDate
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                "name": "销量",
                "type": "line",
                "data":data
            }
        ]
    };

顶部