I would like to create a chart like this in ECharts:
So anyone have any ideas? I tried using an example from the ECharts page, but it doesn't seem like my UI. I made a row of dots but cant stretch the circle into a rectangle with radius, ever mind the 2 blue half circles above and below
https://echarts.apache.org/examples/en/editor.html?c=pie-parliament-transition
I modified the example you linked to give you an idea how to achieve what you are asking for. It is not pretty but I hope it helps.
const data = [
{ value: 800, name: 'A' },
{ value: 635, name: 'B' },
{ value: 580, name: 'C' },
{ value: 484, name: 'D' },
{ value: 300, name: 'E' },
{ value: 200, name: 'F' }
];
const defaultPalette = [
// '#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090', '#91c4c5', '#6890ba'
'#5470c6',
'#91cc75',
'#fac858',
'#ee6666',
'#73c0de',
'#3ba272',
'#fc8452',
'#9a60b4',
'#ea7ccc'
];
const radius = ['30%', '80%'];
const parliamentOption = (function () {
let sum = data.reduce(function (sum, cur) {
return sum + cur.value;
}, 0);
let angles = [];
let startAngle = -Math.PI / 2;
let curAngle = startAngle;
data.forEach(function (item) {
angles.push(curAngle);
curAngle += (item.value / sum) * Math.PI * 2;
});
angles.push(startAngle + Math.PI * 2);
function circleLayout(startAngle, endAngle, totalAngle, r, size) {
let points = [];
for (
let k = Math.floor((startAngle * r) / size) * size;
k < Math.floor((endAngle * r) / size) * size - 1e-6;
k += size
) {
let angle = k / r;
points.push(angle);
}
return points;
}
return {
series: [
{
type: 'custom',
id: 'distribution',
data: data,
coordinateSystem: undefined,
universalTransition: true,
animationDurationUpdate: 1000,
renderItem: function (params, api) {
var idx = params.dataIndex;
var viewSize = Math.min(api.getWidth(), api.getHeight());
var r1 = ((parseFloat(radius[1]) / 100) * viewSize) / 2;
var cx = api.getWidth() * 0.5;
var cy = api.getHeight() * 0.5;
var size = viewSize / 50;
var points = circleLayout(
angles[idx],
angles[idx + 1],
Math.PI * 2,
r1,
size + 10
);
return {
type: 'group',
children: points.map(function (angl) {
return {
type: 'group',
children: Array.from({ length: 30 }, (v, i) => i).map(function(pixel) {
return {
type: 'circle',
autoBatch: true,
shape: {
cx: cx + Math.cos(angl) * (r1 + pixel),
cy: cy + Math.sin(angl) * (r1 + pixel),
r: size / 2
},
style: {
fill: defaultPalette[idx % defaultPalette.length]
}
}
})
};
})
};
}
},
{
type: 'custom',
id:'half circle',
data: [92], // radius in percent
coordinateSystem: undefined,
renderItem: function (params, api) {
let radiusPercent = api.value();
let radius = (Math.min(api.getWidth(), api.getHeight()) / 2) * (radiusPercent / 100);
let cx = api.getWidth() * 0.5;
let cy = api.getHeight() * 0.5;
let angls = [];
let piece = (Math.PI * 2) / 16;
let step = 0.01;
for (let i = piece; i < piece * 7; i=i + step) {
angls.push(i);
}
for (let i = piece * 9; i < piece * 15; i=i + step) {
angls.push(i);
}
return {
type: 'group',
children: angls.map(function(angl) {
return {
type: 'circle',
autoBatch: true,
shape: {
cx: cx + Math.cos(angl) * radius,
cy: cy + Math.sin(angl) * radius,
r: 10
},
style: {
fill: 'lightblue'
}
}
})
}
}
}
]
};
})();
let currentOption = (option = parliamentOption);