echarts X / Y 错位折线图

前端

  1. // 折线数据  
  2. var data = [  
  3.   { name: ‘2019/04/04 08:05:08’, value: [‘2019/04/04 08:05:08’, 80] },  
  4.   { name: ‘2019/04/04 09:05:08’, value: [‘2019/04/04 09:05:08’, 60] },  
  5.   { name: ‘2019/04/04 10:18:18’, value: [‘2019/04/04 10:18:18’, 90] },  
  6.   { name: ‘2019/04/04 11:18:18’, value: [‘2019/04/04 11:18:18’, 70] }  
  7. ];  
  8.   
  9. // x 时间轴数据  
  10. var anchor = [  
  11.   { name: ’07:00:00′, value: [‘2019/04/04 07:00:00’, 0] },  
  12.   { name: ’00:00:00′, value: [‘2019/04/04 14:00:00’, 0] }  
  13. ];  
  14.   
  15. // 详细配置  
  16. var option = {  
  17.   title: {  
  18.     text: ‘x / y 轴错位折线图’  
  19.   },  
  20.   tooltip: {  
  21.     trigger: ‘axis’,  
  22.     formatter: function (params) {  
  23.       params = params[0];  
  24.       var date = new Date(params.name);  
  25.       return date.getHours() + ‘:’ + date.getMinutes();;  
  26.     },  
  27.     axisPointer: {  
  28.       animation: false  
  29.     }  
  30.   },  
  31.   xAxis: {  
  32.     type: ‘time’,  
  33.     splitLine: {  
  34.       show: false  
  35.     },  
  36.     axisLabel: {  
  37.       formatter: function (val) {  
  38.         debugger;  
  39.         var n = new Date(val)  
  40.         return n.getHours() + ‘:’ + n.getMinutes();  
  41.       }  
  42.     },  
  43.     splitNumber: 12  
  44.   },  
  45.   yAxis: {  
  46.     type: ‘value’,  
  47.     boundaryGap: [0, ‘100%’],  
  48.     splitLine: {  
  49.       show: false  
  50.     }  
  51.   },  
  52.   series: [{  
  53.     name: ‘模拟数据’,  
  54.     type: ‘line’,  
  55.     showSymbol: false,  
  56.     hoverAnimation: false,  
  57.     data: data  
  58.   },  
  59.   {  
  60.     name: ‘anchor’,  
  61.     type: ‘line’,  
  62.     showSymbol: false,  
  63.     data: anchor,  
  64.     itemStyle: { normal: { opacity: 0 } },  
  65.     lineStyle: { normal: { opacity: 0 } }  
  66.   }]  
  67. };  

本文链接地址: echarts X / Y 错位折线图

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注