No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Quasar SSR and echarts

    Useful Tips (NEW)
    1
    1
    281
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • PeterQF
      PeterQF last edited by PeterQF

      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?

      1 Reply Last reply Reply Quote 0
      • First post
        Last post