echarts在折线图和y轴之间添加padding label

Question

我使用echarts 插件在一些 web 页面上构建折线图。 它工作得很好，但我无法在文档内部找到如何在折线图和 y 轴 label 之间添加填充并将 y 轴 label 移动到 y 轴分割线之间的中心？

当前行 echarts 插件实例视图：

预期线路 echarts 插件实例视图：

上面的屏幕截图意味着我在心理上将图表从内部 label 移开，这样它们就不会相交并将标签沿着游戏的 y 轴移动到正好在分割线之间的中心

我需要更改插件中的哪些设置才能获得与屏幕截图相同的结果以及预期的结果？

Answer 1

您可以通过不同的方式来实现这一点，但其中大多数方式的支持成本很高，而且难以实施。 这是一种安全且轻松的方式，但您需要注意 xAxis 的点数比系列数据多一点，以显示差距。

 var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '10%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: [1, 2, 3, 4, 5, 6, 7, 8, 9] }, yAxis: { type: 'value', position: 'right', axisLabel: { inside: true, margin: 50, fontSize: 18 } }, series: [{ type: 'line', areaStyle: { color: 'rgba(104, 216, 214, 0.4)' }, lineStyle: { width: 2, color: 'rgba(104, 216, 214, 1)' }, data: [120, 132, 101, 134, 90, 230, 210] }, ] }; myChart.setOption(option);

 <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> <div id="main" style="width: 600px;height:400px;"></div>

Answer 2

 var myChart = echarts.init(document.getElementById('main')); var seriesData = Array.from({length: 100}, () => Math.floor(Math.random() * 5000)); var option = { tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '10%', bottom: '15%', }, xAxis: [{ id: 'xAxis1', type: 'category', boundaryGap: false, data: Array.from({length: seriesData.length}, () => Math.floor(Math.random() * 100)), axisLine: { lineStyle: { shadowOffsetX: 60, }, }, }], yAxis: [{ type: 'value', axisLine: { onZero: false }, position: 'right', show: true, axisLine: { lineStyle: { color: 'rgba(255,255,255,0)', }, }, splitLine: { lineStyle: { shadowOffsetX: 60, shadowColor: '#ccc' } }, axisLabel: { interval: 0, inside: true, margin: -45, fontSize: 16, padding: [-50, 0, 0, 0], color: 'black', showMinLabel: false, showMaxLabel: false, }, },{ type: 'value', position: 'right', show: true, offset: 59, } ], dataZoom: [{ type: 'inside' }, { type: 'slider', show: true, bottom: 0 }], series: [{ id: 'series1', type: 'line', yAxisIndex: [0,1], lineStyle: { width: 1, }, label: {}, data: seriesData, }], }; myChart.setOption(option);

 <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> <div id="main" style="width: 600px;height:400px;"></div>