DDR爱好者之家

vue基于v-charts封装双向条形图的实现代码
站长资源 2024/11/24 佚名
57 1538
DDR爱好者之家 Design By 杰米

我们先来看实现效果

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"image.png" alt="" referrerpolicy="no-referrer" src="/UploadFiles/2021-04-02/2019120911575111.png">

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

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

我们可以在 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封装双向条形图的实现代码

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米