项目开发之Echarts的使用（数据可视化）

Echarts 官网

• Echarts运用JS来实现开源可视化库的作用：可以流畅的运行在 PC 和移动设备上，底层依赖矢量图形库 ZRender。
• [官网地址](https://echarts.apache.org/zh/index.html)

Echarts的基本使用步骤：

一、安装：

安装只需要两步。1.下载echarts；2. 引入并注入main.js

注：在下载echarts时，大多情况会遇到安装不成功 或报错的问题。解决此类问题的方法：重装或安装之前的版本。

① 下载echarts

全局引入

② 引入并注册main.js文件

注：若以上引入出现报错情况，则可以尝试以下引入方法

到此，echarts的安装就OK了

_以上红色字体的内容是一个版本↑↑↑__ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ 

_以下黑色字体的内容是另一个版本↓↓↓__ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ __ 

第一步：下载并引入echarts.js文件

<script src="js/echarts.min.js"></script>

or

<script src="./js/echarts.min.js"></script>

二、使用：

( 将echarts安装引入后，接下来在项目中使用所安装引入的echarts )

第二步：准备一个具备宽高的DOM容器

 ① 为echarts准备一个具有宽高的div容器（即存放图表的一个占位）

 <div id="container"></div>

or

<div id="main" style="width: 600px;height:400px;"></div>

第三步：初始化echarts实例对象

② 获取定义id并通过echarts.init()方法初始化echarts实例

var echart = echarts.init(document.getElementById("app"));

or