"Error: Component series.line not exists. Load it first." in vue-echarts

user_3479471 0
Viewed 2530

I imported the line component, but it's still complaining. I created my project with vue cli 3 and according to this, but I cannot find vue.config.js in my project. So I manually created vue.config.js and put it in the same folder of babel.config.js, and it broke my router.

This is my line chart:

<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>
echarts vue.js javascript
1 Answers

//in my 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>

and this is my view I think you have a problem in series

user_84551710
Related