package.json文件是組件的配置文件。本文檔介紹package.json文件的字段詳情，您可以參考本文檔的字段說明，根據自身需求，靈活修改package.json文件，自定義組件樣式。
協議版本2規范示例
說明 請著重查看下述案例中的備注信息。
{
"name": "@leaf/pie-multi-radius-with-title", //@命名空間/組件名 （命名空間即組件包名，必須添加，否則無法發布）。
"version": "0.1.5", //版本號。
"dependencies": { //依賴, 不包括datav:/com/依賴。
"bcore": "0.0.9",
"jquery": "2.1.4", //所有依賴的版本號必須鎖死。
"lodash": "4.6.1"
},
"datav": { //datav配置。
"cn_name": "帶標題的多維餅圖", //組件中文名。
"protocol": 2, //協議版本號。
"type": ["regular_pie"], //組件類型。
"supportTheme": true, // 組件聲明是否?持主題。
"view": {
"width": 300,
"height": 200,
"minWidth": 100,
"minHeight": 50
},
"icon": "", //組件圖標鏈接地址。
"apis": { //組件接口，可以多個。
"source": { //接口名。
"handler": "render", //處理接口返回的組件方法名。
"description" : "多維度餅圖接口", //接口描述。
"fields" : { //接口所需字段，可以多個。
"x" : { //字段名。
"description" : "類目", //字段描述。
"type" : "string", //字段類型。
"optional": true //可選字段。
},
"y" : {
"description" : "值",
"type" : "int"
}
}
}
},
"config" : { //組件配置，給編輯器識別用。
"paxis" : {
"type" : "group", //類型：組，詳見<組件config配置說明>。
"name" : "標簽",
"children" : {
"dx" : {
"type" : "text", //類型：文本，詳見<組件config配置說明>。
"name" : "標簽距中心",
"default" : 220
}
}
},
"title" : {
"type" : "group",
"name" : "標題",
"children" : {
"value" : {
"hasVisibility" : "true",
"visible" : "true",
"type" : "text",
"name" : "標題名",
"default" : "我是標題"
},
"font-size" : {
"type" : "number", //類型：數字，詳見<組件config配置說明>。
"name" : "字體",
"min" : 10,
"default" : 32,
"max" : 100
},
"text-align" : {
"name" : "對齊方式",
"type" : "select", //類型：下拉框，詳見<組件config配置說明>。
"options" : [
{"name" : "左對齊", "value" : "left"},
{"name" : "右對齊", "value" : "right"},
{"name" : "居中對齊", "value" : "center"}
],
"default" : "center"
},
"color" : {
"name" : "字體顏色",
"type" : "color", //類型：顏色，詳見<組件config配置說明>。
"default" : "#fff"
},
"background-color" : {
"name" : "背景",
"type" : "color",
"default" : "#000"
}
}
}
}
},
"api_data":{ //接口數據，可以多個。
"source" : [ //接口名，必須和apis中的接口名一致，限制6K。
{"x": "普貨", "y" : 5},
{"x": "普貨", "y" : 22},
{"x": "泡貨", "y" : 22},
{"x": "設備", "y" : 14},
{"x": "礦產", "y" : 15},
{"x": "鋼鐵", "y" : 15},
{"x": "建材", "y" : 12},
{"x": "食品", "y" : 12},
{"x": "糧食", "y" : 28}
],
},
"events": { //全局參數事件配置。
"event-name": { //事件名。
"description": "事件描述", //事件描述。
"fields": { //字段，可以多個。
"value": { //字段名。
"description": "值描述" //字段描述。
}
}
}
},
"publicHandler": {
"show": {
"name": "顯示",
"description"： "描述",
"type": "object", // 可以為object、array、null和any，any表示任意類型。
"fields": {
"data": {
"name": "數據",
"type": "array",
"children": {
...
}
}
}
}
},
}配置項config字段說明
config配置用來說明組件有哪些配置。這些配置既用于傳給組件，也用于說明編輯器的選項。
config配置有以下兩個要求：
- 包含組件默認配置。
- 描述清楚配置的輸入規范，以便編輯器進行識別。
config配置中的type字段用來配置組件的類型和樣式。不同的type類型會展示不同的編輯器UI，合理使用type類型和配置項歸類，可以極大提高組件的質量與用戶體驗，詳情請參見控件配置。
apis字段與api_data字段
apis字段該字段定義了組件接口名，以及該接口所需的字段。接口和字段均可為多個。"apis": { "source": { "handler": "render", "description" : "多維度餅圖接口", "fields" : { "x" : { "description" : "類目", "type" : "string", "optional": true }, "y" : { "description" : "值", "type" : "int" } } }， "source2":{ ... } }字段名 含義 是否必選 備注 apis組件接口 是 一個組件可以包含多個接口。 source接口名 否 可自定義。 handler處理接口返回的數據的方法名 是 該方法名必須在index.js源碼中實現。 description接口描述 否 無。 fields接口所需字段 是 一個接口可以包含多個字段。 fields.x字段名 是 可自定義。 fields.x.description字段描述 否 無。 fields.x.type字段類型 否 包括number、string、boolean、object和array。 fields.x.optional是否為可選字段 否 為boolean類型。 true表示對應字段為可選字段，false表示對應字段為必選字段。api_data字段該字段定義了接口數據，可以包含多個接口數據。接口名必須和apis中的接口名一致，限制為6KB（詳情請參見注釋）。"api_data":{ "source" : [ {"x": "普貨", "y" : 5}, {"x": "普貨", "y" : 22}, {"x": "泡貨", "y" : 22}, {"x": "設備", "y" : 14}, {"x": "礦產", "y" : 15}, {"x": "鋼鐵", "y" : 15}, {"x": "建材", "y" : 12}, {"x": "食品", "y" : 12}, {"x": "糧食", "y" : 28} ], }字段名 含義 是否必選 備注 api_data組件接口數據 是 一個組件可以包含多個接口數據。 source接口名 否 必須和 apis字段中的接口名一致，限制6KB。
events交互事件規范
DataV的交互事件由emit（組件代碼中觸發emit）和events描述（package.json的事件描述）組成。
events字段描述events字段在datav字段下，與config字段同級，定義了交互事件的事件名，描述以及變量名等。{ "events": { "click-me": { "description": "點擊觸發事件", "fields": { "value": { "description": "點擊值" } } } } }字段名 含義 是否必選 備注 click-me事件名 是 可自定義。 description事件描述 否 用于描述該事件的具體作用。 fields字段 是 可包含多個字段名及其描述信息。 fields.value字段名 是 可自定義。 fields.value.description字段描述 否 無。 emit觸發emit方法作為一個基礎類方法，會將事件名及需要的數據作為參數拋出，其他組件即可通過變量名獲取到該組件的參數值，需要在index.js源碼中實現（詳情請參見注釋）。render: function () { this.container.on('click', () => { this.emit('click-me', data) // data必須為一個對象，而不是一個簡單值，屬性名即為變量名。 }) }
type字段
type字段定義了該組件的組件類型（詳情請參見注釋）。
type: ["regular_bar", ...] //一個組件可以屬于多個組，多個組件類型以下劃線分隔："type1_type2"。
{ // 常用組件類型。
regular: "常規圖表",
map: "地圖",
media : "媒體",
network: "關系網絡",
text: "文字",
interact: "交互",
material: "素材"
}publicHandler字段
DataV的行為事件定義是通過publicHandler注冊而成，示例如下。
"publicHandler": {
"select": {
"name": "選擇",
"description"： "選擇某一項",
"type": "object",
"fields": {
"data": {
"name": "數據",
"type": "array",
"children": {
...
}
}
}
}
}如上示例注冊了一個名稱為select的行為事件，并且組件index.js中需要實現select方法，否則方法將報錯。
注意
- 當您還沒有實現
show、hide以及updateOptions方法時，DataV會自動幫您注冊并實現這3個默認方法。 - DataV為您注冊的
updateOptions需要您自行實現，如果沒有實現，DataV會調用組件的render方法。
| 字段名 | 含義 | 是否必選 | 備注 |
|---|---|---|---|
name |
事件名 | 是 | 在節點編程配置中使用。 |
description |
事件描述 | 否 | 無嚴格的字數限制。 |
type |
事件第一入參類型 | 否 | 可選，固定為object。 |
fields |
字段 | 否 | 無。 |
fields.data.name |
字段名 | 是 | 無。 |
fields.data.description |
字段描述 | 否 | 無。 |
fields.data.type |
字段類型 | 是 | 可選，包括number、string、boolean、object和array。 |
fields.data.children |
子節點 | 否 | 當fields.data.type為object或array時需要設置children 字段。
|
fields.data.default |
默認值 | 否 | 當fields.data.type為number、string或boolean時，需要填寫默認值。
|
fields.data.optional |
是否可選 | 否 | 可選，為boolean類型。true表示對應字段為可選字段，false表示對應字段為必選字段。
|