11vue项目-echarts

最新推荐文章于 2024-09-07 19:48:06 发布

喵喵酱仔__

最新推荐文章于 2024-09-07 19:48:06 发布

阅读量103

点赞数

分类专栏： # echart 文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/qq_38210427/article/details/130128005

版权

echart 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1 销量趋势图标（折线图）

1.1 通用代码的编写

Trend.vue:

通用代码：直接复制即可

<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.$refs.trend_ref, 'chalk')
      const initOption = {}
      this.chartInstane.setOption(initOption)
    },
    async getData () {
      this.updateChart()
    },
    updateChart () {
      const dataOption = {}
      this.chartInstane.setOption(dataOption)
    },
    screenAdapter () {
      const adapterOption = { }
      this.chartInstane.setOption(adapterOption)
      this.chartInstane.resize()
    }
  }
}
</script>