v-chart 无数据时图表不显示的解决方案
双y轴刻度对齐,规定数据与右边y轴对齐
<template>
<div id="app">
<ve-histogram
:data="histogramData"
class="sss"
:settings="chartSettings"
:y-axis="yAxis"
:extend="option"
></ve-histogram>
</div>
</template>
<script>
import addTime from './views/addTime.vue'
import VeHistogram from 'v-charts/lib/histogram.common'
export default {
components:{
VeHistogram
},
data() {
this.chartSettings = {
labelMap: {
reportDate: '日期',
aa: '新增注册用户',
bb: '累计注册用户',
}
}
return {
histogramData: {
columns: ['reportDate', 'aa', 'bb'],
rows: [
{ reportDate: '2020-8-4' },
{ reportDate: '2020-8-5' },
{ reportDate: '2020-8-6' },
{ reportDate: '2020-8-7' },
{ reportDate: '2020-8-8' },
{ reportDate: '2020-8-9' }
]
},
reportDateList: [],
yAxis: [
{
type: 'value',
name: '人数',
min: 0,
max: 100,
interval: 20
},
{
type: 'value',
name: '题目数',
min: 0,
max: 20,
interval: 5
}
],
option: {
series() {
return [
{ name: '新增用户', type: 'bar', yAxisIndex: 0 },
{ name: '累计用户', type: 'bar', yAxisIndex: 1 },
]
}
},
// histogramData:{
// columns: ['日期', '新增注册用户', '累计注册用户'],
// rows: [{'日期':'2020-8-10', '新增注册用户':20, '累计注册用户':15}]
// }
}
},
created(){
this.init()
},
methods: {
init(){
let aaData= []
let bbData= []
let arr =[1,1]
for(let i=1;i<arr.length+1;i++){
aaData.push(80*i)
bbData.push(10
*i)
}
let resultArray = [
{name:'新增用户',type:'bar',yAxisIndex:0,aaData},
{name:'累计用户',type:'bar',yAxisIndex:1,bbData}
]
this.reportDateList = [{reportDate:'2020-8-11'},{reportDate:'2020-8-14'}]
this.histogramData.rows = this.reportDateList
//yAxisIndex 设置与那边y轴对齐的字段
this.option.series = () => {
return resultArray
}
let maxReviewNumberData = 166
let maxQuestionNumberData =78
if (maxReviewNumberData && maxQuestionNumberData) {
// 设置双y轴刻度线对齐
this.yAxis[0].max = Math.ceil(maxReviewNumberData / 5) * 8
this.yAxis[0].interval = this.yAxis[0].max / 8
this.yAxis[1].max = Math.ceil(maxQuestionNumberData / 5) * 8
this.yAxis[1].interval = this.yAxis[1].max / 8
}
}
}
};
</script>
<style>
.sss{
width: 100%;
height: 400px;
}
</style>
也可以判断res.data是否为空,为空就自己赋值0