图形报表ECharts

素颜马尾好姑娘i 2024-05-07 22:25 6阅读 0赞

#### **1、 ECharts简介** ####

ECharts缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的使用 JavaScript实现的数据可视化工具，可以流畅的运行在 PC 和移动设备上，兼容当前绝大 部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图 形库 ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。

官网：[https://echarts.baidu.com/][https_echarts.baidu.com]

下载地址：[https://echarts.baidu.com/download.html][https_echarts.baidu.com_download.html]

#### 2、ECharts入门教程 ####

官方教程:[5 分钟上手 ECharts][5 _ ECharts]

##### 1.下载并引入scharts.js文件 #####

获取 ECharts：

[下载地址![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://echarts.apache.org/zh/download.html][icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_echarts.apache.org_zh_download.html]![3531024d947e46eba16d0aeb9ffb02c9.png][]

![fd0c1b097e764c3abaff2d7c9f0ae992.png][]

我们只需要将dist目录下的echarts.js文件引入到页面上就可以使用了

![021a24e68f7a4149a40ab442cfaa4765.png][]

##### 2.快速上手 #####

**引入 Apache ECharts**

在刚才保存`echarts.js`的目录新建一个`index.html`文件，内容如下：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        
        <script src="echarts.js"></script>
      </head>
    </html>

打开这个`index.html`，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。

绘制一个简单的图表  
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 之后，添加：

然后就可以通过 `echarts.init` 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>ECharts</title>
        
        <script src="echarts.js"></script>
      </head>
      <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'));
    
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
              data: ['销量']
            },
            xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          };
    
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        </script>
      </body>
    </html>

![594edb4f3e3e49598acd00fcdb044d62.png][]

[https_echarts.baidu.com]: https://echarts.baidu.com/
[https_echarts.baidu.com_download.html]: https://echarts.baidu.com/download.html
[5 _ ECharts]: https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
[icon-default.png_t_N7T8]: https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8
[icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_echarts.apache.org_zh_download.html]: https://echarts.apache.org/zh/download.html
[3531024d947e46eba16d0aeb9ffb02c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/709493dc56bc457fbc57f967dd422565.png
[fd0c1b097e764c3abaff2d7c9f0ae992.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/20813082c8f44ad59a5a9f3ddffeffba.png
[021a24e68f7a4149a40ab442cfaa4765.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/42a271b692564057bb5f31ac1dc03439.png
[594edb4f3e3e49598acd00fcdb044d62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/48fbeaa5e3784c38b163d992955ebacc.png