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 表单之间的数据传递代码
Dec 04 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 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
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
python 实现堆排序算法代码
2012/06/05 Python
Python高效编程技巧
2013/01/07 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python编程入门的一些基本知识
2015/05/13 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
python标准库os库的函数介绍
2020/02/12 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
python3将变量输入的简单实例
2020/08/19 Python
毕业生自我鉴定实例
2014/01/21 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
培训班开班主持词
2015/07/02 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Python中zipfile压缩包模块的使用
2021/05/14 Python