两列数据对比就用它--嵌套柱状图

我们常常比较两组数据的时候,眼睛来来回回的扫视,看起来比较费劲。那么可不可以有一种图表,把两组数据放在同一个维度进行比较呢?答案当然是可以啊,这就是我们今天要讲的嵌套柱状图。一起看看它的巧妙之处吧。

1.嵌套柱状图

1.1 简介

通过两个嵌套柱状图展示数据的差异情况,对比更加清晰。

image.png

图1 嵌套柱状图示例

image.png

图2 柱状图示例

image.png

图3 嵌套柱状图示例

对比两组图片可发现:

柱状图,需要来回扫视,不便查看,耗时也更久些,遇到数据差不多的,对比就更加微弱了。但是我们嵌套柱状图,能一眼看出两组数据的差别,一点也不费劲,而且还节省绘图的空间。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在el-form中嵌套el-form提交数据时,你可以使用以下方法操作: 1. 首先,为了在el-form中嵌套el-form,你需要在外层form表单中使用ref属性来标识它。 2. 在内层的el-form中,你可以使用prop属性来绑定对应的数据字段。 3. 在提交数据时,你可以在外层form表单的提交方法中,通过调用内层form表单的validate方法来校验内层form表单的数据。 4. 在校验通过后,你可以继续执行你的其他操作,比如调用接口等一系列正常操作。 下面是一个示例代码,展示了如何在el-form中嵌套el-form提交数据的操作: ```javascript <template> <el-form ref="outerForm" :model="formData" :rules="formRules" @submit="submitForm"> <!-- 外层form表单的内容 --> <el-form-item label="外层字段"> <el-input v-model="formData.outerField"></el-input> </el-form-item> <!-- 内层form表单 --> <el-form ref="innerForm" :model="formData.innerData" :rules="innerFormRules"> <!-- 内层form表单的内容 --> <el-form-item label="内层字段"> <el-input v-model="formData.innerData.innerField"></el-input> </el-form-item> <!-- 其他内层表单字段... --> </el-form> <!-- 提交按钮 --> <el-button type="primary" native-type="submit">提交</el-button> </el-form> </template> <script> export default { data() { return { formData: { outerField: '', innerData: { innerField: '' } }, formRules: { outerField: [ { required: true, message: '请输入外层字段', trigger: 'blur' } ] }, innerFormRules: { innerField: [ { required: true, message: '请输入内层字段', trigger: 'blur' } ] } }; }, methods: { submitForm() { // 校验内层form表单的数据 this.$refs.innerForm.validate().then(() => { // 内层form表单校验通过后执行的操作 // 可以在这里调用接口等一系列正常操作 // 内层form表单数据校验通过后,再提交外层form表单的数据 this.$refs.outerForm.validate().then(() => { // 外层form表单校验通过后执行的操作 // 可以在这里继续执行你的其他操作,比如调用接口等一系列正常操作 }); }); } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值