做項目時遇到了一個這樣的echarts表，和正常的柱狀圖沒啥區(qū)別改鲫，但是有個需求就是需要每次只顯示10條數據器腋，然后定時滾動顯示其它，當滾動到最后一條數據钩杰，返回第一條一直循環(huán),這個怎么實現查了好多的例子都沒好的解決方案，還是在萬能的度娘找到了答案诊县，嘻嘻嘻~~
看一下設計圖
echarts.png
實際效果
autoPlay.gif
下面我們一起看一下解決方案
- echarts圖表創(chuàng)建
var myChart = echarts.init(document.getElementById('echarts'))
var KSMC = [100, 82, 80, 70, 65, 66, 60,54, 50, 42, 40]
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器讲弄，坐標軸觸發(fā)有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value'
}
],
dataZoom: [//滑動條
{
yAxisIndex: 0,//這里是從X軸的0刻度開始
show: false,//是否顯示滑動條依痊，不影響使用
type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件
startValue: 0, // 從頭開始避除。
endValue: 6 // 一次性展示6個。
}
],
yAxis: [
{
type: 'category',
inverse:true, //是否是反向坐標軸
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','測試','測試1','測試2','測試3'],
}
],
series: [
{
name: '直接訪問',
type: 'bar',
barWidth: '60%',
data: KSMC
}
]
};
myChart.setOption(option);
- 自動滾動效果是依賴于Echarts自帶滑動條實現的：
除了在option里加dataZoom屬性
還需要在綁定的地方這樣寫
//通過定時器的方式刷新胸嘁，改變statrValue瓶摆，endValue
setInterval(function () {
// 每次向后滾動一個，最后一個從頭開始性宏。
if (option.dataZoom[0].endValue == KSMC.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;
}
myChart.setOption(option);
}, 2000);
- 這樣就可以了
看源碼可知，這個方法有一個弊端，因為是捕獲當目前展示的最后一個數字所在位置為數組長度減一（最后一個）時疹娶，將展示數字的值換掉擂煞，從頭展示，我們目前設置的是展示10個酵使，但如果展示的數組個數小于設置的個數時荐吉，就永遠都捕獲不到了（展示數組個數小于設置個數也沒必要進行滾動顯示）
