Hi, @100pah . I am now using ReactEchart component. And the code stuff is as
below.
eChartOption(graphData, xAxisCategories) {
const yAxisLines = this.getYAxisLines(graphData, xAxisCategories);
......
const chartOption = {
animation: false,
legend,
xAxis: [{
type: 'category',
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: '#888',
rotate: isLarge ? 0 : 45,
margin: 12,
},
data: xAxisCategories.toArray(),
}],
yAxis: {
name: 'Operation Time (minutes)',
nameLocation: 'middle',
nameTextStyle: {
color: '#aaa',
},
nameGap: 35,
type: 'value',
//--------------------------------------------------------------------------------
axisTick: { show: false },
axisLine: { show: false },
splitLine: { show: false },
axisLabel: {
color: '#888',
},
},
grid: {
left: 40,
right: 10,
bottom: (this.props.operationType === W2W_OPTYPE) ? 50 : 25,
top: 10,
containLabel: true,
show: true,
borderWidth: 0,
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(221,221,221,0.9)',
borderColor: '#198bff',
borderWidth: 1,
textStyle: {
color: '#000',
},
},
series: [...series, {
name: 'Goal Line',
type: 'line',
markLine: {
silent: true,
symbol: 'none',
data: yAxisLines.map(yAxisLine => ({
yAxis: yAxisLine.get('value'),
lineStyle: {
normal: {
color: yAxisLine.get('color'),
type: 'solid',
},
},
label: {
normal: {
position: yAxisLine.get('position'),
formatter: `{style|${yAxisLine.get('text')}}`,
color: yAxisLine.get('color'),
rich: {
style: {
width: '100%',
align: yAxisLine.get('align'),
padding: [0, 0, -15, 0],
rotation: 90,
},
},
},
},
})).toArray(),
},
}],
};
return chartOption;
}
[ Full content available at:
https://github.com/apache/incubator-echarts/issues/9026 ]
This message was relayed via gitbox.apache.org for [email protected]
