Vue统计图表的移动端适配技巧

1. 前言

在移动互联网的时代下，越来越多的用户习惯使用手机访问网页，尤其是应用内嵌的网页，因此对于一些移动端适应的图表库，如何将其适配到移动端是至关重要的。

本文旨在介绍在Vue框架下，如何将统计图表适配到移动端，并且能够非常好的适应不同屏幕尺寸的设备，为项目提供一种较为优秀的解决方案。

2. 移动端适配方法介绍

2.1 响应式设计

响应式设计是一种设计风格，主要解决网页能够在不同设备均呈现出良好的用户体验。如果采用响应式设计的方式来开发页面，就很容易将同一个页面，在不同屏幕下适应不同的布局布置。

通常响应式设计是依赖于媒体查询来实现的，我们可以通过不同的媒体查询，设定不同屏幕下的样式表，例如：

// 小于300px的屏幕

@media screen and (max-width: 300px) {
  // 样式表
}
// 大于300px且小于600px的屏幕
@media screen and (min-width: 301px) and (max-width: 600px) {
  // 样式表
}
// 大于600px的屏幕
@media screen and (min-width: 601px) {
  // 样式表
}

2.2 rem布局

rem是一种相对于根元素字体大小的单位，例如根元素的字体大小为16px，那么1rem就等于16px。通过rem布局，我们可以保证在不同屏幕尺寸下元素的大小随着屏幕宽度的变化而自适应。

在Vue项目中，我们可以通过设置html元素的字体大小来实现rem布局。例如，我们设置根元素的字体大小为16px：

html {

  font-size: 16px;
}

接着，我们就可以使用rem单位来定义其他元素的大小，例如：

div {

  width: 10rem;
  height: 5rem;
}

这样，div的宽度为屏幕宽度的10分之一，高度为屏幕宽度的5分之一。

3. 移动端适配实践

接下来，我们将通过案例来介绍如何在Vue框架下实现移动端适配。

3.1 安装echarts

首先，我们需要安装echarts库。可以通过npm方式来安装，例如：

npm install echarts --save

3.2 引入echarts

在Vue组件中，我们可以通过import方式来引入echarts库：

import echarts from 'echarts'

export default {
  data() {
    return {
      chartData: null
    }
  },
  methods: {
    initChart() {
      // 引入echarts
      var myChart = echarts.init(document.getElementById('chart'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.chartData)
    }
  }
}

3.3 实现移动端适配

接着，在组件的mounted钩子中，我们可以通过调用initChart方法来初始化图表，并且通过监听resize事件，实现图表的自适应，即随着屏幕宽度的变化，重新渲染图表。

export default {

  data() {
    return {
      chartData: null
    }
  },
  methods: {
    initChart() {
      // 引入echarts
      var myChart = echarts.init(document.getElementById('chart'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.chartData)
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.initChart)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initChart)
  }
}

最后，我们可以通过设置html元素的字体大小为屏幕宽度的十分之一，来实现rem布局的目的：

html {

  font-size: 10vw;
}

3.4 实现移动端手势操作

如果我们希望在移动端实现手势操作，例如缩放，拖拽等操作，可以通过引入echarts的touch模块来实现：

import 'echarts/lib/component/tooltip'

import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/markArea'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/graphic'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/yAxis'
import 'echarts/lib/component/xAxis'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/geo'
import 'echarts/extension/bmap/bmap'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/effectScatter'
import 'echarts/lib/chart/tree'
import 'echarts/lib/chart/lines'
import 'echarts/lib/chart/heatmap'
// 引入touch模块，实现手势操作
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/geo'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/axis'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/grid'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/effectScatter'
import 'echarts/lib/chart/tree'
import 'echarts/lib/chart/lines'
import 'echarts/lib/chart/heatmap'
import 'echarts/lib/chart/sunburst'
import 'echarts/lib/chart/graph'
import 'echarts/lib/chart/sankey'
import 'echarts/lib/chart/treemap'
import 'echarts/lib/chart/boxplot'
import 'echarts/lib/chart/candlestick'
import 'echarts/lib/chart/themeRiver'
import echarts from 'echarts'
export default {
  data() {
    return {
      chartData: null
    }
  },
  methods: {
    initChart() {
      // 引入echarts
      var myChart = echarts.init(document.getElementById('chart'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.chartData)
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.initChart)
    myChart.on('mousewheel', function(e) {
      e.event.preventDefault() //阻止视窗滚动
      let scrolldata = Math.round(e.event.wheelDelta / 5)
      if (scrolldata > 0) {
        //缩小
        myChart.dispatchAction({
          type: 'dataZoom',
          start: 80,
          end: 100
        })
      } else {
        //放大
        myChart.dispatchAction({
          type: 'dataZoom',
          start: 0,
          end: 100
        })
      }
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initChart)
  }
}

上述代码中，我们通过引入echarts的touch模块，并在mounted钩子中通过myChart.on方法来监听鼠标滚轮事件，来实现图表的放大缩小。

4. 总结

本文主要介绍了在Vue框架下，如何将统计图表适配到移动端，并且实现手势操作，让图表能够非常好的适应不同屏幕尺寸的设备。通过本文的介绍，希望能够为大家提供一种较为优秀的解决方案，使得图表能够更好地呈现在移动端设备上。