Custom chart between pie and heat map

Question

We need to create a "heap map" using EChats in the form of a clock, where for each hour we have a certain number of occurrences (that would be the value) and the color of each block on the pie goes from white to black depending on the relative weightof the value.

Would be something like this:

Any suggestions or samples around?

Answer 1

This should not be that hard using the color attribute in the chart options.

Take for example the data from this example from the documentation.

We can assign colors to the chart sections using the following code:

const data = [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 234, name: '联盟广告'},
    {value: 135, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
];

const max = data.reduce((acc, d) => acc < d.value ? d.value : acc, 0);
const colors = data.map(d => {
    const shade = 255 - Math.round(255 / (max / d.value));
    const hex = shade.toString(16)
    return '#' + hex + hex + hex
})

console.log(colors) // ["#c8c8c8", "#cccccc", "#d8d8d8", "#e9e9e9", "#000"]

// then you just assign the colors to the chart config
options.color = colors