v-charts细节调整之实战

近期平台接入了报表功能，因为前端平台使用的是vue，于是乎这块选择引入v-charts。期间因数据的种类各不相同，这篇文章针对这些细节处理做一个整理。

v-charts

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。v-charts的使用也非常的方便，大家可以阅读官方的文档。
指路文档：https://v-charts.js.org/#/

实战

1、坐标轴数据倾斜

因为有些数据长度过长，且数据过多，无法显示完全。加入下面这个配置，可以使你的数据显示时倾斜45°。

<ve-line :data="cpuData" :extend="cpuExtend"></ve-line>
<script>
  export default {
     data() {
       return{
         cpuExtend: { 'xAxis.0.axisLabel.rotate': 45}
       }
     }
  }
</script>

2、坐标轴数据倾斜导致两边数据部分缺失

因为倾斜，且数据过长，可能导致最左或者左右的数据被截掉部分，可加入grid参数，使主体部分向左或向右偏移，从而让两边数据显示完整。

<ve-line :data="cpuData" :extend="cpuExtend"></ve-line>
<script>
  export default {
     data() {
       return{
         cpuExtend: { 'xAxis.0.axisLabel.rotate': 45,'grid.left': '8%'}
       }
     }
  }
</script>

3、数据过多，支持上下和左右滑块

如果数据过多，或者异常数据导致数据间差异过大显示不全，可以通过如下代码，在图片的上下左右都加上相应的滑块，保证能详细观察到每个数据。

<ve-line :data="cpuData" :data-zoom="dataZoom" ></ve-line>
<script>
  export default {
     data() {
       return{
         dataZoom:[{type: 'slider',show: true, yAxisIndex: [0],left: '93%',start: 30,end: 80},{type: 'inside',show: true, yAxisIndex: [0],start: 30,end: 90},{start: 0,end: 100,height: 20}],
       }
     }
  }
</script>

4、数据过长，数据换行

可以通过对应的正则表达式，在数据需换行的地方加入换行符。

   wrapLableText(value) {
                var ret = "";//拼接加\n返回的类目项
                if(value.search("/")>-1){
                    //通过正则表达式查找第一个/，例如https://www.baidu.com/hello/world,查找到com后第一个/
                    var pos = value.search(/[a-z]\/[a-z]/)
                    ret = value.slice(0,pos+1) + "\n" + value.slice(pos+1)
                    return ret
                }
                return value
            },

其他文章，欢迎关注微信公众号测试架构师养成记。