Flask 项目中使用 Vue + ECharts 绘制济南地图

安装 Flask 和 Vue

首先需要安装 Flask 和 Vue，可以使用 pip 和 npm 安装：

pip install flask
npm install -g vue

创建 Flask 项目

使用 Flask 创建一个新的项目，并在项目根目录下创建一个名为'static'的文件夹，用于存放前端页面和静态资源。

mkdir flask_map
cd flask_map
touch app.py
mkdir static

创建 Vue 项目

在'static'文件夹下使用 vue-cli 创建一个新的项目。

cd static
vue create frontend

在创建项目时选择'Manually select features'并勾选'Babel'和'Router'。

配置 vue-router

在'frontend/src'文件夹下创建一个名为'router.js'的文件，并添加以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Map from './views/Map.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'map',
      component: Map
    }
  ]
})

在'frontend/src'文件夹下创建一个名为'views'的文件夹，并在该文件夹下创建一个名为'Map.vue'的 Vue 组件。

在'Map.vue'中可以使用 echarts 绘制地图，代码如下：

<template>
  <div id='chart'></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Map',
  mounted () {
    const chart = echarts.init(document.getElementById('chart'))
    chart.setOption({
      title: {
        text: '济南地图',
        left: 'center'
      },
      tooltip: {},
      series: [{
        type: 'map',
        map: '济南'
      }]
    })
  }
}
</script>

配置 Flask 路由

在'app.py'文件中配置 Flask 路由，使其返回前端页面。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

在'templates'文件夹下创建一个名为'index.html'的模板文件，并引入 vue 的 js 文件和 css 文件以及 echarts 的 js 文件。

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>济南地图</title>
  <link rel='stylesheet' href='{{ url_for('static', filename='css/app.css') }}'>
</head>
<body>
  <div id='app'></div>
  <script src='{{ url_for('static', filename='js/app.js') }}'></script>
  <script src='{{ url_for('static', filename='js/echarts.min.js') }}'></script>
</body>
</html>

启动项目

在项目根目录下运行以下命令启动 Flask 项目：

export FLASK_APP=app.py
flask run

在'static/frontend'文件夹下运行以下命令启动 Vue 项目：

npm run serve

打开浏览器，在地址栏中输入'http://localhost:5000/'，即可看到绘制好的济南地图。