initData() {
var that = this;
if (!that.lineChartData) return;
this.option = {
grid: {
containLabel: true,
left: 12,
top: 45,
right: 40,
bottom: 0,
},
dataZoom: [
{
type: "slider",
show: false,
realtime: true,
startValue: 0,
endValue: 7, // 初始显示index0-30的数据,可根据你的数据量设置
filterMode: "none",
},
],
xAxis: {
type: "category",
axisLine: {
show: true,
lineStyle: {
color: "rgba(172, 175, 173, .6)",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
textStyle: {
color: "#fff",
},
margin: 15,
},
data: that.lineChartData.xData,
},
yAxis: [
{
type: "value",
name: that.lineChartData.unit,
nameTextStyle: {
color: "#ffffff",
padding: [2, 30, 2, 0],
},
// scale: true,
splitNumber: 2,
axisLabel: {
textStyle: {
color: "#fff",
},
margin: 10,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(172, 175, 173, .6)",
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed", //背景线为虚线
color: "rgba(172, 175, 173, .1)", //左侧显示线
},
},
data: [],
},
],
series: [
{
name: "123",
type: "line",
data: that.lineChartData.data,
barWidth: 6,
itemStyle: {
normal: {
color: "rgba(0, 214, 237, 1)",
barBorderRadius: [10, 10, 10, 10],
},
},
areaStyle: {
//折线图覆盖面积
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "rgba(0, 0, 0, 0)",
},
{
offset: 1,
color: "rgba(0, 214, 237, 0.69)",
},
]), //渐变色
},
},
],
};
var startNumber = 0;
var xAxisDatalen = that.lineChartData.data.length;
var len = 7; //这里请注意
timer && clearInterval(timer);
timer = setInterval(function () {
if (startNumber === xAxisDatalen - len) {
startNumber = 0;
}
//myChart.dispatchAction({
//type: 'dataZoom',
//startValue: startNumber,
//endValue: startNumber + len,
//});
that.option.dataZoom[0].startValue = startNumber;
that.option.dataZoom[0].endValue = startNumber + len;
startNumber++;
that.refreshChart();
}, 2000);
},
06-16
1719