使用
<div id="charts_1" @mouseenter="echarStop" @mouseleave="echarStrat" />
调用
charts1() {
this.myChart1 = this.$echarts.init(document.getElementById("charts_1"));
let data = {
value: [],
name: [],
};
for (let i = 0; i < 31; i++) {
data.name.push(i);
data.value.push(i * 10 * Math.random());
}
console.log(data);
this.option1 = {
xAxis: {
type: "category",
data: data.name,
},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "slider", //隐藏或显示（true）组件
show: true,
backgroundColor: "rgb(19, 63, 100)", // 组件的背景颜色。
fillerColor: "rgb(16, 171, 198)", // 选中范围的填充颜色。
borderColor: "rgb(19, 63, 100)", // 边框颜色
// yAxisIndex: [0, 1], //控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
showDetail: true, //是否显示detail，即拖拽时候显示详细数值信息
startValue: 0, //初始开始值
endValue: 12, //初始结束值
filterMode: "empty",
width: "70%", //滚动条宽度
height: 10, //滚动条高度
bottom: "bottom", //滚动条显示位置 center bottom 也可以number
zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小
handleSize: 0, //控制手柄的尺寸
},
{
//没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// yAxisIndex: [0, 1], //控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
zoomOnMouseWheel: false, //滚轮是否触发缩放
moveOnMouseMove: true, //鼠标滚轮触发滚动
moveOnMouseWheel: true,
},
],
series: [
{
data: data.value,
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
};
this.myChart1.setOption(this.option1, true);
this.echarStop();
this.echarStrat();
},
echarStrat() {
this.IntervalChar1 = setInterval(() => {
// 每次向后滚动一个，最后一个从头开始。
if (this.option1.dataZoom[0].endValue == 31) {
this.option1.dataZoom[0].endValue = 12;
this.option1.dataZoom[0].startValue = 0;
} else {
this.option1.dataZoom[0].endValue =
this.option1.dataZoom[0].endValue + 1;
this.option1.dataZoom[0].startValue =
this.option1.dataZoom[0].startValue + 1;
}
this.myChart1.setOption(this.option1, true);
}, 3000);
},
echarStop() {
clearInterval(this.IntervalChar1);
},
