Unfortunately, there isn't any inbuilt support for having labels on both sides of a Y-axis. Here are two suggested workarounds:
**1. Use endLabel for the end and MarkPoint for the start**
const dataset = [[150, 230, 224, 218, 135, 147, 260], [230, 160, 70, 135, 147, 140, 110], [135, 147, 260, 340, 290, 110, 90]];
const entity = ['Mangolia', 'Mitzerland','Torsica'];
const seriesList = [];
for (const index in dataset) {
const row = dataset[index];
seriesList.push({
type: 'line',
data: row,
endLabel: {
show: true,
formatter: () => 'end label = ' + row[row.length - 1]
},
markPoint: {
symbolSize: 0,
label: {position: 'left'},
data: [{coord: [0, row[0]], value: entity[index]}]
}
});
}
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: seriesList
};
**2. Use Custom Component**
You can also create a custom component to achieve this. Here's an example using the ECharts extension:
import * as echarts from 'echarts/core';
echarts.registerCoordinateSystem('dual-y-axis', {
create: function (ecModel, api) {
var dualYAxis = new DualYAxis(ecModel, api);
ecModel.coordinateSystemManager.registerCoordinateSystem(dualYAxis);
return dualYAxis;
},
dimensions: ['y', 'y2']
});
class DualYAxis {
constructor(ecModel, api) {
this._model = ecModel;
this._api = api;
this._yAxisModels = [];
this._yAxisAxes = [];
}
// ... other methods
getAxis(dim) {
return this[`_axis${dim}`];
}
getAxes() {
return this._yAxisAxes;
}
getMin() {
return Math.min.apply(null, this._yAxisAxes.map(function (axis) { return axis.min; }));
}
getMax() {
return Math.max.apply(null, this._yAxisAxes.map(function (axis) { return axis.max; }));
}
}
This is just a starting point, and you may need to modify it to meet your specific requirements.
Please note that these workarounds may not be as straightforward as using a built-in option, but they should be able to help you achieve the desired result.