I've been playing with uibuilder and ECharts this past days.
For anyone interested on it, you may find that the examples on the ECharts homepage doesn't work when testing them on uibuilder:
html
<b-card>
<v-chart :options="ecOptionsGauge"/>
</b-card>
js
ecOptionsGauge: {
title: {
text: 'Grid power',
},
tooltip: {},
series: [
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 60,
splitNumber: 12,
itemStyle: {
color: '#FFAB91',
},
progress: {
show: true,
width: 30,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 30,
},
},
axisTick: {
distance: -45,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999',
},
},
splitLine: {
distance: -52,
length: 14,
lineStyle: {
width: 3,
color: '#999',
},
},
axisLabel: {
distance: -20,
color: '#999',
fontSize: 20,
},
anchor: {
show: false,
},
title: {
show: false,
},
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 40,
height: '15%',
borderRadius: 8,
offsetCenter: [0, '-15%'],
fontSize: 60,
fontWeight: 'bolder',
formatter: '{value} °C',
color: 'auto',
},
data: [
{
value: 20,
},
],
},
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 60,
itemStyle: {
color: '#FD7347',
},
progress: {
show: true,
width: 8,
},
pointer: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: 20,
},
],
},
],
},
This gauge example, taken from the Echarts site, should look like this:
But what you get is:
And stays static without any animation.
Echarts has advanced several versions and even one major rebuild. So they changed the api significantly. Indeed their website is adapted to the new version.
If anyone is interested in running the "next" version (the latest is not possible without upgrading vue to v3), you must change the includes in uibuilder for the following ones:
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@5.0.0-beta.0"></script>
Now it works and you can make some graphs like this:
