ECharts failed in rendering the candlesticks in quasar app - vue.js

Question

I use echarts for vue library from here and getting both sample setup and data from here.
So my codes are like these:
app.js
import { Quasar } from 'quasar'
import { markRaw } from 'vue'
import RootComponent from 'app/src/App.vue'
import createStore from 'app/src/stores/index'
import createRouter from 'app/src/router/index'
import ECharts from 'vue-echarts'
import { use } from "echarts/core"
import { CanvasRenderer } from 'echarts/renderers'
import { CandlestickChart } from 'echarts/charts'
import {
GridComponent,
TooltipComponent,
TitleComponent,
LegendComponent,
DataZoomComponent,
} from 'echarts/components'
use([
CanvasRenderer,
CandlestickChart,
GridComponent,
TooltipComponent,
TitleComponent,
LegendComponent,
DataZoomComponent,
])
... more ..
MyChart.vue
<template>
<q-item>
<div style="width: 100%; margin: 0;" class="bg-white">
<table style="width: 100%; height: 360px">
<tr>
<td style="width: 45%">Info</td>
<td style="width: 55%">
<chart class="candle-chart" :option="option"></chart>
</td>
</tr>
</table>
</div>
</q-item>
</template>
<script>
/* eslint-disable */
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "MyChart",
props: {
id: Number,
event: Object,
prices: Array
},
setup(props) {
const priceData = splitData(props.prices);
const optionObj = ref({
title: {
text: props.event.pair,
left: 0
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['日K']
},
grid: {
left: '10%',
right: '5%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: priceData.categoryData,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
min: 'dataMin',
max: 'dataMax'
},
yAxis: {
scale: true,
splitArea: {
show: true
}
},
series: [
{
name: '日K',
type: 'candlestick',
data: priceData.values,
itemStyle: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
},
}
]
});
function splitData(rawData) {
const categoryData = [];
const values = [];
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
}
return {
categoryData: categoryData,
values: values
};
}
return {
option: optionObj
}
}
});
</script>
<style scoped>
.candle-chart {
width: 100%;
border: 1px;
border-style: solid;
border-radius: 4px;
border-color: #b0a9a9;
}
</style>
I load data from json file, but to be simple.. the structure of the data is like below:
"prices": [
[ "2013/1/24", 2320.26, 2320.26, 2287.3, 2362.94 ],
[ "2013/1/25", 2300, 2291.3, 2288.26, 2308.38 ],
... more data ... ]
There is no error after running it, I can see the chart area and all the lines, the legends, the grid, the tooltip and so on... but not a single candle rendered (see below screemshot)
Can anybody from ECharts or Vue-echarts or anybody who ever work on this tell me what is wrong with my code?