How to bring Echarts personalization to Shimoku?
You can use Echarts console to develop new sort of charts:
And then create them in Shimoku. Let’s see an example:
Let’s suppose we have the following Echarts options
option = {
title: {
text: 'Yesterday performance comparison'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['RevPAR', 'RevPOR', 'ADR', 'Occupancy', 'Revenues']
},
series: [
{
name: 'Yesterday performance',
type: 'bar',
color: '#c23531',
data: [{
value: 92,
itemStyle: {
color: '#c23531'
},
label: {
formatter: '75€',
show: true,
},
},
{
value: 88,
itemStyle: {
color: '#c23531'
},
label: {
formatter: '230€',
show: true,
},
},
{
value: 103,
itemStyle: {
color: '#73a373'
},
label: {
formatter: '150€',
show: true,
}
},
{
value: 70,
itemStyle: {
color: '#c23531'
},
label: {
formatter: '65%',
show: true,
},
},
{
value: 98,
itemStyle: {
color: '#c23531'
},
label: {
formatter: '5000€',
show: true,
},
},
],
barGap: 0,
barCategoryGap: '50%',
showBackground: true,
},
{
name: 'Yesterday goal',
type: 'bar',
data: [{
value: 100,
label: {
formatter: '90€',
show: true,
},
},
{
value: 100,
label: {
formatter: '280€',
show: true,
},
},
{
value: 100,
label: {
formatter: '143€',
show: true,
}
},
{
value: 100,
label: {
formatter: '88%',
show: true,
},
},
{
value: 100,
label: {
formatter: '5050€',
show: true,
},
},
],
color: '#7289ab'
}
]
};
That looks like this:

Regarding how to use the components as Echarts, you have for all charts of the SDK the field
option_modifications
and you can pass Echarts variables in there. Example:options = {
'dataZoom': False,
'xAxis': {'type': 'value'},
'yAxis': {'type': 'category'},
}
shimoku.plt.bar(
...,
option_modifications=options,
)
Note that is doing copy+paste the concrete configuration you want to include from echarts but with Python grammatic.
Hence, in your specific case, it would be like the following (note that you do not need to specify data in the
option_modifications
because our system merges everything under the hood)options = {
'tooltip': {
'trigger': 'axis',
'axisPointer': {
'type': 'shadow'
}
},
'grid': {
'left': '3%',
'right': '4%',
'bottom': '3%',
'containLabel': True
},
'xAxis': {
'type': 'value',
'boundaryGap': [0, 0.01]
},
'yAxis': {
'type': 'category',
},
'series': {
'barGap': 0,
'barCategoryGap': '50%',
'showBackground': true,
}
}
Last modified 8mo ago