正文

教你轻松用ECharts从数据库数据绘制柱状图，快速掌握可视化技巧

/0 浏览量
0728

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一套丰富的图表类型，包括柱状图、折线图、饼图等。柱状图是展示数据分布情况的一种常用图表，特别适合用来比较不同类别的数据。本文将带你从零开始，使用 ECharts 从数据库中提取数据，绘制一个精美的柱状图。

一、准备工作

在开始之前，请确保你已经完成了以下准备工作：

  1. 安装 Node.js 和 npm：ECharts 需要使用 npm 进行安装。
  2. 安装 ECharts：打开命令行，执行以下命令安装 ECharts：
npm install echarts --save
  1. 选择数据库：你可以选择 MySQL、MongoDB、Oracle 等数据库进行数据存储。

二、连接数据库

以下是使用 Node.js 连接 MySQL 数据库的示例代码：

const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});

connection.connect();

三、查询数据

连接数据库后，你可以编写 SQL 语句查询所需的数据。以下是一个查询示例：

const query = 'SELECT category, count(*) as count FROM your_table GROUP BY category';

connection.query(query, (error, results) => {
  if (error) throw error;
  console.log(results);
});

四、绘制柱状图

接下来，我们将使用 ECharts 绘制柱状图。首先，你需要创建一个 HTML 文件，并在其中引入 ECharts 库：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>柱状图示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script src="chart.js"></script>
</body>
</html>

然后，创建一个名为 chart.js 的 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: [5, 20, 36, 10, 10, 20]
  }]
};

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

将查询到的数据替换 option 中的 data 数组，即可绘制出相应的柱状图。

五、总结

通过以上步骤，你已经学会了如何使用 ECharts 从数据库数据绘制柱状图。希望这篇文章能帮助你快速掌握可视化技巧，让你的数据更加生动形象。

-- 展开阅读全文 --