Apache ECharts 一个基于 JavaScript 的开源可视化图表库

墨蓝 2024-03-22 14:20 38阅读 0赞

## 一： ECharts 特性 ##

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。  
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。  
[官网][Link 1] :https://echarts.apache.org/zh/index.html  
![在这里插入图片描述][4ffa2885e4e24f4aaec04ee457e0ab42.png]

## 二：ECharts 下载 ##

Apache ECharts 支持多种下载方式,这里我们以进入官网下载  
![在这里插入图片描述][7b47c192d97f490aa6f8e856c5116579.png]

## 三：ECharts 快速上手 ##

在 [https://www.jsdelivr.com/package/npm/echarts][https_www.jsdelivr.com_package_npm_echarts] 选择 `dist/echarts.js`，点击并保存为 `echarts.js`文件。

#### 引入 Apache ECharts ####

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

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

#### 绘制一个简单的图表 ####

在`</head>` 之后，添加：

然后就可以通过 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>

![在这里插入图片描述][e668bccc1c7f480c9c9bacb76225dbda.png]

## 四：示例 ##

我们可以点击官网的示例界面在查找自己项目所需要的报表统计。  
![在这里插入图片描述][e5b1edb2d6de42eeab4f4b98bd683d14.png]  
修改代码可以达到自己想要的结果，在写项目时，我们可以传入前端给我们的项目使用  
![在这里插入图片描述][ad5e5227b49c44d5aad0333d4c8be8e4.png]

[Link 1]: https://echarts.apache.org/zh/index.html
[4ffa2885e4e24f4aaec04ee457e0ab42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/adef22999e534737bb821ef7ee9aa773.png
[7b47c192d97f490aa6f8e856c5116579.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5e18aeb1c3c949d9996e2bd8a73804fc.png
[https_www.jsdelivr.com_package_npm_echarts]: https://www.jsdelivr.com/package/npm/echarts
[e668bccc1c7f480c9c9bacb76225dbda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1811d9d49e79470ea729e0c2b5f80bcb.png
[e5b1edb2d6de42eeab4f4b98bd683d14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c1cdec042ab4473ca37beb3704ce5c07.png
[ad5e5227b49c44d5aad0333d4c8be8e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2df665cfb05d4d7b99f9e0a0cea9da3d.png