このチュートリアルのケース棒グラフアニメーションの遅延など、EChartsの公式Webサイトでニーズに合ったグラフを見つけることができます。
構成とデータの抽出
ケース左側のコードバーの構成によれば、構成とデータからオプション全体を抽出することができる。 ケースの完全なコードを以下に示します。
var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push ('Category' + 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: 'Histogram animation late'
},
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: 'a value of the option.xAxis.data ',
y: 'option.series[x]. a value of data',
s: 'option.series[x].name'
}
]上記の3つの設定を除いて、他のすべての設定はデータに属します。
package.json の記述
ソートされた構成とデータを、package.json仕様に従ってpackage.jsonに書き込みます。 次の点に注意してください。
独自のコンポーネントでは不要な設定を削除できます。
ケースコードに含まれていない構成が必要な場合は、ECharts構成項目マニュアルから取得できます。
ECharts設定項目には多くの種類があり、そのほとんどがサポートされていますが、サポートされていません。
設定項目は関数です。
ECharts独自のタイプ (echarts.datatool.xxxなど) 。
現在、複数のタイプの構成アイテムはサポートされていません。 たとえば、テキストタイプまたは数字タイプにすることができます。
構成構造はEChartsと同じです。 構成構造が同じでない場合は、index.jsで変換を実装する必要があります (したがって、echarts.datatoolなどのecharts型もサポートできます) 。
こちらをクリックすると、package.json完全サンプルファイルをダウンロードできます。
サンプルファイルの変換済みEChartsセクションのpackage.jsonは次のとおりです
{
"datav": {
"cn_name": "column chart",
"icon": "",
"protocol": 2,
"type": [
"regular_bar"
],
"view": {
"width": "600",
"height": "200",
"minWidth": "40",
"minHeight": "20"
},
"apis": {
"source": {
"handler": "render",
"description": "The description of the echarts animation delay bar chart interface",
"fields": {
"x": {
"description": "x axis value"
},
"y": {
"description": "y axis value"
},
"s": {
"description": "Series value",
"optional": true
}
}
}
},
"config": {
"legend": {
//...
},
"grid": {
//...
},
"xAxis": {
"name": "X-axis",
"type": "group",
"children": {
"show": {
"name": "Display",
"type": "boolean",
"default": false
},
"offset": {
"name": "Displacement",
"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 style",
"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",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "Font Size",
"type": "number",
"default": 10
}
},
"fold": true
},
"nameGap": {
"name": "Name interval",
"type": "number",
"default": 15
},
"nameRotate": {
"name": "Name rotation",
"type": "number",
"default": null
},
"inverse": {
"name": "Reverse",
"type": "boolean",
"default": false
},
"boundaryGap": {
"name": "Leave blank",
"type": "boolean",
"default": true
},
"min": {
"name": "Minimum",
"type": "text",
"default": "dataMin"
},
"max": {
"name": "Maximum",
"type": "text",
"default": "dataMax"
},
"scale": {
"name": "auto scaling",
"type": "boolean",
"default": false
},
"splitNumber": {
"name": "segments",
"type": "number",
"default": 5
},
"minInterval": {
"name": "Minimum interval size",
"type": "number",
"default": 0
},
"logBase": {
"name": "The base of the data axis",
"type": "number",
"default": 10
},
"silent": {
"name": "Static",
"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": "Axis 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": "Scale",
"type": "group",
"children": {
"show": {
"name": "Display",
"type": "boolean",
"default": false
},
"alignWithLabel": {
"name": "Align with tags",
"type": "boolean",
"default": false
},
"interval": {
"name": "Interval",
"type": "number",
"default": 0
},
"inside": {
"name": "Internal",
"type": "boolean",
"default": false
},
"length": {
"name": "Length",
"type": "number",
"default": 5
},
"lineStyle": {
"name": "Axis 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": "Scale label",
"type": "group",
"children": {
"show": {
"name": "Display",
"type": "boolean",
"default": true
},
"interval": {
"name": "Interval",
"type": "number",
"default": 13
},
"inside": {
"name": "Internal",
"type": "boolean",
"default": false
},
"rotate": {
"name": "Rotate",
"type": "number",
"default": 0
},
"margin": {
"name": "Outer spacing",
"type": "number",
"default": 8
},
"showMinLabel": {
"name": "Show minimum label",
"type": "boolean",
"default": true
},
"showMaxLabel": {
"name": "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",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "Font Size",
"type": "number",
"default": 10
},
"align": {
"name": "Align",
"type": "select",
"range": [
{
"name": "Automatic",
"value": "auto"
},
{
"name": "Left alignment",
"value": "left"
},
{
"name": "Center alignment",
"value": "center"
},
{
"name": "Right alignment",
"value": "right"
}
],
"default": ""
},
"baseline": {
"name": "Baseline",
"type": "text",
"default": ""
}
},
"fold": true
}
},
"fold": true
},
"splitLine": {
"name": "line separator",
"type": "group",
"children": {
"show": {
"name": "Display",
"type": "boolean",
"default": false
},
"interval": {
"name": "Interval",
"type": "number",
"default": 0
},
"lineStyle": {
"name": "Axis 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": "Partition area",
"type": "group",
"children": {
"interval": {
"name": "Interval",
"type": "number",
"default": 0
},
"show": {
"name": "Display",
"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 Indicator",
"type": "group",
"children": {
"show": {
"name": "Display",
"type": "boolean",
"default": true
},
"type": {
"name": "Type",
"type": "select",
"default": "line",
"range": [
{
"name": "Line Indicator",
"value": "line"
},
{
"name": "Shadow indicator",
"value": "shadow"
}
]
},
"snap": {
"name": "Auto adsorption",
"type": "boolean",
"default": false
},
"value": {
"name": "Initial value",
"type": "number",
"default": null
},
"status": {
"name": "Status",
"type": "boolean",
"default": false
},
"label": {
"name": "Tab",
"type": "group",
"children": {
"show": {
"name": "Display",
"type": "boolean",
"default": false
},
"precision": {
"name": "precision",
"type": "number",
"default": "'auto'"
},
"margin": {
"name": "Outer spacing",
"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",
"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": "Axis 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": "Drag handle",
"type": "group",
"children": {
"show": {
"name": "Display",
"type": "boolean",
"default": false
},
"size": {
"name": "Size",
"type": "number",
"default": 45
},
"margin": {
"name": "Outer spacing",
"type": "number",
"default": 50
},
"color": {
"name": "Color",
"type": "text",
"default": "#333"
},
"throttle": {
"name": "Refresh frequency",
"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 linkage highlighting",
"type": "boolean",
"default": true
},
"coordinateSystem": {
"name": "Coordinate system",
"type": "text",
"default": "cartesian2d"
},
"label": {
"name": "Tab",
"type": "group",
"children": {
"normal": {
"name": "Common item",
"type": "group",
"children": {
"show": {
"name": "Display",
"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",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "Font Size",
"type": "number",
"default": 10
}
},
"fold": true
}
},
"fold": true
},
"emphasis": {
"name": "Major item",
"type": "group",
"children": {
"show": {
"name": "Display",
"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",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "Font Size",
"type": "number",
"default": 10
}
},
"fold": true
}
},
"fold": true
}
},
"fold": true
},
"itemStyle": {
"name": "Element style",
"type": "group",
"children": {
"normal": {
"name": "Common item",
"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 style",
"type": "text",
"default": "solid"
},
"barBorderRadius": {
"name": "Bar chart fillet",
"type": "number",
"default": 0
},
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
},
"emphasis": {
"name": "Major item",
"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 style",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"stack": {
"name": "Stacked graph",
"type": "text",
"default": ""
},
"barWidth": {
"name": "Column width",
"type": "text",
"default": "50%"
},
"barMinHeight": {
"name": "Minimum height of the histogram",
"type": "number",
"default": 0
},
"barGap": {
"name": "Column chart interval",
"type": "text",
"default": "30%"
},
"barCategoryGap": {
"name": "Pillar spacing between categories",
"type": "text",
"default": "20%"
},
"silent": {
"name": "Static",
"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": "Ease Effect",
"type": "text",
"default": "elasticOut"
}
},
"api_data": {
"source": [
{
"x": "Category 0",
"y": 0,
"s": "bar"
},
{
"x": "Category 0",
"y": -50,
"s": "bar2"
},
{
"x": "Category 1",
"y": -8.901463875624668,
"s": "bar"
},
{
"x": "Category 1",
"y": -47.18992898088751,
"s": "bar2"
},
{
"x": "Category 2",
"y": -17.025413764148556,
"s": "bar"
},
{
"x": "Category 2",
"y": -42.54426104547181,
"s": "bar2"
},
{
"x": "Category 3",
"y": -24.038196249566663,
"s": "bar"
},
{
"x": "Category 3",
"y": -36.290773900754886,
"s": "bar2"
},
{
"x": "Category 4",
"y": -29.66504684804471,
"s": "bar"
},
{
"x": "Category 4",
"y": -28.71517529663627,
"s": "bar2"
},
{
"x": "Category 5",
"y": -33.699527649688676,
"s": "bar"
},
{
"x": "Category 5",
"y": -20.146937097399626,
"s": "bar2"
},
{
"x": "Category 6",
"y": -36.00971978255796,
"s": "bar"
},
{
"x": "Category 6",
"y": -10.94374119697364,
"s": "bar2"
},
{
"x": "Category 7",
"y": -36.541005056170455,
"s": "bar"
},
{
"x": "Category 7",
"y": -1.4752538113770308,
"s": "bar2"
},
{
"x": "Category 8",
"y": -35.31542466107655,
"s": "bar"
},
{
"x": "Category 8",
"y": 7.893046603320797,
"s": "bar2"
},
{
"x": "Category 9",
"y": -32.427752866005996,
"s": "bar"
},
{
"x": "Category 9",
"y": 16.81528588241657,
"s": "bar2"
},
{
"x": "Category 10",
"y": -28.038563739693934,
"s": "bar"
},
{
"x": "Category 10",
"y": 24.979206795219028,
"s": "bar2"
},
{
"x": "Category 11",
"y": -22.364693082297347,
"s": "bar"
},
{
"x": "Category 11",
"y": 32.11821023962515,
"s": "bar2"
},
{
"x": "Category 12",
"y": -15.667600860943732,
"s": "bar"
},
{
"x": "Category 12",
"y": 38.02096119056733,
"s": "bar2"
},
{
"x": "Category 13",
"y": -8.240217424060843,
"s": "bar"
},
{
"x": "Category 13",
"y": 42.53821720798438,
"s": "bar2"
},
{
"x": "Category 14",
"y": -0.3929067389459173,
"s": "bar"
},
{
"x": "Category 14",
"y": 45.58667093073836,
"s": "bar2"
},
{
"x": "Category 15",
"y": 7.560799717904647,
"s": "bar"
},
{
"x": "Category 15",
"y": 47.14973738101559,
"s": "bar2"
},
{
"x": "Category 16",
"y": 15.318054209871054,
"s": "bar"
},
{
"x": "Category 16",
"y": 47.275355710354944,
"s": "bar2"
},
...
]
}
}
}index.js の記述
次のようにindex.jsファイルを記述するには、index.js仕様ドキュメントを参照してください。
Initializeメソッドで、EChart.initを実行します。
Renderメソッドで、chart.setOptionを実行します。
Zoomメソッドで、chart.resizeを実行します。
Clearメソッドで、chart.clearを実行します。
破棄メソッドでは、chart.disposeを実行します。
こちらをクリックすると、index.jsの完全なサンプルファイルをダウンロードできます。