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

更新时间：2019年12月09日 11:58:06 作者：无锡肖奈

这篇文章主要介绍了vue基于v-charts封装双向条形图的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

我们先来看实现效果

以这张图来举例

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

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

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

我们先来准备数据源:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我们可以在 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使用Echarts实现排行榜效果

vue如何判断安卓还是IOS
这篇文章主要介绍了vue如何判断安卓还是IOS，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
结合axios对项目中的api请求进行封装操作
这篇文章主要介绍了结合axios对项目中的api请求进行封装操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue3实现移动端滑动模块
这篇文章主要为大家详细介绍了vue3实现移动端滑动模块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
Vue.js3.2响应式部分的优化升级详解
这篇文章主要为大家介绍了Vue.js3.2响应式部分的优化升级详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue使用webSocket更新实时天气的方法
本文将结合实例代码，介绍vue使用webSocket更新实时天气的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
Vue实现DOM元素拖放互换位置示例
本文主要介绍了Vue实现DOM元素拖放互换位置示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
Vue MVVM模型超详细讲解
MVVM是Model-View-ViewModel的缩写，MVVM是一种设计思想，这篇文章主要介绍了Vue生命周期和MVVM框架,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
vue中选中多个选项并且改变选中的样式的实例代码
这篇文章主要介绍了vue中选中多个选项并且改变选中的样式，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-09-09
vue+relation-graph绘制关系图实用组件操作方法
这篇文章主要介绍了vue+relation-graph绘制关系图实用组件操作方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
vue-cli项目中img如何使用require动态获取图片
这篇文章主要介绍了vue-cli项目中img如何使用require动态获取图片，具有很好的参考价值，希望对大家有所帮助。
2022-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具