Question

我刚刚开始使用nuxt，我想使用zangchart库在nuxt中显示一些图表，但是我一直遇到错误，我已经将该库包含在plugins目录中，并且在config bu ti中一直得到错误这是下面的代码索引代码

<template>
    <div>
        <div id="myChart"></div>
    </div>
</template>

<script>
    import {zingchart} from 'zingchart/es6';

    export default {
        name: "Chicago",

        created(){
            let myConfig = {
                type: 'bar',
                title: {
                    text: 'Data Basics',
                    fontSize: 24,
                },
                legend: {
                    draggable: true,
                },
                scaleX: {
                    // Set scale label
                    label: { text: 'Days' },
                    // Convert text on scale indices
                    labels: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
                },
                scaleY: {
                    // Scale label with unicode character
                    label: { text: 'Temperature (°F)' }
                },
                plot: {
                    // Animation docs here:
                    // https://www.zingchart.com/docs/tutorials/styling/animation#effect
                    animation: {
                        effect: 'ANIMATION_EXPAND_BOTTOM',
                        method: 'ANIMATION_STRONG_EASE_OUT',
                        sequence: 'ANIMATION_BY_NODE',
                        speed: 275,
                    }
                },
                series: [
                    {
                        // plot 1 values, linear data
                        values: [23,20,27,29,25,17,15],
                        text: 'Week 1',
                    },
                    {
                        // plot 2 values, linear data
                        values: [35,42,33,49,35,47,35],
                        text: 'Week 2'
                    },
                    {
                        // plot 2 values, linear data
                        values: [15,22,13,33,44,27,31],
                        text: 'Week 3'
                    }
                ]
            };

            zingchart.render({
                id: 'myChart',
                data: myConfig,
            });
        }
    }
</script>

<style scoped>

</style>

其中一个组件的代码

<template>
    <div>
        <div id="myChart"></div>
    </div>
</template>

<script>
    import {zingchart} from 'zingchart/es6';

    export default {
        name: "Chicago",

        created(){
            let myConfig = {
                type: 'bar',
                title: {
                    text: 'Data Basics',
                    fontSize: 24,
                },
                legend: {
                    draggable: true,
                },
                scaleX: {
                    // Set scale label
                    label: { text: 'Days' },
                    // Convert text on scale indices
                    labels: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
                },
                scaleY: {
                    // Scale label with unicode character
                    label: { text: 'Temperature (°F)' }
                },
                plot: {
                    // Animation docs here:
                    // https://www.zingchart.com/docs/tutorials/styling/animation#effect
                    animation: {
                        effect: 'ANIMATION_EXPAND_BOTTOM',
                        method: 'ANIMATION_STRONG_EASE_OUT',
                        sequence: 'ANIMATION_BY_NODE',
                        speed: 275,
                    }
                },
                series: [
                    {
                        // plot 1 values, linear data
                        values: [23,20,27,29,25,17,15],
                        text: 'Week 1',
                    },
                    {
                        // plot 2 values, linear data
                        values: [35,42,33,49,35,47,35],
                        text: 'Week 2'
                    },
                    {
                        // plot 2 values, linear data
                        values: [15,22,13,33,44,27,31],
                        text: 'Week 3'
                    }
                ]
            };

            zingchart.render({
                id: 'myChart',
                data: myConfig,
            });
        }
    }
</script>

<style scoped>

</style>

插件文件夹中的ZangChart.js

import Vue from 'vue'
import {zingchart} from 'zingchart/es6';

Vue.use(zingchart)

nuxt.config.js


export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
      {src: '~/plugins/zangchart'}
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

Answer 1

预计会编译Libarary。而且您似乎是es6。因此，您需要使用编译版本，或者让nuxt通过build.transpile

对其进行编译

{
  build: {
    transpile: [
      'zingchart/es6
    ]
  }
}

尝试在nuxt中使用库时获取意外令牌{

1 个答案: