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


Posted in Javascript onDecember 09, 2019

我们先来看实现效果

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

以这张图来举例

通过重新封装可以实现双向条形图的显示

既可以横向比较同一天的收入支出情况

也可以竖向比较不同日期的收入/支出情况

我们先来准备数据源:

{
   columns: ["日期", "收入", "支出"],
   rows: [
    {
     日期: "8/7",
     收入: -233,
     支出: 120
    },
    {
     日期: "8/5",
     收入: -322,
     支出:450
    },
    {
     日期: "7/4",
     收入: -432,
     支出: 430
    },
    {
     日期: "10/4",
     收入: -233,
     支出: 210
    }
   ]
  };

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

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

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

初步实现条形图一左一右的效果

那如何实现同一维度的两个指标在同一行显示?

我们在配置属性中加上这么一个属性
"stack"

this.chartSettings = {
   stack: {
    xxx: [`收入`, `支出`]
   }
  };

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

series[i]-bar.stack string
数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。

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

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

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

感兴趣的可以去官方看一下在线运行的演示效果
https://www.echartsjs.com/examples/zh/editor.html?c=bar-negative

设置完这个属性我们来看一下效果

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

可以看到同一日期的收入支出情况已经在一行显示了

最后我们来解决坐标轴及图形标签值显示为负数的问题

我们可以在 chartsetting 属性中修改 label 的 formatter 属性

自定义标签的文字
根据我们的需求,通过 Math.abs()的方法,以绝对值的形式显示

this.chartSettings = {
   label: {
    normal: {
     show: true,
     formatter: params => {
      return `${params.seriesName}:${Math.abs(params.value)}`;
     }
    }
   }
  };

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

afterConfig(options) {
   options.xAxis[0].axisLabel = {
    formatter: function(value) {
     return Math.abs(value);
    } //显示的数值都取绝对值
   };
   return options;
  },

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

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

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

Javascript 相关文章推荐
JavaScript this 深入理解
Jul 30 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 #Javascript
vue如何使用async、await实现同步请求
Dec 09 #Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 #Javascript
vue新建项目并配置标准路由过程解析
Dec 09 #Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 #Javascript
简述Vue中容易被忽视的知识点
Dec 09 #Javascript
vue路由传参三种基本方式详解
Dec 09 #Javascript
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php三元运算符知识汇总
2015/07/02 PHP
PHP单链表的实现代码
2016/07/05 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python绘制3D图形
2018/05/03 Python
django 微信网页授权登陆的实现
2019/07/30 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
ORACLE十问
2015/04/20 面试题
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
安全负责人任命书
2014/06/06 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书