Echarts 响应式遇到的问题

image

Echarts 响应式遇到的问题

对于可视化的工具,大家经常用的就是 echarts 了,首先我们先引用一下 echart 工具

npm install echarts --save

下载好之后,我们就可以直接在我们的项目中进行使用啦,首先建立对应的文件,我们可以直接在 main.js 中直接引入,也可以直接在 单独的页面中引入

import echarts from 'echarts' // 这是在 main 中引入
Vue.prototype.$echarts = echarts

这样我们算是引入了所有的图表,有些我们用不到,这样就加大我们的文件,所以一般我们都是按需引入,需要用到折线就用折线

// 在我们的vue 文件中引入
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'

那么我们怎么使用呢,只需要在页面中写一个 div 标签即可,定义上类名,这个vue 文件作为我们的子组件,类名和id都是从我们的父组件传递过来不的

<div :id="id" :class="className" :style="{height: height, width: width}" />

<!--我们传递过来的值-->
props: {
    id: {
      type: String,
      default: 'chart'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
},
<!--我们需要在生命周期中生命初始化方法 mounted -->
this.init()

<!--在方法中写入-->
init () {
      this.charts = echarts.init(document.getElementById(this.id)) // 别忘了在 data 中先定义
      this.charts.setOption({
        title: {
          text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      })
    }
    <!--然后我们就可以在父组件中调用了-->
    
    <!--父组件的文件-->
<template>
  <div class="home">
    <v-echarts class="home-line-echart" id="home-line-echarts" width="100%" height="400px" />
  </div>
</template>

<script>
import Echarts from '@/components/Echarts/line.vue'
export default {
  data () {
    return {}
  },
  components: {
    'v-echarts': Echarts
  }
}
</script>

<style scoped lang="scss">
</style>

然后我们就可以看到我们的图表了

image

接下来就碰到我们说的问题了,当我们放大缩小浏览器的时候,会发现我们的图表并不会随着浏览器变化而变化,所以我就查阅了其他帖子上的一些方法,第一个是定义一个方法,监听浏览器的窗口变化

window.onresize = function () {
    // 子组件定义的 charts
    this.charts.resize()
}

我取查阅了一下 resize 这个方法,在我们的 echart 官网中有介绍( 链接 )

image

然后我把事假写入到了 生命周期中,发现方法并没有触发,然后想着定个定时器来触发时间
于是在生命周期中设置了定时器

setInterval(() => {
    this.charts.resize()
}, 1000 / 60)

然后这也也不是很管用,你会发现定时器谁一点一点的改变大小,而且也有一定的局限性,接着我又定义了 watch 监听,获取浏览器的敞口大小,然后调用方法,效果也不理想,我又在网上查阅了一些其他的东西, v-charts vue-echarts 等,一些封装的组件,也可以实现,作为一个有强迫症的人 就是想用 echarts 所以,又改了回来

window.addEventListener('resize', () => {
  this.charts.resize() // 多个图表，第一个图表
})

在我们的生命周期中写入 addEventListener 监听就好了

image