I’m configuring two charts and the legend only appears when I use series.data, but it doesn’t appear when I use the dataset component (series.datasetIndex and series.encode). Nothing I tried worked. Here’s the code:
document.addEventListener("DOMContentLoaded", () => {
// sytem
const chartSystem = () => {
return {
"source": {
"first": [
["name", "value"],
["Pressure", 40],
["Temperature", 64],
["Atmosphere", 89]
],
"second": [
["name", "value"],
["Label 1", 15],
["Label 2", 68]
]
}
}
}
// send
const pullDataset = [];
const pullData = [];
const chartSend = () => {
const { first, second } = chartSystem().source;
pullDataset.push({
source: first
// sourceHeader: true
});
pullData.push(
{
data: second.slice(1).map(([name, value]) => ({
name,
value
}))
}
);
};
chartSend();
// frames
const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);
function chartFrameSwitch0 () {
const tooltip0 = {
show: true
};
const useDataLegend = pullDataset[0].source.slice(1).map(item => item[0]);
console.log(useDataLegend);
// legend
const legend0 = [
{
show: true,
data: useDataLegend,
borderWidth: 2,
borderColor: 'red'
},
{
show: true,
data: pullData[0].data.map(item => item.name),
borderWidth: 2,
borderColor: 'blue',
left: 'center',
top: '5%'
}
];
const grid0 = [
{
top: '30%',
left: '5%',
width: '38%',
height:'30%'
}
];
const xAxis0 = [
{
gridIndex: 0,
type: 'category'
}
];
const yAxis0 = [
{
gridIndex: 0,
type: 'value'
}
];
const series0 = [
{
type: 'bar',
color: ['#49a6de', '#ff7500', '#ff00ff'],
colorBy: 'data',
datasetIndex: 0,
encode: {
x: 0,
y: 1
},
xAxisIndex: 0,
yAxisIndex: 0
},
{
type: 'pie',
legendIndex: 0,
center: ['70%', '50%'],
data: pullData[0].data
}
];
const option = {
dataset: [pullDataset[0]],
legend: legend0, // Keep both legends in the array
tooltip: tooltip0,
grid: grid0,
xAxis: xAxis0,
yAxis: yAxis0,
series: series0
};
chartUse.setOption(option);
}
chartFrameSwitch0();
})<head>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js'></script>
</head>
<div class='chart' style='width: 100%; height: 100vh;'></div>See the console.log of useDataLegend:
[
"Pressure",
"Temperature",
"Atmosphere"
]
This is a manual way I tried to set legend.data: [...]. I tried using series.encode, but it doesn’t seem to support setting the legend.