Vue+echart 展示后端获取的数据实现

下面我将详细讲解“Vue+echart 展示后端获取的数据实现”的完整攻略。首先我们需要明确几个概念：

Vue：一款轻量级的前端框架，可以实现响应式的数据绑定和组件化开发；
Echarts：一款强大的可视化图表库，支持多种图表类型和交互方式，可以方便地展示数据；
后端：在本文中，代表数据源，可以是数据库、文件等。

下面我们按照以下步骤来实现：

1. 前端页面及数据请求

使用 Vue 开发前端页面，用 axios 库发起请求获取后端数据。通常情况下，我们会使用 Vue 的组件化开发方式来实现这个过程，这里就以单文件组件为例：

<template>
  <div>
    <el-button @click="getData">获取数据</el-button>
    <div>
      <el-select v-model="selected" placeholder="请选择">
        <el-option v-for="item in selectData" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button @click="drawChart">绘制图表</el-button>
    </div>
    <div ref="myChart" :style="{width: '500px', height: '500px'}"></div>
  </div>
</template>

<script>
import axios from 'axios'
import * as echarts from 'echarts'
export default {
  data () {
    return {
      chartData: null,
      selectData: [],
      selected: ''
    }
  },
  methods: {
    getData () {
      axios.get('/api/data')
        .then(res => {
          this.chartData = res.data
          Object.keys(this.chartData).forEach(key => {
            this.selectData.push({ value: key, label: key })
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    drawChart () {
      if (this.selected === '') {
        return
      }
      this.myChart.clear()
      const option = {
        title: { text: this.selected },
        tooltip: {},
        xAxis: {
          data: Object.keys(this.chartData[this.selected].x)
        },
        yAxis: {},
        series: [
          {
            name: '数据',
            type: 'bar',
            data: Object.values(this.chartData[this.selected].y)
          }
        ]
      }
      this.myChart.setOption(option)
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.myChart)
  }
}
</script>

在这段代码中，我们定义了一个名为 ChartData.vue 的单文件组件，包含了一个按钮用来获取数据、一个下拉框用来选择要展示的数据，一个按钮用来绘制图表，以及一个用来渲染图表的 div 元素。在组件的 data 中定义了三个变量，chartData 代表从后端获取的数据，selectData 代表下拉框中的选项，selected 代表当前选中的选项。组件中的 getData 方法使用 axios 库发起请求，将获取到的数据保存在 chartData 变量中，并根据数据动态生成下拉框中的选项。drawChart 方法根据选中的选项绘制图表。在组件的 mounted 钩子中初始化 echarts 实例，并通过 ref 获取渲染图表的 div 元素。

2. 后端数据处理

在后端处理数据，将数据转化为前端能够方便处理的格式。以 Flask 为例，实现一个数据接口 /api/data：

import random
from flask import Flask, jsonify

app = Flask(__name__)

data = {
    '数据1': {
        'x': {
            '1月': '1月',
            '2月': '2月',
            '3月': '3月',
            '4月': '4月',
            '5月': '5月',
            '6月': '6月',
            '7月': '7月',
            '8月': '8月',
            '9月': '9月',
            '10月': '10月',
            '11月': '11月',
            '12月': '12月'
        },
        'y': {
            '1月': random.randint(10, 100),
            '2月': random.randint(10, 100),
            '3月': random.randint(10, 100),
            '4月': random.randint(10, 100),
            '5月': random.randint(10, 100),
            '6月': random.randint(10, 100),
            '7月': random.randint(10, 100),
            '8月': random.randint(10, 100),
            '9月': random.randint(10, 100),
            '10月': random.randint(10, 100),
            '11月': random.randint(10, 100),
            '12月': random.randint(10, 100)
        }
    },
    '数据2': {
        'x': {
            '学科1': '学科1',
            '学科2': '学科2',
            '学科3': '学科3',
            '学科4': '学科4',
            '学科5': '学科5',
            '学科6': '学科6',
            '学科7': '学科7',
            '学科8': '学科8',
            '学科9': '学科9',
            '学科10': '学科10'
        },
        'y': {
            '学科1': random.randint(10, 100),
            '学科2': random.randint(10, 100),
            '学科3': random.randint(10, 100),
            '学科4': random.randint(10, 100),
            '学科5': random.randint(10, 100),
            '学科6': random.randint(10, 100),
            '学科7': random.randint(10, 100),
            '学科8': random.randint(10, 100),
            '学科9': random.randint(10, 100),
            '学科10': random.randint(10, 100)
        }
    }
}

@app.route('/api/data')
def get_data():
    return jsonify(data)

这里我们使用 Flask 创建了一个名为 app 的应用，定义了一个变量 data，表示要展示的数据，数据中包含了两个数据集，每个数据集拥有一个 x 轴和一个 y 轴，x 轴表示数据的分类，y 轴表示数据的值，每个分类对应一个数值。注意数据可以是从数据库中查询的结果，也可以是从文件中读取的内容。在请求 /api/data 时，使用 Flask 的 jsonify 方法将数据序列化为 JSON 格式并返回给前端。