このトピックでは、 ECharts の Web サイトでBar Animation Delayの例を使用して ECharts ウィジェットをカプセル化する方法について説明します。 ここで例として使用されているこの echarts.datatool タイプのような EChart は、DataV と直接の互換性はありません。 したがって、このチャートタイプをウィジェットにカプセル化するには、まずこの EChart の設定とデータを抽出し、次にそれらをサポートされている形式に変換する必要があります。
設定とデータの抽出
この例の左側のコードバーの設定によると、 option 変数から設定とデータを抽出できます。 完全なコードは以下の通りです。
var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push('Catagory' + i);
Data1.push (math. sin (I/5) * (I/5-10) + I/6) * 5 );
data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
}
option = {
title: {
text: 'Bar Animation Delay'
},
legend: {
data: ['bar', 'bar2'],
align: 'left'
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
silent: false,
splitLine: {
show: false
}
},
yAxis: {
},
series: [{
name: 'bar',
type: 'bar',
data: data1,
animationDelay: function (idx) {
return idx * 10;
}
}, {
name: 'bar2',
type: 'bar',
data: data2,
animationDelay: function (idx) {
return idx * 10 + 100;
}
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
上記のコードでは、次のデータ項目設定を見つけることができます。
- option.xAxis.data
- option.series[x].data
これらの設定を DataV によって認識されるデータ要素に変換するには、以下の操作を実行する必要があります。
[
{
x: 'An item value of option, xAxis, and data',
y: 'An item value of option, series[x], and data',
s: 'An item value of option, series[x], and name'
}
]
前の 3 つのデータ項目を除いて、残りは設定です。
package.json の記述
package.json の仕様に基づいて上記の設定とデータを package.json に書き込みます。 以下のことに注意する必要があります。
- ウィジェットに不要な設定を削除することができます。
- 必要な設定がサンプルコードにない場合は、ECharts チャートの設定から取得できます。
- 以下の項目を除いて、いくつかの ECharts 構成項目が DataV でサポートされています。
- 関数である設定項目
- "echarts.datatool.xxx" など、一部の ECharts チャートタイプの設定項目
- テキストタイプと数値タイプの両方など、複数のアイテムタイプを含む構成アイテム
- 設定スキーマは ECharts のそれと一致する必要があります。 DataV との互換性がないために設定スキーマと ECHarts の設定を一致させることができない場合は、index.js に変換して、それらが一致することができるようにする必要があります。 このプロセスを通じて、eVault で直接サポートされていない "echarts.datatool" のような EChart でも、変換後に DataV と互換性を持たせることができます。
以下は、前の例から ECharts-chart 変換した package.json の一部です。
{
"datav": {
"cn_name": "Bar chart",
"icon": "",
"protocol": 2,
"type": [
"regular_bar"
],
"View ":{
"width": "600",
"height": "200",
"minWidth": "40",
"minHeight": "20"
},
"apis": {
"source": {
"handler": "render",
"description": "Interface description of echarts animation delay chart",
"fields": {
"x": {
"description": "Value of the x axis"
},
"y": {
"description": "Value of the y axis"
},
"s": {
"description": "Value of the y axis",
"optional": true
}
}
}
},
"config": {
"legend": {
//...
},
"grid": {
//...
},
"xAxis": {
"name": "x axis",
"type": "group",
"children": {
"show": {
"name": "Display",
"type": "boolean",
"default": false
},
"offset": {
"name": "Offset",
"type": "number",
"default": 0
},
"type": {
"name": "type",
"type": "text",
"default": "category"
},
"name": {
"name": "name",
"type": "text",
"default": ""
},
"nameLocation": {
"name": "Name location",
"type": "text",
"default": "end"
},
"nameTextStyle": {
"name": "Name stype",
"type": "group",
"children": {
"color": {
"name": "Color",
"type": "color",
"default": "rgba(0,0,0,0)"
},
"fontStyle": {
"name": "Font style",
"type": "text",
"default": "normal"
},
"fontWeight": {
"name": "Font weight",
"type": "text",
"default": "normal"
},
"fontFamily": {
"name": "Font family",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "Font size",
"type": "number",
"default": 10
}
},
"fold": true
},
"nameGap": {
"name": "Gap between names",
"type": "number",
"default": 15
},
"nameRotate": {
"name": "Name rotation",
"type": "number",
"default": null
},
"inverse": {
"name": "Inverse",
"type": "boolean",
"default": false
},
"boundaryGap": {
"Name": "Boundary gap ",
"type": "boolean",
"default": true
},
"min": {
"name": "Min",
"type": "text",
"default": "dataMin"
},
"max": {
"name": "Max",
"type": "text",
"default": "dataMax"
},
"scale": {
"name": "Auto scaling",
"type": "boolean",
"default": false
},
"splitNumber": {
"name": "Split number",
"type": "number",
"default": 5
},
"minInterval": {
"Name": "Min interval",
"type": "number",
"default": 0
},
"logBase": {
"name": "Log base",
"type": "number",
"default": 10
},
"silent": {
"name": "Silent",
"type": "boolean",
"default": false
},
"triggerEvent": {
"name": "Trigger event",
"type": "boolean",
"default": false
},
"axisLine": {
"name": "Axis line",
"type": "group",
"children": {
"show": {
"name": "Display",
"type": "boolean",
"default": false
},
"onZero": {
"name": "On zero",
"type": "boolean",
"default": true
},
"lineStyle": {
"name": "Line style",
"type": "group",
"children": {
"color": {
"name": "Color",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(255,255,255,. 8)"
}
},
"width": {
"name": "Width",
"type": "number",
"default": 1
},
"type": {
"name": "Type",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"axisTick": {
"name": "Axis tick",
"type": "group",
"children": {
"show": {
"name": "Display",
"type": "boolean",
"default": false
},
"alignWithLabel": {
"name": "Align with label",
"type": "boolean",
"default": false
},
"interval": {
"name": "Interval",
"type": "number",
"default": 0
},
"inside": {
"name": "Inside",
"type": "boolean",
"default": false
},
"length": {
"name": "Length",
"type": "number",
"default": 5
},
"lineStyle": {
"name": "Line style",
"type": "group",
"children": {
"color": {
"name": "Color",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(255,255,255,. 8)"
}
},
"width": {
"name": "Width",
"type": "number",
"default": 1
},
"type": {
"name": "Type",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"axisLabel": {
"name": "Axis label",
"type": "group",
"children": {
"show": {
"name": "Show",
"type": "boolean",
"default": true
},
"interval": {
"name": "Interval",
"type": "number",
"default": 13
},
"inside": {
"name": "Inside",
"type": "boolean",
"default": false
},
"rotate": {
"name": "Rotation",
"type": "number",
"default": 0
},
"margin": {
"name": "Margin",
"type": "number",
"default": 8
},
"showMinLabel": {
"name": "Show minimum label",
"type": "boolean",
"default": true
},
"showMaxLabel": {
"name": "Show maximum label",
"type": "boolean",
"default": true
},
"textStyle": {
"name": "Text style",
"type": "group",
"children": {
"color": {
"name": "Color",
"type": "color",
"default": "rgba(255,255,255,. 8)"
},
"fontStyle": {
"name": "Font style",
"type": "text",
"default": "normal"
},
"fontWeight": {
"name": "Font weight",
"type": "text",
"default": "normal"
},
"fontFamily": {
"name": "Font family",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "Font size",
"type": "number",
"default": 10
},
"align": {
"name": "Alignment",
"type": "select",
"range": [
{
"name": "Auto",
"value": "auto"
},
{
"name": "Left",
"value": "left"
},
{
"name": "Center",
"Value": "center"
},
{
"name": "Right",
"value": "right"
}
],
"default": ""
},
"baseline": {
"name": "Baseline",
"type": "text",
"default": ""
}
},
"fold": true
}
},
"fold": true
},
"splitLine": {
"name": "split line",
"type": "group",
"children": {
"show": {
"name": "show",
"type": "boolean",
"default": false
},
"interval": {
"name": "interval",
"type": "number",
"Default": 0
},
"lineStyle": {
"name": "Line style",
"type": "group",
"children": {
"width": {
"name": "Width",
"type": "number",
"default": 1
},
"type": {
"name": "Type",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"splitArea": {
"name": "split area",
"type": "group",
"children": {
"interval": {
"name": "interval",
"type": "number",
"default": 0
},
"show": {
"name": "show",
"type": "boolean",
"default": false
},
"areaStyle": {
"name": "Area style",
"type": "group",
"children": {
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"axisPointer": {
"name": "Axis pointer",
"type": "group",
"children": {
"show": {
"name": "Show",
"type": "boolean",
"default": true
},
"type": {
"name": "Type",
"type": "select",
"default": "line",
"range": [
{
"name": "Line pointer",
"value": "line"
},
{
"name": "Shadow pointer",
"value": "shadow"
}
]
},
"snap": {
"name": "Snap",
"type": "boolean",
"default": false
},
"value": {
"name": "Initial value",
"type": "number",
"default": null
},
"status": {
"name": "Status",
"type": "boolean",
"default": false
},
"label": {
"name": "Label",
"type": "group",
"children": {
"show": {
"name": "Show",
"type": "boolean",
"default": false
},
"precision": {
"name": "precision",
"type": "number",
"default": "'auto'"
},
"margin": {
"name": "Margin",
"type": "boolean",
"default": 3
},
"textStyle": {
"name": "Text style",
"Type": "group ",
"children": {
"color": {
"name": "Color",
"type": "color",
"default": "#ffffff"
},
"fontStyle": {
"name": "Font style",
"type": "text",
"default": "normal"
},
"fontWeight": {
"name": "Font weight",
"type": "text",
"default": "normal"
},
"fontFamily": {
"name": "Font family",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "Font size",
"type": "number",
"default": 10
}
},
"fold": true
},
"backgroundColor": {
"name": "Background color",
"type": "text",
"default": "auto"
},
"borderColor": {
"name": "Border color",
"type": "text",
"default": ""
},
"borderWidth": {
"name": "Border width",
"type": "text",
"default": ""
}
},
"fold": true
},
"lineStyle": {
"name": "Line style",
"type": "group",
"show": [
[
"type",
"$eq",
"line"
]
],
"children": {
"color": {
"name": "Color",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(0,0,0,0)"
}
},
"width": {
"name": "Width",
"type": "number",
"default": 1
},
"type": {
"name": "Type",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
},
"shadowStyle": {
"name": "Shadow style",
"type": "group",
"show": [
[
"type",
"$eq",
"shadow"
]
],
"children": {
"color": {
"name": "Color",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(150,150,150,0.3)"
}
},
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
},
"handle": {
"name": "Handle",
"type": "group",
"children": {
"show": {
"name": "Show",
"type": "boolean",
"default": false
},
"size": {
"name": "Size",
"type": "number",
"default": 45
},
"margin": {
"name": "Margin",
"type": "number",
"default": 50
},
"color": {
"name": "Color",
"type": "text",
"default": "#333"
},
"throttle": {
"name": "Throttle",
"type": "number",
"default": 40
}
},
"fold": true
}
},
"fold": true
}
},
"fold": true
},
"yAxis": {
//...
},
"tooltip": {
//...
},
"series": {
"name": "Series",
"type": "array",
"fold": true,
"default": [
{
"name": "bar",
"type": "bar",
"legendHoverLink": true,
"coordinateSystem": "cartesian2d",
"label": {
"normal": {
"show": false,
"textStyle": {
"color": "#000",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 10
}
},
"emphasis": {
"show": false,
"textStyle": {
"color": "#000",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 10
}
}
},
"itemStyle": {
"normal": {
"color": {
"style": "single",
"value": "#00c2ff"
},
"borderColor": {
"style": "single",
"value": "#000"
},
"borderWidth": 0,
"borderType": "solid",
"barBorderRadius": 0,
"opacity": 1
},
"emphasis": {
"color": {
"style": "single",
"value": "#00c2ff"
},
"borderColor": {
"style": "single",
"value": "#000"
},
"borderWidth": 0,
"borderType": "solid",
"opacity": 1
}
},
"stack": "",
"barWidth": "50%",
"barMinHeight": 0,
"barGap": "30%",
"barCategoryGap": "20%",
"silent": false
},
{
"name": "bar2",
"type": "bar",
"legendHoverLink": true,
"coordinateSystem": "cartesian2d",
"label": {
"normal": {
"show": false,
"textStyle": {
"color": "#000",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 10
}
},
"emphasis": {
"show": false,
"textStyle": {
"color": "#000",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 10
}
}
},
"itemStyle": {
"normal": {
"color": {
"style": "single",
"value": "#5bffb0"
},
"borderColor": {
"style": "single",
"value": "#000"
},
"borderWidth": 0,
"borderType": "solid",
"barBorderRadius": 0,
"opacity": 1
},
"emphasis": {
"color": {
"style": "single",
"value": "#5bffb0"
},
"borderColor": {
"style": "single",
"value": "#000"
},
"borderWidth": 0,
"borderType": "solid",
"opacity": 1
}
},
"stack": "",
"barWidth": "50%",
"barMinHeight": 0,
"barGap": "30%",
"barCategoryGap": "20%",
"silent": false
}
],
"child": {
"type": "object",
"name": "Series <%= i+1 %>",
"child": {
"name": {
"name": "Name",
"type": "text",
"default": ""
},
"legendHoverLink": {
"name": "Legend hover link highlight",
"type": "boolean",
"default": true
},
"coordinateSystem": {
"name": Coordinate system",
"type": "text",
"default": "cartesian2d"
},
"label": {
"name": "Label",
"type": "group",
"children": {
"normal": {
"name": "Normal",
"type": "group",
"children": {
"show": {
"name": "Show",
"type": "boolean",
"default": false
},
"textStyle": {
"name": "Text style",
"type": "group",
"children": {
"color": {
"name": "Color",
"type": "color",
"default": "#000"
},
"fontStyle": {
"name": "Font style",
"type": "text",
"default": "normal"
},
"fontWeight": {
"name": "Font weight",
"type": "text",
"default": "normal"
},
"fontFamily": {
"name": "Font family",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "Font size",
"type": "number",
"default": 10
}
},
"fold": true
}
},
"fold": true
},
"emphasis": {
"name": "Emphasis",
"type": "group",
"children": {
"show": {
"name": "Show",
"type": "boolean",
"default": false
},
"textStyle": {
"name": "Text style",
"type": "group",
"children": {
"color": {
"name": "Color",
"type": "color",
"default": "#000"
},
"fontStyle": {
"name": "Font style",
"type": "text",
"default": "normal"
},
"fontWeight": {
"name": "Font weight",
"type": "text",
"default": "normal"
},
"fontFamily": {
"name": "Font family",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "Font size",
"type": "number",
"default": 10
}
},
"fold": true
}
},
"fold": true
}
},
"fold": true
},
"itemStyle": {
"name": "Item style",
"type": "group",
"children": {
"normal": {
"name": "Normal",
"type": "group",
"children": {
"color": {
"name": "Color",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(0,0,0,0)"
}
},
"borderColor": {
"name": "Border color",
"type": "multicolor",
"default": {
"style": "single",
"value": "#000"
}
},
"borderWidth": {
"name": "Border width",
"type": "number",
"default": 0
},
"borderType": {
"name": "Border type",
"type": "text",
"default": "solid"
},
"barBorderRadius": {
"name": "Bar border radius",
"type": "number",
"default": 0
},
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
},
"emphasis": {
"name": "Emphasis",
"type": "group",
"children": {
"color": {
"name": "Color",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(0,0,0,0)"
}
},
"borderColor": {
"name": "Border color",
"type": "multicolor",
"default": {
"style": "single",
"value": "#000"
}
},
"borderWidth": {
"name": "Border width",
"type": "number",
"default": 0
},
"borderType": {
"name": "Border type",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"stack": {
"name": "Stack",
"type": "text",
"default": ""
},
"barWidth": {
"name": "Bar width",
"type": "text",
"default": "50%"
},
"barMinHeight": {
"name": "Minimum bar height",
"type": "number",
"default": 0
},
"barGap": {
"name": "Bar gap",
"type": "text",
"default": "30%"
},
"barCategoryGap": {
"name": "类目间柱子间距",
"type": "text",
"default": "20%"
},
"silent": {
"name": "Silent",
"type": "boolean",
"Default": false
}
}
}
},
"animation": {
"name": "Animation",
"type": "boolean",
"default": true
},
"animationThreshold": {
"name": "Animation threshold",
"type": "number",
"default": 2000
},
"animationDuration": {
"name": "Animation duration",
"type": "number",
"default": 1000
},
"animationEasing": {
"name": "Animation easing",
"type": "text",
"default": "elasticOut"
}
},
"api_data": {
"source": [
{
"x": "Source 0",
"y": 0,
"s": "bar"
},
{
"x": "Source 0",
"y": -50,
"s": "bar2"
},
{
"x": "Source 1",
"y": -8.901463875624668,
"s": "bar"
},
{
"x": "Source 1",
"y": -47.18992898088751,
"s": "bar2"
},
{
"x": "Source 2",
"y": -17.025413764148556,
"s": "bar"
},
{
"x": "Source 2",
"y": -42.54426104547181,
"s": "bar2"
},
{
"x": "Source 3",
"y": -24.038196249566663,
"s": "bar"
},
{
"x": "Source 3",
"y": -36.290773900754886,
"s": "bar2"
},
{
"x": "Source 4",
"y": -29.66504684804471,
"s": "bar"
},
{
"x": "Source 4",
"Y":-28.71517529663627,
"s": "bar2"
},
{
"x": "Source 5",
"y": -33.699527649688676,
"s": "bar"
},
{
"x": "Source 5",
"y": -20.146937097399626,
"s": "bar2"
},
{
"x": "Source 6",
"y": -36.00971978255796,
"s": "bar"
},
{
"x": "Source 6",
"y": -10.94374119697364,
"s": "bar2"
},
{
"x": "Source 7",
"y": -36.541005056170455,
"s": "bar"
},
{
"x": "Source 7",
"y": -1.4752538113770308,
"s": "bar2"
},
{
"x": "Source 8",
"y": -35.31542466107655,
"s": "bar"
},
{
"x": "Source 8",
"y": 7.893046603320797,
"s": "bar2"
},
{
"x": "Source 9",
"y": -32.427752866005996,
"s": "bar"
},
{
"x": "Source 9",
"y": 16.81528588241657,
"s": "bar2"
},
{
"x": "Source 10",
"y": -28.038563739693934,
"s": "bar"
},
{
"x": "Source 10",
"y": 24.979206795219028,
"s": "bar2"
},
{
"x": "Source 11",
"y": -22.364693082297347,
"s": "bar"
},
{
"x": "Source 11",
"y": 32.11821023962515,
"s": "bar2"
},
{
"x": "Source 12",
"y": -15.667600860943732,
"s": "bar"
},
{
"x": "Source 12",
"y": 38.02096119056733,
"s": "bar2"
},
{
"x": "Source 13",
"y": -8.240217424060843,
"s": "bar"
},
{
"x": "Source 13",
"y": 42.53821720798438,
"s": "bar2"
},
{
"x": "Source 14",
"y": -0.3929067389459173,
"s": "bar"
},
{
"x": "Source 14",
"y": 45.58667093073836,
"s": "bar2"
},
{
"x": "Source 15",
"y": 7.560799717904647,
"s": "bar"
},
{
"x": "Source 15",
"y": 47.14973738101559,
"s": "bar2"
},
{
"x": "Source 16",
"y": 15.318054209871054,
"s": "bar"
},
{
"x": "Source 16",
"y": 47.275355710354944,
"s": "bar2"
},
...
]
}
}
}
index.js の記述
index.js ファイルを記述するには、次の手順を実行します。 詳細については、 「index.js の仕様」をご参照ください。
- 初期化関数で、 EChart.init を実行します。
- レンダリング機能で、 chart.setOption を実行します。
- スケーリング関数で、 chart.resize を実行します。
- 解除機能で、 chart.clear を実行します。
- 破棄関数で、 chart.dispose を実行します。