正文

学会ECharts：轻松从数据库提取并格式化数据图表

/0 浏览量
0726

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供丰富的图表类型，可以帮助开发者轻松地将数据可视化。在本文中，我们将探讨如何从数据库中提取数据，并使用 ECharts 将其格式化成图表。

从数据库提取数据

首先，我们需要从数据库中提取数据。以下是一个简单的例子，展示如何使用 Python 和 SQLite 数据库来提取数据。

安装 SQLite

如果你还没有安装 SQLite，可以通过以下命令进行安装：

pip install sqlite3

创建数据库和表

假设我们有一个名为 data.db 的数据库，其中包含一个名为 sales 的表，该表包含以下列：

  • id: 销售记录的唯一标识符
  • date: 销售日期
  • amount: 销售金额

以下是创建数据库和表的 SQL 代码：

CREATE TABLE sales (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    date TEXT,
    amount REAL
);

提取数据

使用 Python 的 sqlite3 模块，我们可以轻松地从数据库中提取数据。以下是一个示例代码：

import sqlite3

# 连接到数据库
conn = sqlite3.connect('data.db')
cursor = conn.cursor()

# 执行查询
cursor.execute("SELECT date, amount FROM sales")

# 获取所有结果
results = cursor.fetchall()

# 关闭连接
cursor.close()
conn.close()

# 打印结果
for row in results:
    print(row)

使用 ECharts 格式化数据

现在我们已经从数据库中提取了数据，接下来我们将使用 ECharts 来格式化这些数据。

安装 ECharts

首先，我们需要将 ECharts 添加到项目中。可以通过以下命令安装 ECharts：

npm install echarts --save

创建图表

以下是一个简单的示例，展示如何使用 ECharts 创建一个柱状图：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '销售数据'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["2017-01-01", "2017-01-02", "2017-01-03", "2017-01-04", "2017-01-05", "2017-01-06", "2017-01-07", "2017-01-08", "2017-01-09", "2017-01-10", "2017-01-11", "2017-01-12", "2017-01-13", "2017-01-14", "2017-01-15", "2017-01-16", "2017-01-17", "2017-01-18", "2017-01-19", "2017-01-20", "2017-01-21", "2017-01-22", "2017-01-23", "2017-01-24", "2017-01-25", "2017-01-26", "2017-01-27", "2017-01-28", "2017-01-29", "2017-01-30", "2017-01-31"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 125, 130, 135, 140, 145, 150]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

将数据传递给 ECharts

现在我们需要将之前从数据库中提取的数据传递给 ECharts。以下是一个示例代码：

// 假设 results 是从数据库中提取的数据
var data = {
    xAxis: results.map(row => row[0]),
    series: [{
        name: '销量',
        type: 'bar',
        data: results.map(row => row[1])
    }]
};

// 更新图表配置项
myChart.setOption({
    xAxis: data.xAxis,
    series: data.series
});

总结

通过以上步骤，我们可以轻松地从数据库中提取数据，并使用 ECharts 将其格式化成图表。ECharts 提供了丰富的图表类型和配置选项，可以帮助我们更好地展示数据。希望本文能帮助你入门 ECharts，并在实际项目中应用它。

-- 展开阅读全文 --