一、需求：作為一個運維監測系統圖表，需要放到大屏上實時和刷新數據。大屏不可操作，即無鼠標點擊無交互邏輯。
這就帶來一個問題：當柱狀圖數據過多時，不能使用dataZoom滾動條進行滑動了。之前網上搜索有看到用計時器方法做的dataZoom自動滾動，到達最后一條柱子時清除計時器不再滑動。
個人感覺只能輪播一次效果不好，所以采取 timeLine方式。 官方文檔鏈接 ：https://echarts.apache.org/zh/option.html#https://echarts.apache.org/zh/option.html#timeline
二、不再解釋timeLime,直接上代碼
1.//渲染的容器
<div id="xxx111" style="height:700px;width:80%" v-show="isShow"></div>
2.圖表用到數據
data() {
return
{
xData:["20125", "25458", "14568", "52145", "12584", "36511","25481","78954","54771","12548","96584","25489","99999",'22321'],
y1Data:[18203, 23489, 29034, 104970, 131744, 154854,256582,356984,541284,125487,243658,364789,876832,773621],
y2Data:[19325, 23438, 31000, 121594, 134141, 145874,145632,254786,125641,214563,265321,352145,364732,563472] }; },
3.圖表配置項
init() {
// 基於准備好的dom，初始化echarts實例
var myChart = this.$echarts.init(document.getElementById("xxx111"));
// 大於一屏幕4個時，計算option個數及對應屬性（timeLineData、series、xData......）進行合並
let timeLineData =[];
let optionArr = [];
let len = Math.ceil(this.xData.length / 4);
for(var i = 1 ;i <=len;i++){
timeLineData.push(i);
let obj = {
title: {
text: '設備第' + i +'頁'
},
series: [
{ data:this.y1Data.splice(0,4) }, // 系列一的數據
{ data: this.y2Data.splice(0,4)}, // 系列二的數據
],
xAxis: {
type: "category",
data: this.xData.splice(0,4)
},
};
optionArr.push(obj)
}
console.log('optionArr',optionArr);
var option = {
baseOption:{
timeline: {
// `timeline.data` 中的每一項，對應於 `options`
// show:false,
autoPlay:true,
bottom:-23,
controlStyle:{
show:false
},
data: timeLineData
},
title: {
text: "設備異常圖"
},
legend: {
data: ["高溫", "cpu"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
data: this.xData
},
yAxis: {
type: "value",
boundaryGap: [0, 0.01]
},
series: [
{
name: "高溫",
type: "bar",
data: this.y1Data,
barWidth:'15%',
label: {
show: true,
position: 'top'
},
},
{
name: "cpu",
type: "bar",
data: this.y2Data,
barWidth:'15%',
label: {
show: true,
position: 'top'
},
},
],
},
options: optionArr,
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
},