You can find charts that suit your needs on the official ECharts website, such as the case bar chart animation delay in this tutorial.
Extract configuration and data
According to the configuration in the code bar on the left side of the case, an entire
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;
}
};which contains the configuration of the data item as follows.
- option.xAxis.data
- option.series[x].data
You can perform the following operations to convert data that is refined to data elements that can be recognized by DataV.
[
{
x: 'a value of the option.xAxis.data ',
y: 'option.series[x]. a value of data',
s: 'option.series[x].name'
}
]Except for the above three configurations, all other configurations belong to data.
Write package.json
Write the sorted configuration and data to the package.json according to the package.json specification. Note the following points:
- You can delete configurations that are not needed by your own components.
- If you need a configuration that is not in the case code, you can obtain it from the ECharts configuration items manual.
- There are many types of ECharts configuration items, most of which are supported, but not:
- configuration items is a function.
- ECharts own type, such as echarts.datatool.xxx.
- Currently, multiple types of a configuration items are not supported. For example, it can be of the text type or the number type.
- The configuration structure is the same as that of ECharts. If the configuration structure is not the same, you need to implement the conversion in the index.js (so you can also support echarts types such as echarts.datatool).
You can click here to download the package.json complete sample file.
The package.json of the converted ECharts section in the sample file is as follows:
{
"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"
},
...
]
}
}
}Write index.js
See the index.js specification document to write the index.js file as follows:
- In the Initialize method, execute the EChart.init.
- In the Render method, execute the chart.setOption.
- In the Zoom method, execute the chart.resize.
- In the Clear method, execute the chart.clear.
- In the destruction method, perform the chart.dispose.
You can click here to download the index.js complete sample file.
该文章对您有帮助吗？