PaykomanVll opened a new issue, #19721:
URL: https://github.com/apache/echarts/issues/19721
### What problem does this feature solve?
Hello,
found your great and powerfull echart plugin, now i have to do a simple
chart and i spend a lot of hours to find the right configuration but every
solution i found have any problem :(
I use the default template for a pie with 4 lines with a graph below.
Now i want just to add one simple bar to show avg BUT the AVG has ben
excluded from the pie me and a friend we can't find a working configuration :(
At least we working with a sourc.map and filter but the collors then are
wrong, we are use defined colors but will not work and be overwritten =(
I hope anyone can help me =(
Thank you
### What does the proposed API look like?
My code i tryed:
```
var myChart = echarts.init(document.getElementById('testchart')),
option = {
// theme: 'dark', // not working how we can toogle darkmode ?
legend: {
data: ['LvL 3','LvL 4','LvL 5','LvL 6','AVG']
},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['horses', '9/23', '10/23', '11/23', '12/23', '1/24', '2/24'],
['LvL 3', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
['LvL 4', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
['LvL 5', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
['LvL 6', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
['AVG', 8.0, 7.3, 7.9, 8.6, 9.6, 9.6]
]
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
grid: { top: '55%' },
series: [
{
name: 'LvL 3',
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},{
name: 'LvL 4',
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},{
name: 'LvL 5',
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},{
name: 'LvL 6',
type: 'line',
color: '#ee6666',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},{
name: 'AVG', // Show on the legend and graph (bottom) but not on the
pie
type: 'bar',
color: 'pink', // color in pie is blue and not pink -,-
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
label: {
show: true,
position: 'top',
valueAnimation: true
}
},{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
emphasis: {
focus: 'self'
},
label: {
formatter: '{b}: {@9/23} ({d}%)'
},
encode: {
itemName: 'horses',
value: '9/23',
tooltip: '9/23'
},
}
]
};
myChart.on('updateAxisPointer', function(event){
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
// const source = option.dataset.source.filter(row => row[0] !== 'AVG');
// const newData = source.map(row => ({
// name: row[0],
// value: row[dimension]
// }));
myChart.setOption({
series: [{
id: 'pie',
// data: newData
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}]
});
}
});
myChart.setOption(option);
// function initializePieChart(){
// const initialDimension = 1;
// const source = option.dataset.source.filter(row => row[0] !== 'AVG');
// const newData = source.map(row => ({
// name: row[0],
// value: row[initialDimension]
// }));
// myChart.setOption({
// series: [{
// id: 'pie',
// // data: newData
// }]
// });
// }
// initializePieChart();
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
