使用 Apache ECharts 可视化 Neo4j 图数据

Neo4j 开发者

已于 2022-07-07 07:27:34 修改

阅读量9.3k

点赞数 8

分类专栏： Neo4j 基础文章标签： echarts neo4j

于 2022-06-16 17:47:52 首次发布

本文链接：https://blog.csdn.net/neo4jdev/article/details/125320398

版权

什么是 ECharts

ECharts 是 Apache 的一个开源项目，由百度主导开发并捐献给 Apache 开源软件基金会。ECharts 是一个基于 JavaScript 的开源可视化图表库。

ECharts 除了提供常规的折线图、柱状图、饼图等等，今天我们重点来看看提供的关系图。在示例网站上可以看到有如下的例子：

在这里插入图片描述

如何使用 ECharts（及前端可视化工具）

使用JavaScript实现的可视化工具的应用非常广泛，因为它们几乎都能适应网页端和移动端，甚至能够通过嵌入方式整合进原生客户端应用程序里。

全栈系统架构

在正式开始之前，我们先一起看看这类可视化工具在我们整个软件系统里所处的位置，如果你是新手或者没有全栈的经验，也可以从下图中了解一下系统架构。

在这里插入图片描述

当用户需要看到我们的可视化图表时，用户需要通过浏览器来访问我们的前端网页。ECharts就是运行在前端网页里的一个可视化框架。

我们知道“数据可视化”是一个完整的词，可视化的就是数据，ECharts需要指定格式的数据来展示直观的图表，这些数据就是由后端的API层来提供。

后端API可以看作是通过业务逻辑层的处理，业务数据我们就存储在数据库层，比如Neo4j的数据库实例中。

所以我们要做一个可视化的应用时，你需要知道这整个流程，即使这一条线可能由不同的团队来具体实现，你也能够更好地与不同团队沟通交流。

ECharts 入门

ECharts是以JS库的方式分发，我们只需要在前端页面中引入js文件就准备好了：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

然后在页面中创建一个占位的节点用来展示 ECharts 图表：

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

接下来就可以配置 ECharts 如何展示和如何使用数据，就能看到图表了：

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  var option = {
     
    title: {
     
      text: 'ECharts 入门示例'
    },
    series: [
      {
     
        name: '销量',
        type: 'bar',
        data: [5, 20, 36,