将数据库中的数据接入Echarts图表

为了将数据库中的数据接入ECharts图表，你需要先从数据库中查询数据，然后将这些数据传递给ECharts的配置项。以下是一个简单的示例，假设你使用的是Python语言，并且使用了Flask框架和SQLAlchemy来处理数据库，同时使用了ECharts的JavaScript库。

首先，你需要安装Flask、SQLAlchemy和相应的数据库驱动（如pymysql或psycopg2）。




pip install Flask Flask-SQLAlchemy pymysql

然后，你可以创建一个简单的Flask应用程序，并配置数据库连接：




from flask import Flask, render_template, jsonify
from flask_sqlalchemy import SQLAlchemy
import pymysql
 
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://user:password@localhost:3306/database'
db = SQLAlchemy(app)
 
class DataModel(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    value = db.Column(db.Float)
 
    def __init__(self, value):
        self.value = value
 
    def __repr__(self):
        return f'<DataModel {self.id} - {self.value}>'
 
db.create_all()

然后，你可以创建一个路由来返回ECharts需要的数据：




@app.route('/data')
def data():
    # 查询数据库中的数据
    data_points = DataModel.query.all()
    data_list = [{'value': d.value} for d in data_points]
    return jsonify(data_list)
 
@app.route('/')
def index():
    return render_template('index.html')

在你的HTML模板中，你需要引入ECharts库，并配置ECharts实例：




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts Example</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '数据库中的数据'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
        // 从服务器获取数据
        fetch('/data')

将数据库中的数据接入Echarts图表

评论已关闭

推荐阅读