关于将ECharts引入至项目中的几种方式

最新推荐文章于 2024-05-15 16:57:03 发布

JHON_07

最新推荐文章于 2024-05-15 16:57:03 发布

阅读量9.3k

点赞数 1

分类专栏： Echarts

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

方式一：模块化包引入

如果你的项目本身就是模块化的，那引入echarts将很简单，只需要配置好packet路径指向src即可，而且你还可以实现图表的按需加载，由于echarts依赖底层zrender，建议你同时下载zrender到本地，可参考demo，你需要配置如下。

需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中很基本也是很重要的规则，务必在上线时做文件的连接压缩，实例代码如下所示：

//from echarts example
require.config({
    packages: [
        {
            name: 'echarts',
            location: '../../src',      
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender与echarts在同一级目录
            main: 'zrender'
        }
    ]
});

例子：

echarts3模块化包引入源码方法

<!DOCTYPE html>
<html>
<head>
    <title>Echarts3模块化包引入源码-入门</title>
    <meta charset="utf-8" content="text/html">
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

<!--<script src="./echarts-master/test/esl.js"></script>-->
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/2-1-4/esl.js"></script>
<!--<script src="./config.js"></script>-->
<script >

    require.config({
        packages: [
            {
                name: 'zrender',
                location: 'zrender/src', // zrender与echarts在同一级目录
                main: 'zrender'
            },
            {
                name: 'echarts',
                location: 'echarts-master/src',
                main: 'echarts'
            }
        ]
        // urlArgs: '_v_=' + +new Date()
    });

    require([
        'echarts',
        'echarts/chart/bar',
        'echarts/component/legend',
        'echarts/component/axis'
    ],function(echarts){
//
//        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量2']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量2',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })

</script>
</html>
 
 1
2
3

这里写图片描述

题外话

方式二：模块化单文件引入（推荐）

我们建议你使用单一文件引入，如你所发现的，build文件夹下已经生成了多个单文件见下，根据你的需求使用：

1、echarts.js : 经过压缩，包含除地图外的全部图表

2、echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表

3、echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据

4、echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据

如果需要更加定制的打包文件，建议在node环境下安装require.js，build文件夹内为你准备好配置项，可根据你的项目需求，修改config-tpl.js以构建你的最佳配置。

采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，你需要配置如下：

//from echarts example
require.config({
    paths:{ 
        'echarts:'./js/echarts',
        'echarts/chart/bar' : './js/echarts',       // 把所需图表指向单文件
        'echarts/chart/line': './js/echarts'
    }
});

//from echarts example
require(
    [
        'echarts',
        'echarts/chart/line',   // 按需加载所需图表
        'echarts/chart/bar'
    ],
    function (ec) {
        var myChart = ec.init(domMain);
        var option = {
            ...
        }
        myChart.setOption(option);
    }
);

总结来说，模块化如何引入ECharts，你都需要如下4步：

1、引入一个模块加载器，如esl.js或者require.js

2、为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）

3、为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明

4、动态加载echarts然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

方式三：标签式单文件引入

自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入

//from echarts example
< script src="example/www2/js/echarts-plain.js" data-ke-src="example/www2/js/echarts-plain.js" > < /script>
< script >
    var myChart = echarts.init(domMain);
    var option = {
        ...
    }
    myChart.setOption(option);
< /script>

可以直接引入的单文件如下：

1、echarts-plain.js : 经过压缩，包含除地图外的全部图表

2、echarts-plain-original.js : 未压缩，可用于调试，包含除地图外的全部图表

3、echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据

4、echarts-plain-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据

JHON_07

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
关于将ECharts引入至项目中的几种方式

方式一：模块化包引入如果你的项目本身就是模块化的，那引入echarts将很简单，只需要配置好packet路径指向src即可，而且你还可以实现图表的按需加载，由于echarts依赖底层zrender，建议你同时下载zrender到本地，可参考demo，你需要配置如下。需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中很基本也是很重要的规
复制链接

扫一扫