大数据可视化Echarts基础快速入门

一、什么是Ehcarts？

二、如何使用Echarts

（1）引入Echarts的js文件

（2）查看文档，根据文档编写代码

一、什么是Ehcarts？

首先我们要知道什么数据可视化。什么是数据可视化？数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。简单点来说Echarts就是可以显示出如柱状图，折线图之类的数据可视化工具。

二、如何使用Echarts

Echarts官网：Echarts

（1）引入Echarts的js文件

文件我放在我的主页资源里面了。

（2）查看文档，根据文档编写代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/echarts.min.js"></script>
    <style>
      #ech {
        height: 400px;
        width: 400px;
      }
    </style>
  </head>
  <body>
    <div id="ech"></div>
    <script>
      var chart = echarts.init(document.querySelector("#ech"));

      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      chart.setOption(option);
    </script>
  </body>
</html>