v-charts y轴刻度不一致,分别设置y轴属性

2020-08-05T13:18:27
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

使用 v-charts 时,有时候需要对 x轴、y 轴或鼠标移上去的浮窗等进行设置,设置参考的是 eCharts 官方文档的配置项手册
本文涉及的的设置 y 轴的属性是在 v-charts 组件中使用 extend 属性来对图表进行设置。

示例 v-charts 组件

<ve-histogram :data="histogramChartData" :settings="histogramChartSettings" :extend="histogramChartExtend"></ve-histogram>

extend 属性接受一个对象,一般单个y轴,或者两个y轴但不需要分别设置时,可以由有如下设置:

export default {
    data() {
        return {
            histogramChartData: {
                ...
            },
            histogramChartSettings: {
                ...
            },
            histogramChartExtend: {
                // 横坐标
                xAxis: {
                    ...
                },
                // 纵坐标
                yAxis: {
                    // 坐标轴名称的文字样式
                    nameTextStyle: {
                        padding: [0, 10, 0, 0]
                    },
                    // 坐标轴线设置
                    axisLine: {
                        show: true,
                        lineStyle: {
                          color: '#ccc'
                        }
                    },
                    ...
                }
            }
        }
    }
}

但是如果分别对两个轴分别设置时,这样写就不行了,不太好区分设置,参考v-charts Issues #805,后可以改成如下设置:

export default {
    data() {
        return {
            histogramChartData: {
                ...
            },
            histogramChartSettings: {
                ...
            },
            histogramChartExtend: {
                // 横坐标
                xAxis: {
                    ...
                },
                // 纵坐标
                yAxis(item) {
                    /* 左轴 */
                    // 坐标轴名称的文字样式
                    item[0].nameTextStyle = {
                        padding: [0, 10, 0, 0]
                    }
                    // 坐标轴线设置
                    item[0].axisLine: {
                        show: true,
                        lineStyle: {
                          color: '#ccc'
                        }
                    }
                    /* 右轴 */
                    // 坐标轴名称的文字样式
                    item[1].nameTextStyle = {
                        padding: [0, 10, 0, 0]
                    }
                    // 坐标轴线设置
                    item[1].axisLine: {
                        show: true,
                        lineStyle: {
                          color: '#ccc'
                        }
                    }
                    return item
                }
            }
        }
    }
}
扫一扫关注公众号添加购物返利助手,领红包
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。