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>
重要的代码!!!
看一下效果
妥妥的搞定。
需要纪念一下这个小功能,整整搞了一下午,终于搞定他。