有没有办法在条形图中的每个条形图上方显示一条线？

Question

I have a bar Chart, and I want to show a horizontal line above the bar to indicate the peak. Is there a way to achieve this with echarts without using a custom renderer?

 var myChart = echarts.init(document.getElementById('main')); option = { "series": [ { "type": "bar", "dimensions": [ "date", "percent", "tooltip" ], "color": "#1976d2", "data": [ [ "2023-01-11", 3.230555555555555, "3.2" ], [ "2023-01-12", 5.436111111111111, "5.4" ], [ "2023-01-13", 7.306481481481481, "7.3" ], ], "name": "Mean", }, { "type": "custom", "dimensions": [ "date", "peak", "tooltip" ], "color": "#d32f2f", "renderItem": renderPeakLine, "data": [ [ "2023-01-11", 25, 25 ], [ "2023-01-12", 50, 50 ], [ "2023-01-13", 50, 50 ], ], "yAxisIndex": 0, "name": "Peak", } ], "xAxis": { "show": true, "type": "time", "axisLabel": {} }, "yAxis": { "show": true, "type": "value", "min": 0, "max": 100, "scale": false, }, "tooltip": { "show": true, "trigger": "axis", "axisPointer": { "label": {} } }, "legend": { "show": true } } const peakColor = '#d32f2f' function renderPeakLine(param, api) { const bandWidth = (param.coordSys.width / param.dataInsideLength) * 0.6 const point = api.coord([api.value(0), api.value(1)]) const value = api.value(2) // This skips drawing the red line for 0 if (value === 0) return return { type: 'line', transition: 'shape', z2: 10, shape: { x1: point[0] - bandWidth / 2, x2: point[0] + bandWidth / 2, y1: point[1], y2: point[1], }, style: api.style({ fill: null, stroke: api.visual('color'), lineWidth: 2, }), } } myChart.setOption(option);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script> <div id="main" style="width: 500px;height:200px;"></div>

Answer 1

What you described sounds like candlestick chart type.

 var myChart = echarts.init(document.getElementById('main')); option = { xAxis: { data: ["2023-01-11", "2023-01-12", "2023-01-13"] }, yAxis: { show: true, type: "value", min: 0, max: 100, scale: false, }, series: [ { type: 'candlestick', data: [ [ 0, 3.230555555555555, 0, 25 ], [ 0, 5.436111111111111, 0, 50 ], [ 0, 7.306481481481481, 0, 50 ], ], } ] }; myChart.setOption(option);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script> <div id="main" style="width: 500px;height:200px;"></div>