echarts 图表类型设置为time 时 ,设置x轴间隔的问题

ahking 2021-01-05 11:00:38

series的data为:
[["2020-11-21",1],["2020-11-22",2],["2020-11-23",3],["2020-11-24",4],["2020-11-25",5]]

想设置两天显示一个数,应该怎么设置
interval: 3600, // 设置x轴时间间隔,这里的单位是什么
...全文
10471 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
ZionHH 2021-01-06
  • 打赏
  • 举报
回复
interval: 24*2*60*60*1000
ahking 2021-01-06
  • 打赏
  • 举报
回复
我发现是最新的5.0版本和原版本兼容性问题,但需要用最新版本,不知怎么设 配置项如下


option = {
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var dataValue = params[0].value + "";
var dataArray = dataValue.split(',');
var date = new Date(dataArray[0].replace("-", "/"));

        var dataValue_peichan = params[1].value + "";
        var dataArray_peichan = dataValue_peichan.split(',');

        return (date.getMonth() + 1) + '/' + date.getDate() + ':' + dataArray[1] + '<br />配产:' + dataArray_peichan[1] + '(' + (dataArray[1] - dataArray_peichan[1]) + ')';

        //return dataArray[0] + ':' + dataArray[1];
        //console.log(params);

    }
},
grid: { top: 15, bottom: 20, left: 40, right: 20 },
xAxis: {
type: 'time',
boundaryGap: false,
interval: 15 * 24 * 3600 * 1000,
//data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
axisLabel: {
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度加空格,防止挡住纵坐标刻度值
var date = new Date(value);
var texts;
if (index === 0) {
texts = [' ' + (date.getMonth() + 1), date.getDate()];
}
else {
texts = [(date.getMonth() + 1), date.getDate()];
}
console.log(texts);
//return texts;
return texts.join('/');
},
margin: 4
},
axisTick: { show: false }
},
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax'
},
series: [{
name: '产量',
type: 'line',
lineStyle: {
normal: {
width: 1.6,
color: 'red'
}
},
animation: false,
symbol: 'circle',
symbolSize: 2,
showAllSymbol: true,
itemStyle: {
normal: {
label: {
show: true,
formatter: function (params, ticket, callback) {
//格式化展现(标签+值)
//return params.dataIndex;
if (params.dataIndex == 45) {
return params.value2;
}
else {
return "";
}

                },
                textStyle: { color: 'gray' }
            }
        }
    },
    data: [["2020-11-22", 5364], ["2020-11-23", 5387], ["2020-11-24", 5397], ["2020-11-25", 5356], ["2020-11-26", 5383], ["2020-11-27", 5410], ["2020-11-28", 5406], ["2020-11-29", 5399], ["2020-11-30", 5384], ["2020-12-01", 5374], ["2020-12-02", 5385], ["2020-12-03", 5407], ["2020-12-04", 5410], ["2020-12-05", 5405], ["2020-12-06", 5412], ["2020-12-07", 5400], ["2020-12-08", 5383], ["2020-12-09", 5400], ["2020-12-10", 5414], ["2020-12-11", 5412], ["2020-12-12", 5406], ["2020-12-13", 5396], ["2020-12-14", 5361], ["2020-12-15", 5367], ["2020-12-16", 5353], ["2020-12-17", 5339], ["2020-12-18", 5351], ["2020-12-19", 5357], ["2020-12-20", 5368], ["2020-12-21", 5367], ["2020-12-22", 5373], ["2020-12-23", 5379], ["2020-12-24", 5373], ["2020-12-25", 5361], ["2020-12-26", 5345], ["2020-12-27", 5345], ["2020-12-28", 5329], ["2020-12-29", 5319], ["2020-12-30", 5302], ["2020-12-31", 5290], ["2021-01-01", 5301], ["2021-01-02", 5316], ["2021-01-03", 5320], ["2021-01-04", 5327], ["2021-01-05", 5327], ["2021-01-06", 5337]]
    //data: [3, 5, 36, 10, 20, 15, 7, 20, 15, 7]
},
{
    name: '配产',
    type: 'line',
    lineStyle: {
        normal: {
            width: 1.6,
            color: 'blue'
        }
    },
    animation: false,
    symbol: 'none',
    symbolSize: 1,
    showAllSymbol: false,
    /*
    label: {
        normal: {
            formatter: function (params) {
                //var date = new Date(params.name);
                //return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                return '666';
            }
        }
    },*/
    data: [["2020-11-22", 5500], ["2020-11-23", 5500], ["2020-11-24", 5500], ["2020-11-25", 5500], ["2020-11-26", 5500], ["2020-11-27", 5500], ["2020-11-28", 5500], ["2020-11-29", 5500], ["2020-11-30", 5500], ["2020-12-01", 5455], ["2020-12-02", 5455], ["2020-12-03", 5455], ["2020-12-04", 5455], ["2020-12-05", 5455], ["2020-12-06", 5455], ["2020-12-07", 5455], ["2020-12-08", 5455], ["2020-12-09", 5455], ["2020-12-10", 5455], ["2020-12-11", 5455], ["2020-12-12", 5455], ["2020-12-13", 5455], ["2020-12-14", 5455], ["2020-12-15", 5455], ["2020-12-16", 5455], ["2020-12-17", 5455], ["2020-12-18", 5455], ["2020-12-19", 5455], ["2020-12-20", 5455], ["2020-12-21", 5455], ["2020-12-22", 5455], ["2020-12-23", 5455], ["2020-12-24", 5455], ["2020-12-25", 5455], ["2020-12-26", 5455], ["2020-12-27", 5455], ["2020-12-28", 5455], ["2020-12-29", 5455], ["2020-12-30", 5455], ["2020-12-31", 5455], ["2021-01-01", 5452], ["2021-01-02", 5452], ["2021-01-03", 5452], ["2021-01-04", 5452], ["2021-01-05", 5452], ["2021-01-06", 5452]]
    //data: [3, 5, 36, 10, 20, 15, 7, 20, 15, 7]
}]

5.0之前版本能够按15天间隔,显示坐标纵线,首尾都显示横坐标标签 5.0版本按照5天间隔,不显示坐标纵线,逢一号显示数据,首尾不显示横坐标标签 5.0版本配置项该如果修改

87,992

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧