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 事件记录使用说明
Oct 20 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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
9个经典的PHP代码片段分享
2014/12/18 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Python中关于字符串对象的一些基础知识
2015/04/08 Python
python字典基本操作实例分析
2015/07/11 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python变量赋值的秘密分享
2018/04/03 Python
python爬取网页转换为PDF文件
2018/06/07 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
材料化学应届生求职信
2013/10/09 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
洗发水广告词
2014/03/13 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
学生会主席任命书
2015/09/21 职场文书
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS