欢迎光临数控镗铣床网站,技术力量雄厚,生产工艺先进

龙门数控镗铣床

卧式龙门铣床生产,cnc立式数控铣床价格

*** 次数:51505 已用完,请联系开发者*** [卧式镗铣床xyz分别是哪个轴]v-charts y轴刻度不一致,分别设置y轴属性

作者:初夏      发布时间:2021-04-25      浏览量:0
使用 v-charts

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

1、示例 v-charts 组件

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