问题：v-charts拓展配置extend中的yAxis，xAxis，series...不能配置以数组的形式配置。请参考球员身价配置
<template>
<section class="box-wrap">
<div class="box" ref="boxRef">
<p class="title">进球时间分布</p>
<ve-histogram :width="`${width}px`" height="110px" :data="analyseGoal.chartData" :settings="chartSettings" :extend="chartExtend"></ve-histogram>
</div>
<p class="model-title">球员身价TOP3</p>
<div class="box" ref="boxRef">
<ve-histogram :width="`${width}px`" height="150px" :data="analysePlayer.chartData" :settings="chartSettings1" :extend="chartExtend1" :mark-line="markLine"></ve-histogram>
</div>
</section>
</template>
<style>
.box-wrap{
padding: 30px;
background: #fff;
.box{
width: 100%;
min-height: 274px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.06);
border-radius: 10px;
padding: 20px 0;
/* margin: 30px 0; */
.title{
font-family: PingFangSC-Semibold;
font-size: 24px;
color: #606060;
margin: 0 20px;
}
}
.model-title{
font-family: PingFangSC-Semibold;
font-size: 32px;
color: #303030;
line-height: 28px;
padding: 30px 0;
}
}
</style>
<script>
export default {
data () {
const _this = this;
this.chartSettings = {
legendLimit: 0,
};
this.chartExtend = {
color: ['#5E6E8C'],
legend: {
show: false
},
tooltip: {
show: false
},
yAxis: {
axisLabel: {show: false},
splitLine: {show: false},
axisLine: {show: false},
axisTick: {show: false},
splitArea: {show: false},
type : 'value',
},
xAxis:{
axisLabel: {
interval: 0,
color: 'rgba(48,48,48, .5)',
fontSize: 10,
fontFamily: 'PingFangSC-Regular',
},
axisLine: {
show: true,
lineStyle: {
fontSize: 14,
color: '#DADADA', // 颜色
width: 1, // 粗细
},
},
},
series: {
barWidth: 18,
itemStyle: {
barBorderRadius: [5, 5, 0, 0],
color: function(params) {
return _this.isMax(params.data) ? '#73A0FA' : '#5E6E8C';
}
},
label: {
show: true,
position: 'top',
fontFamily: 'DINCondensed-Bold',
color: function(params) {
return _this.isMax(params.data) ? '#73A0FA' : '#5E6E8C';
}
}
},
grid: {
top: 20,
left: 10,
right: 10,
bottom: 0,
},
// backgroundColor: 'red'
};
this.chartSettings1 = {
dimension:['name', 'rank'],
};
const colorList = ['#E83939', '#EC6B45', '#F4CA47', '#5E6E8C'];
this.chartExtend1 = {
// 标题
title: {
show: true,
text: '单位：万欧元',
right: 5,
textStyle: {
color: '#909090',
fontSize: 10,
fontFamily: 'PingFangSC-Regular',
}
},
// 颜色
color: colorList,
legend: {
show: false
},
tooltip: {
show: false
},
yAxis: {
splitLine: {show: false},
type : 'value',
axisLine: {
show: true,
lineStyle: {
fontSize: 14,
color: '#DADADA', // 颜色
width: 1, // 粗细
},
},
axisLabel: {
show: true,
color: '#A5A5A5',
fontSize: 8
}
},
// 隐藏右侧y轴
'yAxis.1.axisLine': {
show: false
},
'xAxis.0.axisLabel': {
interval: 0,
color: '#303030',
fontSize: 12,
fontFamily: 'PingFangSC-Regular',
},
'xAxis.0.axisLine': {
show: true,
lineStyle: {
fontSize: 14,
color: '#DADADA', // 颜色
width: 1, // 粗细
},
},
'xAxis.1.axisLabel': {
interval: 0,
color: '#909090',
fontSize: 10,
fontFamily: 'PingFangSC-Regular',
},
'xAxis.1.axisLine': {
show: true,
lineStyle: {
fontSize: 14,
color: '#DADADA', // 颜色
width: 1, // 粗细
},
},
// 双轴的位置 top | bottom
'xAxis.0.position': 'bottom',
'xAxis.1.position': 'bottom',
// x轴的位置相对偏移
'xAxis.1.offset': 15,
series: {
barWidth: 18,
itemStyle: {
barBorderRadius: [5, 5, 0, 0],
color: function(params) {
return colorList[params.dataIndex];
}
},
label: {
show: true,
position: 'top',
color: '#303030',
fontFamily: 'DINCondensed-Bold'
},
},
grid: {
top: 20,
left: 10,
right: 10,
bottom: 0,
},
// backgroundColor: 'red'
};
// 基准线 | 平均值
this.markLine = {
symbol: 'none', // 标线两端的标记类型
silent: true, // 图形是否不响应和触发鼠标事件
itemStyle: {
normal:{ show: true, color: '#E9E9E9'},
},
data:[
{
yAxis: 3302, // 平均值
label: { // 基准线右侧的value值
show: false
},
}
],
};
return {
analysePlayer: {
chartData: {
columns: ['name', 'value'],
rows: [
{ 'name': '贝克汉姆', 'value': 9970, 'rank': '第一名' },
{ 'name': '梅西', 'value': 9735, 'rank': '第二名' },
{ 'name': '奥斯卡', 'value': 5760, 'rank': '第三名' },
{ 'name': '球队均值', 'value': 3302, 'rank': '' },
],
},
},
analyseGoal: {
chartData: {
columns: ['time', 'goalNum'],
rows: [
{ 'time': '0-15', 'goalNum': 1 },
{ 'time': '15-30', 'goalNum': 1 },
{ 'time': '30-45', 'goalNum': 0 },
{ 'time': '45+', 'goalNum': 2 },
{ 'time': '45-60', 'goalNum': 4 },
{ 'time': '60-75', 'goalNum': 1 },
{ 'time': '75-90', 'goalNum': 0 },
{ 'time': '90+', 'goalNum': 0 },
],
},
},
width: 0,
}
},
mounted() {
const _that = this;
setTimeout(() => {
_that.width = _that.$refs.boxRef.clientWidth || 0;
console.log('width:', _that.width)
}, 100)
},
methods: {
isMax(val) {
return !this.analyseGoal.chartData.rows.find(p => Number(p.goalNum) > Number(val));
}
}
}
</script>
进球时间分布.png
球员身价.png
