vue基于v-charts封装双向条形图的实现代码

注意这里一定要把其中一项的值设置为负数,否则无法显示到左边一栏

设置完数据我们可以先看一眼效果:
　　

　　这一点。chartSettings={ 　　栈:{ 　　xxx:['收入”、“支”出) 　　} 　　}; 　　 　　

查看官方文档,我们来理解一下这个属性

系列[我]栏。堆栈字符串
　　数据堆叠,同个类目轴上系列配置相同的叠加值可以堆叠放置。 　　

也就是说,设置了这个属性,我们可以让两个条形图合并为一个
　　

　　

如果不考虑正负问题,堆叠即可实现下面这个效果
　　

　　

　　这一点。chartSettings={ 　　标签:{ 　　正常:{ 　　显示:没错, 　　格式化程序:params=比;{ 　　返回“$ {params.seriesName}: $ {Math.abs (params.value)} '; 　　} 　　} 　　} 　　}; 　　 　　

坐标轴数值修改也是一个道理

　　 　　 　　afterConfig(选项){ 　　options.xAxis [0]。axisLabel={ 　　格式化程序:功能(价值){ 　　返回Math.abs(价值); 　　}//显示的数值都取绝对值 　　}; 　　返回选项; 　　}, 　　 　　

这样就可以实现我们的最终效果了
　　

　　

　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

vue基于v-charts封装双向条形图的实现代码