<div id="chartsStudy"></div>
<script>
import * as echarts from "echarts";
export default{
methods:{
chartDom(){
var myChart = echarts.init(document.getElementById("chartsStudy"))
var xData = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
var option;
option = {
grid: {
left: "3%",
top: "16%",
right: "3%",
bottom: 0,
containLabel: true, // 为了防止数值过大而超出视图
},
tooltip:{},
xAxis:{},
yAxis:{},
dataZoom:[
{
xAxisIndex: 0, // 这里是从X轴的0刻度开始
show: false, // 是否显示滑动条,不影响使用
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom组件
startValue: 0, // 从头开始。
endValue: 4, // 一次性展示多少个。
}
]
}
if(option&&typeof option == "object"){
myChart.setOption(option)
// 定时自动滚动
this.timer = setInterval(() => {
if(xData.length <= 4){
clearInterval(this.timer)
return
}
if(option.dataZoom[0].endValue >= xData.length){
option.dataZoom[0].endValue = 4
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)
}
}
}
}
</script>
E charts x轴自动滚动展示---dataZoom
最新推荐文章于 2024-08-16 10:24:56 发布