Lumira 引入 echarts

Lumira 目前开放发SDK的开发，可以很随意引入你要的JS组件

开始之前请先配置好：JAVA eclipse Lumira Designer 软件环境，这里就不一一介绍了。

大概介绍一下

Lumira ：就是SAP 对 BO 上一个产品（Dashboards ）的替换，从FLASH 转到了 javascript h5，做好的仪表盘页面 还是挂在 BO服务器上。该产品的组件比较人，要想满足国人的口味比较难，因此，就要自己开发和引进一些中国特色的组件。这里我们就以引入百度的echarts为例。

1. 下去百度下载 https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js
2. 复制一份组件项目 ，这里我们选择：com.sap.sample.coloredbox 。（项目样例下载地址：https://help.sap.com/viewer/product/SAP_LUMIRA/2.3.0.0/en-US）
3. 导入eclipse ， 导入之前记录改名字。如：com.baidu.echartspie
   
4. 开始修改 MANIFEST.MF contribution.xml component.js
   MANIFEST.MF
   Manifest-Version: 1.0
   Bundle-ManifestVersion: 2
   Bundle-Name: SAP Lumira Component SDK Extension baidu echarts pic
   Bundle-SymbolicName: com.baidu.echartspie;singleton:=true
   Bundle-Version: 23.0.0
   Require-Bundle: com.sap.ip.bi.zen.rt.components.sdk.eclipse
   Bundle-Vendor: wxc

contribution.xml

<?xml version="1.0" encoding="UTF-8"?>
<sdkExtension
	xmlns="http://www.sap.com/bi/zen/sdk"
	id="com.baidu.echartspie"
	title="SAP Lumira Component SDK Extension baidu echarts pic"
	version="23.0"
	vendor="wxc">
	<component
		id="EchartsPic"
		title="Echarts Pic"
		icon="res/icon.png"
		handlerType="div"
		modes="commons m"
		supportsExportContent="true"
		propertySheetPath="res/additional_properties_sheet/additional_properties_sheet.html">
		<requireJs modes="commons m">res/js/component</requireJs>
 		<property
			id="color"
			title="Color"
			type="Color"
			group="Display"
			bindable="true"/>
		<property
			id="onclick"
			title="On Click"
			type="ScriptText"
			group="Events"/>
		<initialization>
			<defaultValue property="LEFT_MARGIN">40</defaultValue>
			<defaultValue property="TOP_MARGIN">40</defaultValue>		
			<defaultValue property="WIDTH">600</defaultValue>
			<defaultValue property="HEIGHT">400</defaultValue>
			<defaultValue property="color">red</defaultValue>
		</initialization>
	</component>
</sdkExtension>

component.js

define(["sap/designstudio/sdk/component", "css!../css/component.css","./folder1/echarts.min"], function(Component, css, echarts) {
    Component.subclass("com.baidu.echartspie.EchartsPic", function() {

        var that = this;
        
        
        this.init = function() {
            this.$().addClass("coloredBox");
            this.$().click(function() {
                that.fireEvent("onclick");
            });
            this.$().append('<div id="main" style="width: 600px;height:400px;"></div>');
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ]
                    }
                ]
            };
	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);

        };

        this.color = function(value) {
        	console.log("出来吧value2："+value);
            if (value === undefined) {
                return this.$().css("background-color");
            } else {
                //this.$().css("background-color", value);
                return this;
            }
        };
    });
});

7. 运行效果图：
   

作者微信：wangxiaochen990