ECharts 基本使用指南

绝地灬酷狼 2022-03-18 17:10 262阅读 0赞

官网下载及文档：[https://echarts.baidu.com/download.html][https_echarts.baidu.com_download.html]            ![20190221154417868.png][]

### 一、入门使用： ###

**1、引入 js 文件：**

**2、 准备一个具备高宽的 DOM 容器：**

**3、通过 [echarts.init][] 方法初始化一个 echarts 实例并通过 [setOption][] 方法生成一个简单的柱状图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

## ##

### 二、echarts 认识 ###

首先要说明一点，echarts这个框架的配置内容很是多，所以不要尝试着把这个框架中的方法都给记住，这是不太可能的事。但是由于这个框架的配置文件参数比较多，所以我们就需要来学习一下echarts是怎样来对其进行分类的。

**1、echarts 配置项**

首先echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化，最后把配置方法(setOption)赋值到初始化图形中，详细的配置文件[请戳这里][Link 1]，比较常见的配置大致如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1][]

上面用红色方框标出来的就是echarts的基础配置，也是学习echarts一定要掌握的配置。

**2、echarts API 交互：**

官方文档中的API的分类，大致的API可以分成这样的四类：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2][]

参考文章： [https://www.cnblogs.com/st-leslie/p/5771241.html][https_www.cnblogs.com_st-leslie_p_5771241.html]

使用指南 大牛讲解的很详细  非常感谢~， 具体根据业务来设置配置项

[https_echarts.baidu.com_download.html]: https://echarts.baidu.com/download.html
[20190221154417868.png]: /images/20220318/60e3c3fae21241e88b804023137d62e7.png
[echarts.init]: https://echarts.baidu.com/api.html#echarts.init
[setOption]: https://echarts.baidu.com/api.html#echartsInstance.setOption
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: /images/20220318/273a0a0624fc4444ac5489f52e5a7ce2.png
[Link 1]: https://echarts.baidu.com/option.html#title
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1]: /images/20220318/08a65ec336da401f95fe5660e8b0543f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2]: /images/20220318/a846a205525f40c4ba3c991774d8dfd8.png
[https_www.cnblogs.com_st-leslie_p_5771241.html]: https://www.cnblogs.com/st-leslie/p/5771241.html