引入第三方 npm 包

安装 npm 包

npm install xxx --save

复制 npm 包到指定目录

• 在页面中使用，就复制 node_modules 目录到 UI2/pcx 目录下
• 在组件中使用，就将 node_modules 目录下组件使用的包，复制到 UI2/组件/components/组件/lib/node_modules 目录下

使用云 ide

使用云 ide 时，使用从本地导入，可以上传一个 zip 文件，将 zip 中的文件导入到 ide 中，导入步骤如下

• 设置为追加模式

在 model 目录下，添加 .appendMode 文件，表示以追加的方式导入代码，如下图所示。

特别注意 不添加这个文件，就是覆盖模式，会清空现有文件，再导入文件

• 准备 zip 文件

zip 文件中只包含需要导入的文件，但是目录必须从 UI2、service 开始，例如要将 node_modules 目录导入到 UI2/pcx 目录下，zip 中第一级目录是 UI2，第二级是 pcx 目录，第三级目录是 node_modules 目录，如下图所示

• 导入 zip 文件

进入高级页，点立即导入

在打开的对话框中，点从本地导入，选择上一步准备好的 zip 文件

导入后，切换到代码页，可以看到 zip 中的文件已经导进来了

使用本地 ide

使用本地 ide，代码都在本地计算机上，可以直接复制

使用案例

平台默认提供了 echarts 组件，从市场添加 echarts 组件后就执行了 nmp 包的导入，即在页面上可不用组件直接通过引用 echarts 资源包用 div（区块）组件画需要的图表，具体操作如下：

• 引入 ecahrts 组件，vue 体系的选择 echarts 图表 vue 组件

• 在页面中放区块组件，并设置宽度和高度

• js 中引用 echarts

import * as echarts from "echarts";

• 在需要时机拼接 echarts 需要的 option，获取区块组件的 dom，展现图表

        let option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'value'
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:[320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name:'邮件营销',
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:[150, 212, 201, 154, 190, 330, 410]
                },
                {
                    name:'搜索引擎',
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:[820, 832, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

        //获取页面dom
         let pageRoot =this.getPage().renderRoot;
        //vue体系的写法： let pageRoot =$page.getPage().renderRoot;
        //获取区块div
        let divChart = pageRoot.querySelector("#div0");
        //初始化echarts
        let myChart = echarts.init(divChart);
        //设置数据
        myChart.setOption(option);

• 运行效果如下：

上面的代码中，使用了 querySelector 获取 DOM 元素，建议使用 ref 获取 DOM 元素