vueecharts获取后端数据

要在 Vue 中使用 ECharts，需要先安装 ECharts 和 vue-echarts。

1. 安装 ECharts 和 vue-echarts

npm install echarts --save-dev
npm install vue-echarts --save-dev

2. 引入 ECharts 和 vue-echarts

在 main.js 中引入 ECharts 和 vue-echarts：

import Vue from 'vue'
import ECharts from 'echarts'
import EChartsVue from 'vue-echarts'

Vue.component('v-chart', EChartsVue.component)
Vue.prototype.$echarts = ECharts

3. 在 Vue 组件中使用 vue-echarts

在组件模板中引入 vue-echarts，并传入数据和配置：

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

<script>
export default {
  data() {
    return {
      chartOptions: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 15]
        }]
      }
    }
  }
}
</script>

4. 获取后端数据

使用 Vue 的生命周期钩子函数 mounted，在组件挂载后获取后端数据，然后将数据传给 ECharts 进行渲染：

<template>
  <div>
    <v-chart ref="myChart" :options="chartOptions"></v-chart>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      chartOptions: {
        title: {
          text: 'ECharts 示例'
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: []
        }]
      }
    }
  },
  mounted() {
    axios.get('/api/data').then(response => {
      const data = response.data
      const xAxisData = []
      const seriesData = []
      data.forEach(item => {
        xAxisData.push(item.name)
        seriesData.push(item.value)
      })
      this.chartOptions.xAxis.data = xAxisData
      this.chartOptions.series[0].data = seriesData
      this.$refs.myChart.setOption(this.chartOptions)
    })
  }
}
</script>

以上代码中，使用 axios 发送 GET 请求获取后端数据，然后将数据处理成 ECharts 需要的格式，最后在组件挂载完成后调用 setOption 方法渲染图表。