vue2使用echarts通用代码结构

最新推荐文章于 2024-06-14 17:33:38 发布

奋斗者格洛古

最新推荐文章于 2024-06-14 17:33:38 发布

阅读量371

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_57005111/article/details/136451352

版权

文章介绍了如何在Vue项目中使用ECharts库创建动态图表，包括初始化图表实例、异步获取数据并更新图表，以及响应窗口大小变化进行屏幕适配的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="com-container">
    <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstane: null,
      allData: null,
    }
  },
  mounted() {
    this.initChart()//初始化实例
    this.getData()//获取数据
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter() // 在页面加载完成的时候, 主动进行屏幕的适配
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)//取消监听事件
  },
  methods: {
    // 初始化模块
    initChart() {
      /*
         this.chartInstane = this.$echarts.init(this.$ref.trend_ref)//实例化
         const initOption = {}                                      //设置配置项
         this.chartInstane.setOption(initOption)                    //把配置项给实力对象
      */
      this.chartInstane = this.$echarts.init(this.$ref.trend_ref)
      const initOption = {}
      this.chartInstane.setOption(initOption)
    },
    //获取数据模块
    async getData() {
      // await this.$HTMLOutputElement.get()
      // 对allData进行赋值
      this.updateChart()//对数据进行处理
    },
    // 更新数据模块
    updateChart() {
      const dataOption = {}
      this.chartInstane.setOption(dataOption)
    },
    // 更新对应分辨率模块
    screenAdapter() {
      const adapterOption = {}
      this.chartInstane.setOption(adapterOption)
      this.chartInstane.resize()
    },

  },
}
</script>

<style lang="less" scoped>
.com-container {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
</style>