vue项目中v-chart的使用与flex布局 -- 记录

v-chart的使用

v-chart介绍

先来个图表文档：v-chart文档：https://v-charts.js.org/#/props
v-chart文档是这样介绍的：在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。
从介绍可以看出v-char装了echarts让图表使用起来更加快捷、方便。如果需要了解可以打开文章开头链接。
最近在写后台管理系统的时候使用到图表，搜索发现了v-chart，使用起来非常方便，但是我发现v-chart的一些图表属性并没有写清楚，目前使用使用到的是data-zoom属性配置，发现文档并没有说明。
为什么使用data-zoom，接下来看图表使用过程就知道：
首先，数据少时图表显示没什么问题，也不需要配置data-zoom，如下图：

但是数据很多时，会使图表非常拥挤，不仅不容易阅读，而且不美观，如下图

所以这个时候我们就有需求，能够让图表只显示一部分，所以就用到了data-zoom属性配置，data-zoom拆开意思就是数据移动（英文不好^ - ^），但是v-chart文档并没有写，所以只能是echarts文档查看配置了，只能说echarts好多配置，看的很累，好了，简单配置如下代码：

// 这是v-chart柱状图
<template>
  <div>
   //这里需要绑定data-zoom属性
    <ve-histogram :data="chartData" :data-zoom="dataZoom"></ve-histogram>
  </div>
</template>
<script>
export default {
  data() {
    this.dataZoom = [
      {
        type: 'slider',
        start: 0,
        end: 20
      },
      {
        type: 'inside',
        start: 0,
        end: 20
      }
    ]
    return {
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 }
        ]
      }
    }
  },
  mounted() {}
}
</script>

这里简单的解释一下dataZoom 中的slider和inside这两个的作用，配置slider，图标就会出现滚动条，可以使用鼠标拖动来查看数据，start开始显示数据的位置，这里是从 0%开始显示，end是20%就是结束位置，相差就是图表可视区域显示整体数据的20%。配置inside就是可以在图表区域内使用鼠标滚轮来缩放显示数据的范围。效果图如下：

当然，在echarts上有更多的配置，有需要更多配置的当然要去看echarts文档了，这个就是v-chart上没有写的配置了，记录一下。

v-chart配合flex布局，width: 0px;的重要性

通常后台管理系统都少不了flex布局，因为要动态适应页面嘛！但是在页面自动缩放后发现v-chart表没有随预期的缩放，页面变大图表就会出现一块空白，如下图：

刷新页面后，发现图表又正常了，充满父元素，但是，在页面缩小后，图表没有变小，出现了水平滚动条，如下图：

这里由于图表没有像预期一样缩小，导致父元素没有缩小，而造成没有适应布局，这个是由于flex布局引起的，解决方案是，将父元素width设置为0，我的代码如下：

// sass
.wrap{
	display: flex;
	.onLeft{
		flex: 0 0 300px;	
	}
	.onRight{
		flex: 1 1 auto;
		width: 0;
	}
}

这样的话，可以是父元素自适应布局，但是，图片长度会超出父元素，如下图：

到这里也只是解决了flex布局，子元素过长，造成的自适应问题，接着看。

监听v-chart缩放，自适应布局

首先需要一个插件来监听页面元素尺寸的变化。
插件element-resize-detector：https://www.npmjs.com/package/element-resize-detector
首先。安装这个插件

// npm包管理
npm install element-resize-detector

然后在vue对应的页面mounted中引入，就是在节点加载后，开始监听对应元素的变化

<template>
  <div ref="chartWrap">
    <ve-line :data="chartData" :data-zoom="dataZoom" :settings="chartSettings" height="300px" ref="chart"></ve-line>
  </div>
</template>

export default {
  mounted() {
  	// 获取图表节点和图表父元素节点
    const contall = this.$refs.chartWrap
    const chart = this.$refs.chart
    //引入插件
    const elementResizeDetectorMaker = require('element-resize-detector')
    const erd = elementResizeDetectorMaker({
      strategy: 'scroll'
    })
    // 监听父元素尺寸变化，来重置图表属性
    erd.listenTo(contall, function(element) {
      // 图表自带的重置函数
      chart.echarts.resize()
    })
  }
}

到这里图表就可以随页面的变化而变化了，由于动态图不会发，这里略过。。。。。。