在使用echart绘制图表的过程中,y轴刻度标签显示不全,效果如下图所示:
在项目中使用echart绘制图表,y轴刻度标签显示不全,代码如下:
const getChartsData = () => {
const myChart = echarts.init(document.getElementById('myChart123'))
// 绘制图表
const xData = state.arrHistoryList.map(item => {
return item.valueDate
})
myChart.setOption({
xAxis: {
data: xData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: function (value) {
return value.toFixed(4)
}
},
min: function (value) { return value.min.toFixed(4) },
max: function (value) { return value.max.toFixed(4) }
},
series: [
{
name: t('app.InvestmentPrice.Uservolume'),
type: 'line',
data: state.arrHistoryList.map(item => {
return item.unitSellPrice
}),
itemStyle: {
normal: {
color: '#E33122'
}
}
}
]
})
window.onresize = function () { // 自适应大小
myChart.resize()
}
}
起初以为yAxis里面的刻度标签函数编写有问题,检查了一下没有问题,就开始看是不是echart渲染位数有限制,发现也不是,最终发现时echart渲染偏移问题,导致y轴刻度标签显示不全。
grid: {
// top:48,
left: '20%' // 调整这个属性
},
效果如下: