echarts柱状图滚动效果
2022-04-01 本文已影响0人
jesse28
父组件:
<div class="column-center-one-brigade" style="position:relative;top:0">
<echarts1 ref="echarts" :range=4 :option="option1" auto vertical></echarts1>
</div>
options1的数据写在计算属性
computed:{
option1() {
if (!this.brigadeCaseList) return {};
let y1AxisData1 = [];
let y1AxisData2 = [];
let series1Data1 = [];
let series1Data2 = [];
this.brigadeCaseList.map((row) => {
y1AxisData1.push(row.orgName);
let num =
"{num1|" + row.doCaseCount + "} / {num2|" + row.toFinishCount + "}";
y1AxisData2.push(num);
series1Data1.push(row.doCaseCount);
series1Data2.push(row.toFinishCount);
});
let option = {
color: [
{
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#1675F5", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(22, 117, 245, 0.1) ", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
{
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(22, 241, 241, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(22, 241, 241, 0.1) ", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
],
tooltip: {
backgroundColor: "rgba(0, 0, 0, 0.3)",
textStyle: {
color: "#fff",
},
axisPointer: {
type: "line",
},
},
legend: {
show: false,
top: 20,
right: 16,
icon: "rect",
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 14,
color: "rgba(176, 209, 217, 1)",
},
},
grid: {
top: 22,
left: 16,
right: 32,
bottom: 10,
containLabel: true,
},
xAxis: [
{
type: "value",
axisLine: {
show: true,
lineStyle: {
width: 1,
color: "rgba(255, 255, 255, 0.08)",
},
},
axisLabel: {
fontSize: 16,
color: "rgba(168, 168, 168, 1)",
},
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.08)",
type: "dashed",
},
},
},
],
yAxis: [
{
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 18,
color: "rgba(199, 204, 205, 1)",
margin: 0,
lineHeight: 10,
inside: true,
padding: [0, 0, 18, 0],
verticalAlign: "bottom",
},
data: y1AxisData1,
},
{
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 18,
color: "rgba(255, 255, 255, 1)",
margin: 0,
lineHeight: 10,
inside: true,
padding: [0, 10, 18, 0],
verticalAlign: "bottom",
rich: {
num1: {
fontSize: 18,
color: "rgba(44, 109, 238, 1)",
},
num2: {
fontSize: 18,
color: "rgba(0, 242, 242, 1)",
},
},
},
data: y1AxisData2,
},
],
series: [
{
name: "已办案件",
type: "bar",
stack: "total",
barWidth: 10,
emphasis: {
focus: "series",
},
data: series1Data1, //[20,30,40,50] 这里的数据格式
},
{
name: "在办案件",
type: "bar",
stack: "total",
barWidth: 10,
emphasis: {
focus: "series",
},
data: series1Data2, //[20,30,40,50] 这里的数据格式
},
],
};
return option;
},
}
子组件：
<template>
<div class="charts" ref="chart" @mouseenter="mouseenter" @mouseleave="mouseleave"></div>
</template>
<script>
export default {
name: "layout",
components: {},
props: {
option: {
type: Object,
default: () => null,
},
// 是否自动滚动
auto: {
type: [Boolean, String],
default: false,
},
/*
auto必须为 true，这个属性才有效
滚动条在 右侧还是在 底部；默认在底部，veritical 表示在右侧
*/
vertical: {
type: [Boolean, String],
default: false,
},
// 一屏滚动几条数据
range: {
type: Number,
default: 6,
},
},
watch: {
option: function (newV, oldV) {
if (this.first) return;
this.first = true;
this.init();
},
},
computed: {},
data() {
return {
myChart: null,
startValue: 0,
timer: null,
maxLen: 0,
ms: 1000,
first: false,
};
},
methods: {
mouseenter() {
if (this.auto && this.maxLen > this.range) {
if (this.maxLen == this.range) {
return;
}
clearInterval(this.timer);
this.timer = null;
}
},
mouseleave() {
if (this.auto && this.maxLen > this.range) {
if (this.maxLen == this.range) {
return;
}
this.loopScroll();
}
},
loopScroll() {
clearInterval(this.timer);
this.timer = setInterval(() => {
this.startValue++;
let endValue = this.startValue + this.range - 1;
if (this.range == 0) {
console.log("设置为0是不合适的yo");
endValue = this.startValue + 4;
}
this.option.dataZoom.startValue = this.startValue;
this.option.dataZoom.endValue = endValue;
this.myChart.setOption(this.option);
if (endValue >= this.maxLen) {
this.startValue = -1;
}
}, this.ms);
},
init() {
if (this.option) {
setTimeout(() => {
if (JSON.stringify(this.option) == "{}") {
this.myChart.setOption({
title: {
text: "",//暂无数据
textStyle: {
color: "#FFF",
fontSize: 20,
fontWeight: 200,
},
top: "middle",
left: "center",
},
xAxis: {
show: false,
},
yAxis: {
show: false,
},
});
} else {
if (this.auto) {
// 这样取值可能会有问题 2022-03-01，sushuier
this.maxLen = this.option.series[0].data.length;
if (this.maxLen > this.range) {
this.option.dataZoom = this.getDataZoom();
}
}
this.myChart.setOption(this.option);
if (this.auto && this.maxLen > this.range) {
this.loopScroll();
}
}
this.myChart.hideLoading();
}, 500);
}
},
getDataZoom() {
let dataZoom = {};
if (this.auto) {
// 这样取值可能会有问题 2022-03-01，sushuier
this.maxLen = this.option.series[0].data.length;
if (this.maxLen > this.range) {
this.startValue = 0;
let endValue = this.startValue + this.range - 1;
if (this.range == 0) {
console.log("设置为0是不合适的yo");
endValue = this.startValue + 4;
}
dataZoom = {
type: "slider",
orient: "horizontal", // horizontal | vertical
fillerColor: "#2d6358",
handleSize: 0,
startValue: this.startValue,
endValue: endValue,
brushSelect: false,
backgroundColor: "transparent",
dataBackground: {
lineStyle: {
opacity: 0,
},
areaStyle: {
opacity: 0,
},
},
textStyle: {
fontSize: 0,
},
borderColor: "transparent",
};
if (this.vertical) {
this.option.grid.right = 8;
dataZoom.orient = "vertical";
dataZoom.width = 5;
dataZoom.right = 8;
} else {
this.option.grid.bottom = 8;
dataZoom.height = 10;
dataZoom.bottom = 10;
}
this.option.dataZoom = dataZoom;
}
}
return dataZoom;
},
setOption() {
this.myChart.showLoading({
text: "加载中，请稍等",
maskColor: "rgba(5, 12, 16, .95)",
textColor: "#fff",
fontSize: 40,
color: "rgba(255, 255, 255, 1)",
spinnerRadius: 30,
});
let option = this.option;
setTimeout(() => {
if (JSON.stringify(this.option) == "{}") {
this.myChart.setOption({
title: {
text: "暂无数据",
textStyle: {
color: "#FFF",
fontSize: 20,
fontWeight: 400,
},
top: "middle",
left: "center",
},
xAxis: {
show: false,
},
yAxis: {
show: false,
},
});
} else {
if (this.auto) {
// 这样取值可能会有问题 2022-03-01，sushuier
this.maxLen = this.option.series[0].data.length;
if (this.maxLen > this.range) {
this.option.dataZoom = this.getDataZoom();
}
}
this.myChart.setOption(this.option, {
notMerge: true,
});
if (this.auto && this.maxLen > this.range) {
this.loopScroll();
}
}
this.myChart.hideLoading();
}, 500);
},
},
mounted() {
let dom = this.$refs.chart;
this.myChart = this.$echarts.init(dom);
// this.myChart.showLoading({
// text: "加载中，请稍等",
// maskColor: "rgba(5, 12, 16, .95)",
// textColor: "#fff",
// fontSize: 40,
// color: "rgba(255, 255, 255, 1)",
// spinnerRadius: 30,
// });
this.init();
let iThis = this;
window.addEventListener("resize", function () {
if (iThis.myChart) {
iThis.myChart.resize();
}
});
},
destroyed() {
clearInterval(this.timer);
this.timer = null;
},
};
</script>
<style scoped>
.charts {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden; /*echarts在初始化的时候 读取高度时，遇到小数会向上取整，导致容器出现滚动条，高度计算会有问题*/
}
</style>
