Echart图表X轴为时间轴的解释 原 |
您所在的位置：网站首页 › echarts横坐标日期time › Echart图表X轴为时间轴的解释 原 |
|
绘制Echart图表，一般情况下x轴type: 'category'，但有时候也用到type: 'time', 这两者的主要区别是，当为时间轴时，不需要指定xAxis 对象的data，时间轴显示的Label 是series对象里面的value[0]的日期，value[0]可以是时间戳也可以是“2018-12-5 10:20:30”这种类型，不能是无效的时间格式类型，同样可以格式化Label 例一 var times = [ [1522306819000, 2], [1522306919000, 1], [1522307019000, 3], [1522307119000, 1], [1522307120000, 1], [1522307230000, 1], [1522302230000, 1], [1522307430000, 1], [1522407230000, 1] ]; var option2 = { legend: { data: ['12月28日'], }, grid: { bottom: 50 }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'line' // 默认为直线，可选为：'line' | 'shadow' }, formatter: function(params) { console.log(params) return params[0].name + '' + params[0].seriesName + ' : ' + params[0].value[1] + ' Sm3' } }, xAxis: { type: 'time', splitNumber: 13, axisLabel: { formatter: function(value, index) { return new Date(value).getFullYear(); value指的是1522306819000这种数据 } }, boundaryGap: ["0", "100%"] }, yAxis: { type: 'value' }, series: { name: '公司名称', type: 'line', data: times, } }; var myChart1 = echarts.init(document.getElementById('linechart1'), theme); myChart1.setOption(option2);例二 var data1 = [{ name: "2016-4-28 08:03:17", value: ["2016-4-28 08:03:17", 15] }, { name: "2016-4-28 08:03:18", value: ["2016-4-28 08:03:18", 15] }, { name: "2016-4-28 08:03:19", value: ["2016-4-28 08:03:19", 15] }, { name: "2016-4-28 08:03:20", value: ["2016-4-28 08:03:20", 15] }, { name: "2016-4-28 08:03:21", value: ["2016-4-28 08:03:21", 15] }, { name: "2016-4-28 08:03:22", value: ["2016-4-28 08:03:22", 15] }, { name: "2016-4-28 08:03:23", value: ["2016-4-28 08:03:23", 15] }, { name: "2016-4-28 08:03:24", value: ["2016-4-28 08:03:24", 15] }, { name: "2016-4-28 08:03:25", value: ["2016-4-28 08:03:25", 15] }, { name: "2016-4-28 08:03:26", value: ["2016-4-28 08:03:26", 15] }, { name: "2016-4-28 08:03:27", value: ["2016-4-28 08:03:27", 15] }, { name: "2016-4-28 08:03:28", value: ["2016-4-28 08:03:28", 15] }, { name: "2016-4-28 08:03:29", value: ["2016-4-28 08:03:29", 15] } ]; var data = []; for (i = 0; i < data1.length; i++) { //data.push(data1[x].name.substring(10,18)); data.push(data1[i]); data[i].name = data1[i].name.substring(10, 18); //data[i].value[0]=data1[i].value[0].substring(10,18); //不能设置此行，如果设置此行，导致时间格式有误，会报错 } console.log(data) var option2 = { legend: { data: ['12月28日'], }, grid: { bottom: 50 }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'line' // 默认为直线，可选为：'line' | 'shadow' }, formatter: function(params) { console.log(params) return params[0].name + '' + params[0].seriesName + ' : ' + params[0].value[1] + ' Sm3' } }, xAxis: { type: 'time', splitNumber: 13, axisLabel: { formatter: function(value, index) { return new Date(value).toLocaleTimeString(); } }, boundaryGap: ["0", "100%"] }, yAxis: { type: 'value' }, series: { name: '公司名称', type: 'line', data: data, } }; var myChart1 = echarts.init(document.getElementById('linechart1'), theme); myChart1.setOption(option2);(adsbygoogle = window.adsbygoogle || []).push({}); |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |