search

xlsdg / vue-echarts-v3

Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)
https://xlsdg.github.io/vue-echarts-v3-demo/
MIT License
904 stars 124 forks source link

Tip for Quasar SSR users #108

Open digitalit opened 4 years ago

digitalit commented 4 years ago

Got it working like this.

quasar.conf.js:

    boot: [
      'auth',
      'i18n',
      'axios',
      {
        server: false,
        path: 'echarts'
      }
    ],

boot file:

// https://github.com/xlsdg/vue-echarts-v3
import * as ECharts from 'echarts/lib/echarts'
import Wrapper from 'vue-echarts-v3/src/wrapper.js'

const DIEcharts = Wrapper(ECharts)
DIEcharts.__echarts__ = ECharts

export default ({ Vue }) => {
  // register component to use
  Vue.component('di-echart', DIEcharts)
}

somponent:

<template>
  <q-card class="q-pa-sm" style="background:#eeeeee">
    <q-card-section class="q-pa-none q-pt-md">
      <q-no-ssr>
        <di-echart
          v-if="getLineChartOptions"
          style="height: 250px;"
          :option="getLineChartOptions"
          :resizable="true"
        ></di-echart>
      </q-no-ssr>
    </q-card-section>
  </q-card>
</template>
<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
export default {
.......

Please confirm if this is a solid solution?

DengnisR commented 3 months ago

hello?-- this working now?--

Got it working like this.

quasar.conf.js:

    boot: [
      'auth',
      'i18n',
      'axios',
      {
        server: false,
        path: 'echarts'
      }
    ],

boot file:

// https://github.com/xlsdg/vue-echarts-v3
import * as ECharts from 'echarts/lib/echarts'
import Wrapper from 'vue-echarts-v3/src/wrapper.js'

const DIEcharts = Wrapper(ECharts)
DIEcharts.__echarts__ = ECharts

export default ({ Vue }) => {
  // register component to use
  Vue.component('di-echart', DIEcharts)
}

somponent:

<template>
  <q-card class="q-pa-sm" style="background:#eeeeee">
    <q-card-section class="q-pa-none q-pt-md">
      <q-no-ssr>
        <di-echart
          v-if="getLineChartOptions"
          style="height: 250px;"
          :option="getLineChartOptions"
          :resizable="true"
        ></di-echart>
      </q-no-ssr>
    </q-card-section>
  </q-card>
</template>
<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
export default {
.......

Please confirm if this is a solid solution?