javascript-js中echart的使用技巧

亦凉 2023-10-14 09:01 15阅读 0赞

#### javascript中echart的使用技巧 ####

*   *  一. javascript中echart简介：
     *   *  1.1 丰富的可视化类型
         *  1.2 多种数据格式无需转换直接使用
         *  1.3 千万数据的前端展现
     *  二. echart的一些特殊技巧：
     *  2.1. js中echart的加载进度条的显示与关闭
     *  2.2. Echart自带的加载方式有两种：
     *  2.3. js中echart的异步加载require的用法

### 一. javascript中echart简介： ###

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

#### 1.1 丰富的可视化类型 ####

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

#### 1.2 多种数据格式无需转换直接使用 ####

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。

为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。

#### 1.3 千万数据的前端展现 ####

通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。

几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。因此 ECharts 同时提供了对流加载（4.0+）的支持，你可以使用 WebSocket 或者对数据分块后加载，加载多少渲染多少！不需要漫长地等待所有数据加载完再进行绘制。

### 二. echart的一些特殊技巧： ###

### 2.1. js中echart的加载进度条的显示与关闭 ###

Echart自带的加载进度条可以通过以下代码来显示和关闭：

显示进度条：

var myChart = echarts.init(document.getElementById('myChart'));
    myChart.showLoading();

关闭进度条：

var myChart = echarts.init(document.getElementById('myChart'));
    myChart.hideLoading();

其中，`myChart`是Echart实例化后的对象，`showLoading()`方法用于显示进度条，`hideLoading()`方法用于关闭进度条。在数据加载完成后，可以调用`hideLoading()`方法来关闭进度条。

### 2.2. Echart自带的加载方式有两种： ###

Echart自带的加载方式有两种：

1.  异步加载

使用异步加载方式，需要在HTML文件中引入Echart的JS文件，然后在JS文件中使用`require`方法异步加载Echart的模块。

// 引入Echart的JS文件
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    
    // 在JS文件中异步加载Echart的模块
    require(['echarts'], function (echarts) {
        
      // 在这里使用Echart的API
    });

1.  同步加载

使用同步加载方式，需要在HTML文件中引入Echart的JS文件，并在JS文件中直接使用Echart的API。

// 引入Echart的JS文件
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    
    // 在JS文件中直接使用Echart的API
    var myChart = echarts.init(document.getElementById('main'));

### 2.3. js中echart的异步加载require的用法 ###

在使用 ECharts 进行异步加载时，需要使用 requireJS 进行模块化加载。下面是一个简单的示例：

1.  在 HTML 文件中引入 requireJS：

1.  在 JS 文件中定义一个 require 配置：

require.config({
        
        paths: {
        
            echarts: 'https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min'
        }
    });

1.  在 JS 文件中使用 require 加载 ECharts：

require(
        [
            'echarts',
            'echarts/chart/bar' // 加载柱状图模块
        ],
        function (echarts) {
        
            // 初始化图表
            var myChart = echarts.init(document.getElementById('main'));
            // 配置项和数据
            var option = {
        
                // ...
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    );

在上面的代码中，我们使用 require 加载了 ECharts 和柱状图模块，然后在回调函数中初始化了图表并设置了配置项和数据。