eCharts.js 条形图平均线延伸过去图

Question

Using eCharts.js I love the average marker line that runs horizontal across the graph. The problem is that the number gets cutoff. Maybe this is a CSS issue, but I can't seem to push the number back. Any help on how I can move

Here's the code:

 function format(data) { data = parseFloat(data); return data.toLocaleString('en-US', {style: 'currency', currency: 'USD'}); } var columns_basic_element = document.getElementById("columns_basic"); // Basic columns chart if (columns_basic_element) { // Initialize chart var columns_basic = echarts.init(columns_basic_element); var data_parts = [12164.58, 13251.94, 21927.18, 13945.88, 13339.14, 21756.32, 19340.50, 22307.53]; var data_labor = [82757.65,97032.46,112864.88,83359.07,85858.48,186564.83,118206.58,132575.22]; // // Chart config // // Options columns_basic.setOption({ // Define colors color: ['#5ab1ef', '#d87a80', '#ffb980', '#2ec7c9', '#b6a2de'], // Global text styles textStyle: { fontFamily: 'Roboto, Arial, Verdana, sans-serif', fontSize: 13 }, // Chart animation duration animationDuration: 750, // Setup grid grid: { left: 0, right: 40, top: 35, bottom: 0, containLabel: true }, // Add legend legend: { data: ['Parts', 'Labor'], itemHeight: 8, itemGap: 20, textStyle: { padding: [0, 5] } }, // Add tooltip tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.75)', padding: [10, 15], textStyle: { fontSize: 13, fontFamily: 'Roboto, sans-serif' } }, // Horizontal axis xAxis: [{ type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#999' } }, splitLine: { show: true, lineStyle: { color: '#eee', type: 'dashed' } } }], // Vertical axis yAxis: [{ type: 'value', axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#999' } }, splitLine: { lineStyle: { color: ['#eee'] } }, ticks: { beginAtZero: true, callback: function(value, index, values) { return '$' + Intl.NumberFormat().format((value/1000)); } }, splitArea: { show: true, areaStyle: { color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)'] } } }], // Add series series: [ { name: 'Parts', type: 'bar', data: data_parts, label: { normal: { formatter: function (params) { var val = format(params.value); return val; }, show: true, //position: 'inside' }, tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.75)', padding: [10, 15], textStyle: { fontSize: 13, fontFamily: 'Roboto, sans-serif' } }, }, itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { fontWeight: 500 } } } }, markLine: { data: [{ type: 'average', name: 'Average', label: { normal: { formatter: function (params) { var val = format(params.value); return val; }, show: true }, } }] } }, { name: 'Labor', type: 'bar', data: data_labor, label: { normal: { formatter: function (params) { var val = format(params.value); return val; }, show: true, //position: 'inside' }, }, itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { fontWeight: 500 } } } }, markLine: { data: [{ type: 'average', name: 'Average', label: { normal: { formatter: function (params) { var val = format(params.value); return val; }, show: true }, } }] } } ] }); }

 .chart-container { position:relative; width:100%; } .chart { position:relative; display:block; width:100%; } .has-fixed-height { height:400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script> <div class="chart-container"> <div class="chart has-fixed-height" id="columns_basic"></div> </div>

Answer 1

是的，这个名为markLine.label.position方法，只需设置insideEndTop 。