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()
})
}
}
网友评论