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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
微信小程序图片加载失败时替换为默认图片的方法
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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
寒假家长评语大全
2014/04/16 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
你知道Java Spring的两种事务吗
2022/03/16 Java/Android