“错误:组件series.line不存在。请首先加载它。”在vue-echarts

时间:2018-11-13 06:32:32

标签: javascript vue.js echarts

我导入了line组件,但它仍在抱怨。我根据this使用vue cli 3创建了项目,但是在项目中找不到vue.config.js。因此,我手动创建了vue.config.js并将其放在babel.config.js的同一文件夹中,它破坏了我的路由器。

这是我的折线图:

<template>
  <v-chart :options="options"/>
</template>


<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/line'

export default {
  name: 'line-chart',

  components: {
    'v-chart': ECharts
  },

  props: {
    data: Object
  },

  data () {
    return {
      options: {
        xAxis: {
          type: 'category',
          data: this.data.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'line',
          data: this.data.values
        }],
        animationEasing: 'linear'
      }
    }
  }
}

</script>

1 个答案:

答案 0 :(得分:1)

//在我的main.js中

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

Vue.component('v-chart', ECharts);
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
 <template>
  <v-container>
    <v-chart :options="polar"/>
  </v-container>
</template>

<script>
  export default {
      data: function () {
          let data = []

          for (let i = 0; i <= 360; i++) {
              let t = i / 180 * Math.PI
              let r = Math.sin(2 * t) * Math.cos(2 * t);
              data.push([r, i])
          }

          return {
              polar: {
                  title: {
                      text: '极坐标双数值轴'
                  },
                  legend: {
                      data: ['line']
                  },
                  polar: {
                      center: ['50%', '54%']
                  },
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                          type: 'cross'
                      }
                  },
                  angleAxis: {
                      type: 'value',
                      startAngle: 0
                  },
                  radiusAxis: {
                      min: 0
                  },
                  series: [
                      {
                          coordinateSystem: 'polar',
                          name: 'line',
                          type: 'bar',
                          showSymbol: false,
                          data: data
                      }
                  ],
                  animationDuration: 2000
              }
          }
      }
  }
</script>

<style>

</style>

这是我的观点 我认为您在系列中遇到问题