ECharts failed in rendering the candlesticks in quasar app

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?