SAPUI5整合Echarts

SAPUI5整合Echarts

1、在index.html中引入echarts.js

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

2、编写ECharts.view.xml

<mvc:View
    controllerName="sap.ui.taking.controller.ECharts"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <VBox justifyContent="Center" alignContent="Center" fitContainer="true" alignItems="Center">
        <Button press="onECharts" text="出现图表"/>  
    </VBox>
</mvc:View>

3、编写ECharts.controller.js

sap.ui.define([
    'sap/ui/core/mvc/Controller',
    'sap/ui/model/json/JSONModel'
], function(Controller,JSONModel) {
    'use strict';
    return Controller.extend("sap.ui.taking.controller.ECharts",{
        onInit:function(){
            
        },
        onECharts:function(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(this.getView().getDomRef());
            // 指定图表的配置项和数据
            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);
        }
    });
});

4、展示效果

以上方式是两年前自建工程，目前不适用，若用 VSCode 创建的模板应用，请参考以下步骤

1、在创建的工程下面，新建名为 js 的文件夹，将对应的源码下载下来，放在该文件夹

2、打开 manifest.json 文件，在 sapui5 节点的 resources 添加如下图内容

"resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ],
      "js":[
        {
          "uri":"js/echarts.min.js",
          "name":"echarts.min.js",
          "version":"4.3.0"
        }
      ]
    },

3、Home.view.xml

<mvc:View controllerName="project1.controller.Home"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m" xmlns:core="sap.ui.core">
    <Page id="page" title="{i18n>title}">
        <VBox justifyContent="Center" alignContent="Center" fitContainer="true" alignItems="Center">
            <Button press="onECharts" text="出现图表"/>
        </VBox>
    </Page>
</mvc:View>

4、Home.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller) {
        "use strict";

        return Controller.extend("project1.controller.Home", {
            onInit: function () {

            },
            onECharts:function(){
                console.log(echarts);
                var myChart = echarts.init(this.getView().getDomRef());
                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);
            }
        });
    });

5、展示效果