监听echarts图表变化

最新推荐文章于 2024-03-22 10:24:38 发布

New globe

最新推荐文章于 2024-03-22 10:24:38 发布

阅读量765

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/w19981225/article/details/124444745

版权

该博客主要介绍了如何在Vue应用中利用Echarts库初始化并更新文章访问量的条形图。通过监听窗口resize事件实现图表的动态调整，并调用API获取行业文章阅读次数的数据，设置图表配置项，包括x轴、y轴、图例、提示框等，展示了文章访问量的排行情况。同时，使用element-resize-detector监听div容器的尺寸变化，确保图表在窗口缩放时能正确响应。

摘要由CSDN通过智能技术生成

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();
        });
      });
    },
}
}