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