echarts图表滚动（vue2.0，echarts3.8.0 ）
·
1、柱状图自动滚动、鼠标移入停止滚动，移除自动滚动。（echarts版本可以升级 ）
<template>
<!-- 系统性能-图 -->
<div v-loading="loading">
// 正常柱状图
<el-row :gutter="24" style="margin: 0; padding: 0">
<el-col :span="12" style="margin: 0; padding: 0">
<div ref="verticalCharts" :style="{ height: contentHeight }" />
</el-col>
// 水平柱状图
<el-col :span="12" style="margin: 0; padding: 0">
<div ref="levelCharts" :style="{ height: contentHeight }" />
</el-col>
</el-row>
</div>
</template><script>
import * as echarts from "echarts";
export default {
props: {
alarmEcharts: {
type: Object,
default: () => {
return {};
},
},
},
data() {
return {
loading: false,
contentHeight: "",
windowHeight: window.innerHeight,
levelScrollInterval: null,
verticalScrollInterval: null,
verticalCharts: null,
levelCharts: null,
};
},
watch: {
// 监听 屏幕高度
windowHeight: {
depp: true,
immediate: true,
handler(newVal) {
if (newVal >= 1020) {
this.contentHeight = Math.floor((newVal - 450) / 2) + "px";
} else if (newVal < 1020) {
this.contentHeight = 350 + "px";
}
},
},
},
created() {
this.$nextTick(() => {
this.getContainer();
});
},
destroyed() {
if (this.verticalScrollInterval) {
clearInterval(this.verticalScrollInterval);
}
if (this.levelScrollInterval) {
clearInterval(this.levelScrollInterval);
}
},
mounted() {
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
handleResize() {
this.windowHeight = window.innerHeight;
},
getContainer(CURR, MUR, DSUR) {
const _this = this;
this.verticalCharts = echarts.init(this.$refs.verticalCharts);
this.levelCharts = echarts.init(this.$refs.levelCharts);
const xData = [
"11:12",
"11:13",
"11:14",
"11:15",
"11:16",
"11:17",
"11:18",
"11:19",
"11:20",
"11:21",
"11:22",
"11:23",
"11:24",
"11:25",
"11:26",
"11:27",
"11:28",
"11:29",
"11:30",
"11:31",
"11:32",
"11:33",
"11:34",
"11:35",
"11:36",
"11:37",
"11:38",
"11:39",
"11:40",
"11:41",
"11:42",
"11:43",
"11:44",
"11:45",
"11:46",
"11:47",
"11:48",
"11:49",
"11:50",
];
const tbData = [
99, 4, 56, 45, 23, 54, 67, 45, 34, 23, 12, 56, 21, 23, 4, 56, 45, 23,
54, 67, 45, 34, 23, 12, 56, 21, 23, 4, 56, 45, 23, 54, 67, 45, 34, 23,
12, 56, 100,
];
const yData = [
"测试1",
"测试2",
"测试3",
"测试4",
"测试5",
"测试6",
"测试7",
"测试8",
"测试9",
"测试10",
];
const xqData = [45, 23, 54, 67, 45, 34, 23, 12, 56, 21];
// 垂直柱状图
const vertical = {
title: {
top: "5%",
left: "3%",
text: "告警次数",
textStyle: {
fontWeight: 550,
fontSize: 14, //主题文字字体大小，默认为18px
color: "#000",
},
},
grid: {
left: "5%",
right: "5%",
bottom: "6%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
shadowStyle: {
color: "rgba(0, 0, 0, 0.3)", // 设置阴影颜色
opacity: 0.2, // 设置阴影透明度
},
},
formatter: "告警时间：" + "{b} <br> 告警次数：{c} 次",
},
legend: {
itemWidth: 8,
itemHeight: 8,
// itemGap: 50,
top: -5,
formatter: (name) => {
return name;
},
textStyle: {
fontSize: 14,
color: "#000",
padding: 5,
},
},
dataZoom: [
{
show: false, //是否显示滑动条，不影响使用
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 30, // 一次性展示30个。
},
],
xAxis: {
data: xData,
axisTick: {
alignWithLabel: true,
},
axisLabel: {
rotate: 45, // 将标签文字以45度倾斜展示
},
},
yAxis: {
type: "value",
},
series: [
{
//配置第1个图表的数据系列
name: "数据",
type: "bar",
barWidth: 15, // 柱子宽度为20
data: tbData,
smooth: true,
lineStyle: {
normal: {
color: "#409EFF",
},
},
itemStyle: {
normal: {
color: "#409EFF",
},
},
label: {
// 设置label属性
normal: {
show: true, // 显示标签
position: "top", // 在右侧显示
},
},
},
],
};
// 水平柱状图
const level = {
title: {
top: "5%",
left: "3%",
text: "告警类别",
textStyle: {
fontWeight: 550,
fontSize: 14, //主题文字字体大小，默认为18px
color: "#000",
},
},
grid: {
left: "1%",
right: "6%",
bottom: "2%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
shadowStyle: {
color: "rgba(0, 0, 0, 0.3)", // 设置阴影颜色
opacity: 0.1, // 设置阴影透明度
},
},
formatter: "告警名称：" + "{b} <br> 告警次数：{c} 次",
},
legend: {
show: false,
itemWidth: 25,
itemHeight: 25,
itemGap: 50,
top: 0,
formatter: (name) => {
return name;
},
textStyle: {
fontSize: 14,
color: "#ffffff",
padding: 10,
},
},
dataZoom: [
{
yAxisIndex: [0], //这里是从X轴的0刻度开始
show: false, //是否显示滑动条，不影响使用
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 5, // 一次性展示5个。
},
{
yAxisIndex: [0, 1], //这里是从X轴的0刻度开始
show: false, //是否显示滑动条，不影响使用
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 5, // 一次性展示5个。
},
],
xAxis: [{ type: "value", show: false }], //y轴为值类型
yAxis: [
{
show: false,
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: true,
//margin: 30
},
},
pdaaing: [5, 0, 0, 0],
postion: "right",
data: yData,
},
{
type: "category",
inverse: true, //是否反转
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
inside: false,
textStyle: {
color: "#000",
fontSize: "14",
align: "right",
padding: [0, -40, 0, 0],
},
formatter: function (val) {
return "{a|" + val + "} {f|次}";
},
rich: {
a: {
color: "#000",
fontSize: 14,
},
f: {
color: "#000",
fontSize: 14,
},
},
},
data: xqData,
},
],
series: [
{
//配置第1个图表的数据系列
name: "数据",
type: "bar",
barWidth: 15, // 柱子宽度为20
data: xqData,
smooth: true,
lineStyle: {
normal: {
color: "#409EFF",
},
},
itemStyle: {
normal: {
color: "#409EFF",
barBorderRadius: [0, 10, 10, 0], // 左侧不圆角，右侧圆
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(244,164,96,0.5)",
},
{
offset: 1,
color: "rgba(244,164,96,1)",
},
]),
},
},
label: {
// 设置label属性
normal: {
show: true, // 显示标签
position: [0, "-15px"], // 在右侧显示
formatter: function (a, b) {
return a.name;
},
},
},
},
],
};
// 设置定时滚动
this.verticalEcharts(vertical, xData);
this.levelEcharts(level, yData);
// 鼠标移入停止滚动
this.verticalCharts.on("mouseover", function () {
if (_this.verticalScrollInterval) {
clearInterval(_this.verticalScrollInterval);
}
});
// 鼠标移出继续滚动
this.verticalCharts.on("globalout", function () {
_this.verticalEcharts(vertical, xData);
});
this.levelCharts.on("mouseover", function () {
if (_this.levelScrollInterval) {
clearInterval(_this.levelScrollInterval);
}
});
// 鼠标移出继续滚动
this.levelCharts.on("globalout", function () {
_this.levelEcharts(level, yData);
});
this.verticalCharts.setOption(vertical);
this.levelCharts.setOption(level);
// 根据缩放 改变宽度
window.addEventListener("resize", () => {
this.verticalCharts.resize();
this.levelCharts.resize();
});
},
// 垂直柱状图 滚动
verticalEcharts(vertical, xData) {
const _this = this;
if (this.verticalScrollInterval) {
clearInterval(this.verticalScrollInterval);
}
this.verticalScrollInterval = setInterval(() => {
if (vertical.dataZoom[0].endValue == xData.length - 1) {
vertical.dataZoom[0].startValue = 0;
vertical.dataZoom[0].endValue = 29;
} else if (vertical.dataZoom[0].endValue < xData.length) {
vertical.dataZoom[0].endValue = vertical.dataZoom[0].endValue + 1;
vertical.dataZoom[0].startValue = vertical.dataZoom[0].startValue + 1;
}
_this.verticalCharts.setOption(vertical);
}, 1500);
},
// 水平柱状图 滚动
levelEcharts(level, yData) {
const _this = this;
if (this.levelScrollInterval) {
clearInterval(this.levelScrollInterval);
}
this.levelScrollInterval = setInterval(() => {
if (level.dataZoom[0].endValue == yData.length - 1) {
level.dataZoom[0].startValue = 0;
level.dataZoom[0].endValue = 4;
} else if (1 < level.dataZoom[0].endValue < yData.length) {
level.dataZoom[0].endValue = level.dataZoom[0].endValue + 1;
level.dataZoom[0].startValue = level.dataZoom[0].startValue + 1;
}
if (level.dataZoom[1].endValue == yData.length - 1) {
level.dataZoom[1].startValue = 0;
level.dataZoom[1].endValue = 4;
} else if (1 < level.dataZoom[1].endValue < yData.length) {
level.dataZoom[1].endValue = level.dataZoom[1].endValue + 1;
level.dataZoom[1].startValue = level.dataZoom[1].startValue + 1;
}
_this.levelCharts.setOption(level);
}, 1500);
},
},
};
</script>
2、视屏实例
柱状图自动滚动、鼠标移入停止滚动，移除自动滚动。
长江两岸老火锅，共聚山城开发者！We Want You！
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)