Echarts-柱状或折线或其他多数据图表自动向右滚动
目录
Echarts 柱状或折线或其他多数据图表自动向右滚动
主要就是dataZoom 定义展示多少条 然后在 setOption(XXX) 处 定义了延时器 更换他的dataZoom 展示 ;
setInterval(function () {
if (option.dataZoom[0].endValue == xLabel.length) {
option.dataZoom[0].endValue = 6;
option.dataZoom[0].startValue = 0;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
}
that.mychart2.setOption(option,true);
},2000)
具体代码如下
myEchartsTwo(xLabel,goToSchool,goOutSchool) {
let that = this
that.mychart2 = echarts.init(that.$refs.echart2ref);
let option = {
backgroundColor: '',
dataZoom: [
//滑动条
{
xAxisIndex: 0, //这里是从X轴的0刻度开始
show: false, //是否显示滑动条，不影响使用
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 6, // 一次性展示6个。
},
],
tooltip: {
trigger: 'axis',
backgroundColor:'transparent',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(126,199,255,0)' // 0% 处的颜色
}, {
offset: 0.5,
color: 'rgba(126,199,255,1)' // 100% 处的颜色
}, {
offset: 1,
color: 'rgba(126,199,255,0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
},
formatter: (p) => {
let dom = `<div style="width: 150px;
height: 100px;;color:#fff;position: relative;">
<div style="padding: 4px 8px 4px 14px;display: flex;
justify-content: center;
align-items: center;
flex-direction: column;position: relative;z-index: 1; background-color:#000">
<div style="margin-bottom: 4px;width:100%;display:${p[0]?'flex':'none'};justify-content:space-between;align-items:center;">
<span style="font-size:14px;color:#7ec7ff;">${p[0]?p[0].seriesName:''}</span>
<span style="font-size:14px;color:#fff;">${p[0]?p[0].data+'mb/s':''}</span>
</div>
<div style="width:100%;height:100%;display:${p[1]?'flex':'none'};justify-content:space-between;align-items:center;">
<span style="font-size:14px;color:#7ec7ff;">${p[1]?p[1].seriesName:''}</span>
<span style="font-size:14px;color:#fff;">${p[1]?p[1].data+'mb/s':''}</span>
</div>
<div style="width:100%;height:100%;display:${p[2]?'flex':'none'};justify-content:space-between;align-items:center;">
<span style="font-size:14px;color:#7ec7ff;">${p[2]?p[2].seriesName:''}</span>
<span style="font-size:14px;color:#fff;">${p[2]?p[2].data+'mb/s':''}</span>
</div>
</div>
</div>`
return dom
}
},
legend: {
align: "left",
// right: '10%',
top:'0%',
type:'plain',
textStyle:{
color:'#bcbcbc',
fontSize:12
},
// icon:'rect',
itemGap:20,
itemWidth:8,
icon:'circle',
data: [
{
name: '上行流量'
},
{
name: '下行流量'
},
]
},
grid: {
top: '15%',
left: '10%',
right: '10%',
bottom: '15%',
// containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: { //坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: '#535353'
},
},
axisLabel: { //坐标轴刻度标签的相关设置
textStyle: {
color: '#bcbcbc',
padding: 10,
fontSize: 14
},
formatter: function(data) {
return data
}
},
splitLine: {
show: false,
lineStyle: {
color: '#36455d'
},
},
axisTick: {
show: false,
},
data: xLabel
}],
yAxis: [{
name: '',
nameTextStyle: {
color: "#bcbcbc",
fontSize: 14,
padding: 10
},
min: 0,
splitLine: {
show: true,
lineStyle: {
color: '#383838'
},
},
axisLine: {
show: false,
lineStyle: {
color: "#233653"
}
},
axisLabel: {
show: true,
textStyle: {
color: '#bcbcbc',
padding: 10
},
formatter: function(value) {
if (value === 0) {
return value + 'mb/s'
}
return value + 'mb/s'
}
},
axisTick: {
show: false,
},
}],
series: [{
name: '上行流量',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: false,
lineStyle: {
normal: {
width: 1,
color: "#22a5f1", // 线条颜色
},
borderColor: '#22a5f1',
},
itemStyle: {
color: "#22a5f1",
borderColor: "#646ace",
borderWidth: 1
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(0, 123, 255, 0.3)" // 起始颜色为淡蓝色
},
{
offset: 1,
color: "rgba(0, 123, 255, 0)" // 结束颜色透明
}
], false),
shadowColor: 'rgba(0, 123, 255, 0.1)',
shadowBlur: 20
}
},
data: goToSchool
}, {
name: '下行流量',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: false,
lineStyle: {
normal: {
width: 1,
color: "#1aa034", // 线条颜色
},
borderColor: '#1aa034',
},
itemStyle: {
color: "#1aa034",
borderColor: "#646ace",
borderWidth: 1
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(0, 255, 0, 0.3)" // 起始颜色为淡绿色
},
{
offset: 1,
color: "rgba(0, 255, 0, 0)" // 结束颜色透明
}
], false),
shadowColor: 'rgba(0, 255, 0, 0.1)',
shadowBlur: 20
}
},
data: goOutSchool
}]
};
that.mychart2.setOption(option);
setInterval(function () {
if (option.dataZoom[0].endValue == xLabel.length) {
option.dataZoom[0].endValue = 6;
option.dataZoom[0].startValue = 0;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
}
that.mychart2.setOption(option,true);
},2000)
window.addEventListener('resize', function () {
that.mychart2.resize();
});
},