echarts画圆柱图pictorialBar

最新推荐文章于 2025-09-21 23:43:28 发布

原创

最新推荐文章于 2025-09-21 23:43:28 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #圆柱图

本文介绍如何使用 ECharts 在 Vue 中创建动态图表，通过服务器数据获取并实时更新，同时实现屏幕适配。关键点包括图表标题自适应、pictorialBar 图形的配置与数据同步以及屏幕尺寸变化时的图表调整策略。

效果

在这里插入图片描述

源码

  data() {
   
   
    return {
   
   
      chartTitleFontSize: 0, // 图表标题文字大小
      chartInstance: null, // echart实例
      allData: null, // 服务器返回的数据
    }
  },
  computed: {
   
   
    titleStyle() {
   
   
      return {
   
   
        fontSize: `${
     
     this.chartTitleFontSize * 1.5}px`
      }
    }
  },
  mounted() {
   
   
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    // 在页面加载完成的时候，主动进行屏幕的适配
    this.screenAdapter()
  },
  destroyed() {
   
   
    // 在组件销毁的时候需要把监听器取消掉，防止内存的泄露
    window.removeEventListener('resize', this.screenAdapter)
  },
methods:{
   
   
// 初始化echartInstance对象
    initChart() {
   
   
      this.chartInstance = this.$echarts.init(this.$refs.chart_ref)
      // 对图表初始化配置的控制
      const initOption = {
   
   
        color: ['#00fff5'],
        grid: {
   
   
          top: "25%",
          left: "5%",
          bottom: "5%",
          right: "5%",
          containLabel: true
        },
        animation: false,
        xAxis: [
          {
   
   
            type: 'category',
            axisLabel: {
   
   
              interval: 0, // 坐标轴刻度标签的显示间隔
              color: '#739DC9',
              margin: