echart曲线图从右往左显示,每屏显示固定的十条数据,其他的数据滚动显示

Posted 绿叶清风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echart曲线图从右往左显示,每屏显示固定的十条数据,其他的数据滚动显示相关的知识,希望对你有一定的参考价值。

  1. 测试地址
  2. 测试代码
let base = +new Date(2016, 9, 3);
let oneDay = 24 * 3600 * 1000;
let valueBase = Math.random() * 300;
let data = [];
for (var i = 1; i < 100; i++) 
  var now = new Date((base += oneDay));
  var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
  valueBase = Math.round((Math.random() - 0.9) * 20 + valueBase);
  valueBase <= 0 && (valueBase = Math.random() * 500);
  data.push([dayStr, valueBase]);


//每页显示10条,其他
function computedPosition(length,xArraylength) 
    if(xArraylength>=10)
        return length <= 10 ? this.end = 35 : this.end = (100 -   Math.floor(35 / length * 100));
    else
        return 100;//小于十条数据显示全部
    


option = 
  title: 
    left: 'center',
    text: 'Tootip and dataZoom on Mobile Device'
  ,
  legend: 
    top: 'bottom',
    data: ['Intention']
  ,
  xAxis: 
    type: 'time',
    inverse:true,//反向显示
    axisPointer: 
      value: '2016-10-7',
      snap: true,
      lineStyle: 
        color: '#7581BD',
        width: 2
      ,
      label: 
        show: true,
        formatter: function (params) 
          return echarts.format.formatTime('yyyy-MM-dd', params.value);
        ,
        backgroundColor: '#7581BD'
      ,
      handle: 
        show: true,
        color: '#7581BD'
      
    ,
    splitLine: 
      show: false
    
  ,
  yAxis: 
    type: 'value',
    axisTick: 
      inside: true
    ,
    splitLine: 
      show: false
    ,
    axisLabel: 
      inside: true,
      formatter: 'value\\n'
    ,
    z: 10
  ,
  grid: 
    top: 110,
    left: 15,
    right: 15,
    height: 160
  ,
  dataZoom: [
    
      type: 'inside',
      throttle: 50,
      start:0 ,
        end: computedPosition(1,100)
    
  ],
  series: [
    
      name: 'Fake Data',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      sampling: 'average',
      itemStyle: 
        color: '#0770FF'
      ,
      stack: 'a',
      areaStyle: 
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          
            offset: 0,
            color: 'rgba(58,77,233,0.8)'
          ,
          
            offset: 1,
            color: 'rgba(58,77,233,0.3)'
          
        ])
      ,
      data: data
    
  ]
;

终极版本:

let base = +new Date(2016, 9, 3);
let oneDay = 24 * 3600 * 1000;
let valueBase = 0;
let data = [];
for (var i = 1; i < 100; i++) 
  var now = new Date((base += oneDay));
  var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
  valueBase = i
  data.push([dayStr, valueBase]);


//alert(dayStr);
//每页显示10条,其他
function computedPosition(length,xArraylength) 
    if(xArraylength>=10)
        return length <= 10 ? this.end = 10 : this.end = (100 -   Math.floor(10 / length * 100));
    else
        return 100;//小于十条数据显示全部
    


option = 
  title: 
  ,
  tooltip: //显示提示文字
    trigger: 'axis',
    axisPointer: 
      type: 'line',
      label: 
        backgroundColor: '#6a7985'
      
    
  ,
  
  grid: 
    top: 110,
    left: 15,
    right: 15,
    height: 160
  ,
  legend: 
    top: 'bottom',
    data: ['Intention']
  ,
  xAxis: 
    type: 'time',
    show: false,//不显示刻度
    inverse:true,//反向显示
    axisPointer: 
      value: '2016-10-7',
      snap: false,
      lineStyle: 
        color: '#7581BD',
        width: 1
      ,
      label: 
        show: false,
        formatter: function (params) 
          return echarts.format.formatTime('yyyy-MM-dd', params.value);
        ,
        backgroundColor: '#7581BD'
      ,
    
  ,
  yAxis: 
    type: 'value',
    show: false,//不显示刻度
  ,
  dataZoom: [
    
      type: 'inside',
      throttle: 50,
      start:0 ,
      end: computedPosition(1,100)
    
  ],
  series: [
    
      name: 'Fake Data',
      type: 'line',
      smooth: true,
      label: //显示数值
        show: true,
        position: 'top'
      ,
     
      areaStyle: 
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          
            offset: 0,
            color: 'rgba(58,77,233,0.8)'
          ,
          
            offset: 1,
            color: 'rgba(58,77,233,0.3)'
          
        ])
      ,
      data: data
    
  ]
;

以上是关于echart曲线图从右往左显示,每屏显示固定的十条数据,其他的数据滚动显示的主要内容,如果未能解决你的问题,请参考以下文章

C语言 将一个正整数从右往左按位输出

写一个java程序 将一首古诗竖着排序从右往左读

JavaScript基础 lastIndexOf 从右往左查找 返回一个子字符串在原始字符串中的索引

Java中正则表达式如何实现从右往左匹配?

Leetcode练习(Python):栈类:第103题:二叉树的锯齿形层次遍历:给定一个二叉树,返回其节点值的锯齿形层次遍历。(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行)。

Leetcode练习(Python):栈类:第103题:二叉树的锯齿形层次遍历:给定一个二叉树,返回其节点值的锯齿形层次遍历。(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行)。