近期平台接入了报表功能,因为前端平台使用的是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
},
其他文章,欢迎关注微信公众号测试架构师养成记。