I have a dataset like this:
Headers Array:
["a", "b", "c"]
Data Array:
[[5, 15, 25],
[10, 20, 30]]
I want my chart to look like the chart below, but I prefer not to pre-process the data. Is it possible to user dataset
and source
and avoid pre-processing? There is a related Q/A in the site but I wasn't able to get it working in this particular case.
option = {
series: [
{
type: 'pie',
radius: '100',
right: "300",
data: [["a", 5], ["b", 5], ["c",5]],
encode: {value: 1},
label: {formatter: "{@[0]}: {d}%"}
},
{
type: 'pie',
radius: '100',
left: "300",
data: [["a", 10], ["b", 20], ["c", 30]],
encode: {value: 1},
label: {formatter: "{@[0]}: {d}%"}
},
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option)
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 700px; height:400px;"></div>
</body>
</html>
This is closest I could get with dataset
and source
options. I wasn't able to display headers.
option = {
dataset: {
dimensions: ["a", "b", "c"],
source: [[5, 15, 25], [10, 20, 30]]
},
series: [
{
type: 'pie',
radius: '100',
right: "300",
seriesLayoutBy: 'row',
encode: {value: 0},
label: {formatter: "{@[0]}: {d}%"}
},
{
type: 'pie',
radius: '100',
left: "300",
encode: {value: 1},
seriesLayoutBy: 'row',
label: {formatter: "{@[1]}: {d}%"}
},
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option)
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 700px; height:400px;"></div>
</body>
</html>
Since the issue you seem to have is with the labels. How about a custom formatting function for the label
const headers = ["a", "b", "c"]
const dataset = [[5, 15, 25], [10, 20, 30]]
const customLabel = (params) => `${headers[params.dataIndex]}: ${params.percent}%`;
const option = {
dataset: {
dimensions: headers,
source: dataset
},
series: [
{
type: 'pie',
radius: '100',
right: "300",
seriesLayoutBy: 'row',
encode: { value: 0 },
label: {
formatter: customLabel,
emphasis: {
formatter: customLabel
}
}
},
{
type: 'pie',
radius: '100',
left: "300",
encode: { value: 1 },
seriesLayoutBy: 'row',
label: {
formatter: customLabel,
emphasis: {
formatter: customLabel
}
}
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 700px; height:400px;"></div>
</body>
</html>