vchart 堆叠图求总和

who is vChart?

vChart 是基于echart封装的一个图表组件。使用起来比echart要简洁方便，但是想要实现一些复杂的功能相对就没有echart方便了。

踩坑堆叠柱状图求总和

（这个问题也可以叫堆叠图顶部显示一个即不是维度又不是指标的值）

1.首先看一下堆叠图顶部显示的样子

<template>
  <ve-histogram :data="chartData" :settings="chartSettings" :extend="extend"></ve-histogram>
</template>

<script>
  export default {
    data () {
      this.extend = {
        series: {
          label: { show: true, position: "top" }
          
        }
      }
      this.chartSettings = {
        stack: { '用户': ['访问用户', '下单用户'] }
      }
      return {
        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 193, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 330, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 123, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 342, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 423, '下单率': 0.78 }
          ]
        }
      }
    }
  }
</script>

他的显示效果和普通的柱状图一样，这显然不是我们想要的效果。so 需要改一下下配置。

<template>
  <ve-histogram :data="chartData" :settings="chartSettings" :extend="extend"></ve-histogram>
</template>

<script>
  export default {
    data () {
      this.extend = {
        'series.1.label.show': true,
          'series.1.label.position': "top",
      }
      this.chartSettings = {
        stack: { '用户': ['访问用户', '下单用户'] }
      }
      return {
        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 193, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 330, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 123, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 342, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 423, '下单率': 0.78 }
          ]
        }
      }
    }
  }
</script>

重点是这里的代码！！！

在看一下效果

对了，是我们想要的样子。

既然显示的样子成功了，那么。就解决下一个问题，显示的数据。

同样，还是的改配置，哈哈哈哈。解决问题的思路是不是get到了一点点，那就是：从配置入手，自定义配置。

<template>
  <ve-histogram :data="chartData" :settings="chartSettings" :extend="extend"></ve-histogram>
</template>

<script>
  export default {
    data () {
      this.extend = {
        'series.1.label.show': true,
          'series.1.label.position': "top",
         'series.1.label.formatter': (e)=>{
            return this.showName(e.dataIndex)
          },
      }
      this.chartSettings = {
        stack: { '用户': ['访问用户', '下单用户'] }
      }
      return {
        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 193, '下单率': 0.32, 'name':'hahha'},
            { '日期': '1/2', '访问用户': 3530, '下单用户': 330, '下单率': 0.26 ,'name':'测试hha'},
            { '日期': '1/3', '访问用户': 2923, '下单用户': 623, '下单率': 0.76 ,'name':'测试hha'},
            { '日期': '1/4', '访问用户': 1723, '下单用户': 123, '下单率': 0.49,'name':'测试hha' },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 342, '下单率': 0.323,'name':'测试hha' },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 423, '下单率': 0.78 ,'name':'测试hha'}
          ]
        }
      }
    },
    methods:{
      showName(index){
        return this.chartData.rows[index].name
      }
    }
  }
</script>

重要的代码！！！ 

 

 看一下效果

妥妥的搞定。

需要纪念一下这个小功能，整整搞了一下午，终于搞定他。