使用 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
                }
            }
        }
    }
}

yhb_flydream
5 声望0 粉丝

I want something just like this!