You can find a chart that suits your needs on the ECharts official website. For example, the case histogram animation delay in this tutorial.
Pull out configuration and data
According to the configuration in the code bar on the left side of the case, an entire option can be extracted from the configuration and data. The complete code of the case is shown below.
var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push ('Catalog' + 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 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;
}
};It contains the configuration of the data item, as shown below.
- option.xAxis.data
- option.series[x].data
To convert data that can be recognized by DataV into data elements, perform the following operations:
[
{
x: 'The value of a option.xAxis.data ',
y: 'option.series[x]. data',
s: 'option.series[x].name'
}
]Except for the preceding three configurations that belong to data, all other configurations belong to configuration.
Enter package.json
Write the sorted configurations and data to the package.json based on the package.json specification. Pay attention to 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 get it from the ECharts configuration items manual.
- There are a wide variety of ECharts configuration items, most of which are supported, but not supported:
- 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, they can be either text or number.
- The configuration structure is the same as that of ECharts. If the configuration structure is not the same, you need to convert it in the index.js. Therefore, you can also support the echarts type such as echarts.datatool.
package.json complete sample files can be downloaded here.
The partial package.json of the ECharts conversion in the sample file is as follows:
{
"datav": {
"cn_name": "Histogram",
"icon": "",
"protocol": 2,
"type": [
"regular_bar"
],
"view": {
"width": "600",
"height": "200",
"minWidth": "40",
"minHeight": "20"
},
"apis": {
"source": {
"handler": "render",
"description": "echarts animation delay histogram API description",
"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": "White space",
"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": "Base of the logarithmic 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": "At 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 label",
"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": "Display the smallest label",
"type": "boolean",
"default": true
},
"showMaxLabel": {
"name": "Display the largest 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-aligned",
"value": "left"
},
{
"name": "Center",
"value": "center"
},
{
"name": "Right-aligned",
"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": "Split region",
"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": "Automatic 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": "Key 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": "Column Fillet",
"type": "number",
"default": 0
},
"opacity": {
"name": "Opacity",
"type": "number",
"default": 1
}
},
"fold": true
},
"emphasis": {
"name": "Key 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 a column chart",
"type": "number",
"default": 0
},
"barGap": {
"name": "Histogram Interval",
"type": "text",
"default": "30%"
},
"barCategoryGap": {
"name": "Column 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
Write the index.js file by referring to the index.js specification:
- In the initialization method, a EChart.init is performed.
- In the render method, a chart.setOption is performed.
- In the scaling method, a chart.resize is performed.
- In the clear method, a chart.clear is performed.
- In the destroy method, the chart.dispose is performed.
index.js complete sample files can be downloaded here.