vue里面添加echsrt插件，怎么把获取的后台数据填充到折线图里面

Question

数据出不来

下面的标注是空的，数据没有渲染出来

Answer 1

https://github.com/Rossy11/vu...

Answer 2

我是把echsrts封装为一个组件，通过props传到到组件内部，然后直接调用这个props内的值的，具体可以看下我这个组件是怎么写的

<template>
  <div :id="echartsId" class="myChart"></div>
</template>

<script>
export default {
  props: ['echarts'],
  data () {
    return {
      data: {
        line: {
          animation: false,
          xAxis: {
            type: 'category',
            data: this.echarts.option.title
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.echarts.option.data,
            type: 'line'
          }]
        },
        bar: {
          animation: false,
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.echarts.option.title,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              barWidth: '60%',
              data: this.echarts.option.data
            }
          ]
        },
        pie: {
          animation: false,
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: this.echarts.option.title
          },
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: this.echarts.option.data
            }
          ]
        },
        radar: {
          animation: false,
          radar: {
            name: {
              textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: this.echarts.option.title
          },
          series: [{
            type: 'radar',
            data: this.echarts.option.data
          }]
        }
      }
    }
  },
  created () {
    this.echartsId = Math.random().toString(36).substr(2)
  },
  mounted () {
    this.$nextTick(function () {
      this.colours(this.echarts.type)
    })
  },
  methods: {
    colours (types) {
      let option
      if (types === 'line') {
        option = this.data.line
      }
      if (types === 'bar') {
        option = this.data.bar
      }
      if (types === 'pie') {
        option = this.data.pie
      }
      if (types === 'radar') {
        option = this.data.radar
      }
      this.$echarts.init(document.getElementById(this.echartsId)).setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.myChart{
  width: 100%;
  height: 100%;
}
</style>

Answer 3

此时不能用this了，this已经不再指向vue实例了，所以找不到vue实例下的xAxis，可以console.log(this) 看看