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 isLarge = this.props.size === Size.XLARGE;
const isW2W = this.props.operationType === W2W_OPTYPE;
const series = graphData.map(oneGraph => ({
name: oneGraph.get('name'),
type: 'bar',
barWidth: '50%',
stack: '1',
itemStyle: {
normal: {
color: oneGraph.get('color'),
},
},
tooltip: {
borderColor: oneGraph.get('color'),
formatter: params => (
`${params.value[2]}<br />
${params.seriesName}: ${params.value[1].toFixed(1)} mins<br />
${params.value[3]}`
),
},
data: oneGraph.get('data').map(item => [
item.get('x'),
item.get('y'),
item.get('name'),
item.get('depth'),
]).toArray(),
})).toArray();
let legend;
if (isW2W && !isLarge) {
const legends = [
graphData.filter((item, index) => index < 3),
graphData.filter((item, index) => index >= 3),
];
legend = legends.map((oneLegend, index) => ({
show: true,
type: 'scroll',
bottom: index === 0 ? 0 : 15,
align: 'left',
itemHeight: 10,
itemWidth: 10,
textStyle: {
color: '#888',
},
formatter: (name) => {
const space = ' ';
const nLength = String(name).length;
return `${name}${space.repeat(25 - nLength)}`;
},
data: oneLegend.map(oneGraph => ({
name: oneGraph.get('name'),
icon: 'rect',
})).toArray(),
}));
} else {
legend = {
show: true,
bottom: 0,
itemHeight: 10,
itemWidth: 10,
textStyle: {
color: '#888',
},
data: graphData.map(oneGraph => ({
name: oneGraph.get('name'),
icon: 'rect',
})).toArray(),
};
}
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]
