const elementResizeDetectorMaker = require("element-resize-detector");
export default {
data() {
return {
articleChartInstance: null,
}
},
mounted() {
this.$nextTick(() => {
// 初始化文章访问量数据图表
this.initarticleCharts();
window.addEventListener("resize", () => {
this.articleChartInstance.resize();
});
//--------------------------------
this.dynamicAdd();
this.DailyInfo();
this.IndustryRead();
this.Industry();
});
},
methods: {
// 文章访问量
initarticleCharts() {
this.articleChartInstance = echarts.init(this.$refs.articleOptions);
this.articleChartInstance.setOption(this.articleOption);
},
// 文章访问量数据表参数
articleOption() {
let that = this;
let option = {
title: {
text: "文章访问量",
x: "center",
textStyle: {
color: "#333",
fontStyle: "normal",
fontWeight: "normal",
fontSize: 12
}
},
tooltip: {
trigger: "item"
},
grid: {
top: 50,
left: "20%",
right: "10%",
bottom: "10%",
borderColor: "#E9E9E9"
},
legend: {
bottom: "bottom",
show: false
},
xAxis: {
show: true,
type: "value",
max: Math.max.apply(null, that.articleXData),
//去掉坐标轴
axisLine: {
show: false
},
//去掉刻度线
axisTick: {
show: true
}
},
yAxis: {
type: "category",
inverse: true, //y轴排序
data: that.articleYData,
show: true,
//去掉坐标轴
axisLine: {
show: false
},
//去掉刻度线
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#333333", // 字体颜色
fontSize: 12 // 刻度字体大小
}
}
},
series: [
{
color: "#4E80FF",
name: "排行榜",
data: that.articleXData,
type: "bar",
barWidth: 20,
itemStyle: {
normal: {
label: {
show: true,
position: "right",
textStyle: {
fontSize: 12,
color: "#595959"
}
}
}
}
}
]
};
return option;
},
// 行业文章阅读次数
IndustryRead() {
let params = {
top: 5
};
statisticRead(params).then(res => {
console.log("行业文章阅读次数-", res);
if (res.code == 10000) {
let listOne = [];
let listTwo = [];
res.data.forEach(item => {
listOne.push(item.indusName);
listTwo.push(item.readTimes);
});
this.articleYData = listOne;
this.articleXData = listTwo;
this.articleChartInstance.setOption(this.articleOption);
} else {
console.log("失败res-", res);
this.$message.error(res.msg);
}
});
},
// 监听div容器宽度变化
listenerDivResize() {
let eleRDT = elementResizeDetectorMaker();
eleRDT.listenTo(this.$refs.contents, () => {
this.$nextTick(() => {
this.visitChartInstance.resize();
this.expertChartInstance.resize();
this.articleChartInstance.resize();
});
});
},
}
}
监听echarts图表变化
最新推荐文章于 2024-03-22 10:24:38 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)