v-charts简单使用

问题：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