echart曲线图从右往左显示,每屏显示固定的十条数据,其他的数据滚动显示
Posted 绿叶清风
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echart曲线图从右往左显示,每屏显示固定的十条数据,其他的数据滚动显示相关的知识,希望对你有一定的参考价值。
- 测试地址
- 测试代码
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曲线图从右往左显示,每屏显示固定的十条数据,其他的数据滚动显示的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript基础 lastIndexOf 从右往左查找 返回一个子字符串在原始字符串中的索引
Leetcode练习(Python):栈类:第103题:二叉树的锯齿形层次遍历:给定一个二叉树,返回其节点值的锯齿形层次遍历。(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行)。
Leetcode练习(Python):栈类:第103题:二叉树的锯齿形层次遍历:给定一个二叉树,返回其节点值的锯齿形层次遍历。(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行)。