Can not set width to auto when use init-options

[dews]

Confirmation

• [X] I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

/myProject
├─┬ @intlify/vue-i18n-loader@3.3.0
│ └── vue@2.7.14 deduped
├─┬ @vue/cli-plugin-babel@5.0.8
│ └─┬ @vue/babel-preset-app@5.0.8
│   ├─┬ @vue/babel-preset-jsx@1.4.0
│   │ └── vue@2.7.14 deduped
│   └── vue@2.7.14 deduped
├─┬ @vue/test-utils@1.3.3
│ └── vue@2.7.14 deduped
├─┬ @vue/vue2-jest@27.0.0
│ └── vue@2.7.14 deduped
├── echarts@5.4.1
├─┬ vue-cli-plugin-i18n@2.3.1
│ └── vue@2.7.14 deduped
├─┬ vue-echarts@6.5.4
│ ├── echarts@5.4.1 deduped
│ ├─┬ vue-demi@0.13.11
│ │ └── vue@2.7.14 deduped
│ └── vue@2.7.14 deduped
├─┬ vue-i18n-bridge@9.2.2
│ └─┬ vue-demi@0.13.11
│   └── vue@2.7.14 deduped
├── vue@2.7.14
├─┬ vuetify-loader@1.9.2
│ └── vue@2.7.14 deduped
└─┬ vuetify@2.6.12
  └── vue@2.7.14 deduped

Details

Base on document width can be null/undefined/'auto' when use init option.

When I use :init-options="initOptions", I got an error from console echarts_renderers.js?v=fd497fbd:1142 Error: <svg> attribute width: Expected length, "auto".

It doesn't have an error when I use codepen, https://codepen.io/dews/pen/zYJjQqa

stackblitz code,

<template>
  <v-chart class="chart" :option="option" :init-options="initOptions" style="width:600px"/>
</template>

<script>
import { use } from 'echarts/core';
import { SVGRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import 'echarts/lib/component/grid';
import {
  AxisPointerComponent,
  DatasetComponent,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, defineComponent } from 'vue';

use([
  AxisPointerComponent,
  DatasetComponent,
  SVGRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
export default defineComponent({
  name: 'HelloWorld',
  components: {
    VChart,
  },

  setup() {
    const initOptions = ref({ width: 'auto', height: '300' });
    const option = ref({
      dataset: {
        dimensions: [
          { name: 'time', type: 'time' },
          { name: 'data', type: 'float' },
        ],
        source: [
          [1678938353826, 1.000516862764331],
          [1678938361826, 1.0180650334071912],
          [1678938369826, 1.0091435879039201],
        ],
      },
      xAxis: { type: 'time' },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          type: 'line',
          encode: {
            x: 'time',
            y: 'data',
          },
        },
      ],
    });

    return { option, initOptions };
  },
});
</script>

Reproduction

https://stackblitz.com/edit/vue-echarts-vue-2-ksbvei?file=src%2FApp.vue

[Justineo]

This is the behavior of ECharts itself. In fact you don't need to use init-options to set the width, you can just set it with inline style.