您可在ECharts官网找到适合自己需求的图表，例如本教程的案例柱状图动画延迟。
抽离配置与数据
根据案例左侧代码栏中的配置，可以将一整个option抽离出配置与数据。案例的完整代码如下所示。
var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push('类目' + 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: '柱状图动画延迟'
},
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: 'option.xAxis.data的某一项值',
y: 'option.series[x].data的某一项值',
s: 'option.series[x].name'
}
]除上述三项配置属于数据外，其他都属于配置。
填写package.json
将梳理的配置和数据按照 package.json 规范 写入package.json，需要注意以下几点。
- 可以删除自己组件不需要的配置。
- 若需要案例代码中没有的配置，可从ECharts配置项手册中获取。
- ECharts配置项种类繁多，大部分都已支持，但是不支持：
- 配置项是函数。
- ECharts自己的类型，例如echarts.datatool.xxx。
- 目前也暂不支持一个配置项有多种类型，例如既可以是text类型，也可以是number类型。
- 配置结构与ECharts一致，若确实不能一致，需要在index.js中自己实现转换（所以也可以支持echarts.datatool等echarts类型）。
可单击此处下载package.json完整示例文件。
示例文件中的ECharts转换后的部分package.json，如下所示：
{
"datav": {
"cn_name": "柱状图",
"icon": "",
"protocol": 2,
"type": [
"regular_bar"
],
"view": {
"width": "600",
"height": "200",
"minWidth": "40",
"minHeight": "20"
},
"apis": {
"source": {
"handler": "render",
"description": "echarts动画延迟柱状图接口描述",
"fields": {
"x": {
"description": "x坐标轴值"
},
"y": {
"description": "y坐标轴值"
},
"s": {
"description": "系列值",
"optional": true
}
}
}
},
"config": {
"legend": {
//...
},
"grid": {
//...
},
"xAxis": {
"name": "x轴",
"type": "group",
"children": {
"show": {
"name": "显示",
"type": "boolean",
"default": false
},
"offset": {
"name": "位移",
"type": "number",
"default": 0
},
"type": {
"name": "类型",
"type": "text",
"default": "category"
},
"name": {
"name": "名称",
"type": "text",
"default": ""
},
"nameLocation": {
"name": "名称位置",
"type": "text",
"default": "end"
},
"nameTextStyle": {
"name": "名称样式",
"type": "group",
"children": {
"color": {
"name": "颜色",
"type": "color",
"default": "rgba(0,0,0,0)"
},
"fontStyle": {
"name": "字体样式",
"type": "text",
"default": "normal"
},
"fontWeight": {
"name": "字体粗细",
"type": "text",
"default": "normal"
},
"fontFamily": {
"name": "字体",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "字号",
"type": "number",
"default": 10
}
},
"fold": true
},
"nameGap": {
"name": "名称间隔",
"type": "number",
"default": 15
},
"nameRotate": {
"name": "名称旋转",
"type": "number",
"default": null
},
"inverse": {
"name": "反向",
"type": "boolean",
"default": false
},
"boundaryGap": {
"name": "留白",
"type": "boolean",
"default": true
},
"min": {
"name": "最小值",
"type": "text",
"default": "dataMin"
},
"max": {
"name": "最大值",
"type": "text",
"default": "dataMax"
},
"scale": {
"name": "自动伸缩",
"type": "boolean",
"default": false
},
"splitNumber": {
"name": "分割段数",
"type": "number",
"default": 5
},
"minInterval": {
"name": "最小间隔大小",
"type": "number",
"default": 0
},
"logBase": {
"name": "对数轴底数",
"type": "number",
"default": 10
},
"silent": {
"name": "静态",
"type": "boolean",
"default": false
},
"triggerEvent": {
"name": "触发事件",
"type": "boolean",
"default": false
},
"axisLine": {
"name": "轴线",
"type": "group",
"children": {
"show": {
"name": "显示",
"type": "boolean",
"default": false
},
"onZero": {
"name": "在零上",
"type": "boolean",
"default": true
},
"lineStyle": {
"name": "轴线样式",
"type": "group",
"children": {
"color": {
"name": "颜色",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(255,255,255,.8)"
}
},
"width": {
"name": "宽度",
"type": "number",
"default": 1
},
"type": {
"name": "类型",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "透明度",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"axisTick": {
"name": "刻度",
"type": "group",
"children": {
"show": {
"name": "显示",
"type": "boolean",
"default": false
},
"alignWithLabel": {
"name": "和标签对齐",
"type": "boolean",
"default": false
},
"interval": {
"name": "分割间隔",
"type": "number",
"default": 0
},
"inside": {
"name": "内部",
"type": "boolean",
"default": false
},
"length": {
"name": "长度",
"type": "number",
"default": 5
},
"lineStyle": {
"name": "轴线样式",
"type": "group",
"children": {
"color": {
"name": "颜色",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(255,255,255,.8)"
}
},
"width": {
"name": "宽度",
"type": "number",
"default": 1
},
"type": {
"name": "类型",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "透明度",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"axisLabel": {
"name": "刻度标签",
"type": "group",
"children": {
"show": {
"name": "显示",
"type": "boolean",
"default": true
},
"interval": {
"name": "分割间隔",
"type": "number",
"default": 13
},
"inside": {
"name": "内部",
"type": "boolean",
"default": false
},
"rotate": {
"name": "旋转",
"type": "number",
"default": 0
},
"margin": {
"name": "外间距",
"type": "number",
"default": 8
},
"showMinLabel": {
"name": "显示最小标签",
"type": "boolean",
"default": true
},
"showMaxLabel": {
"name": "显示最大标签",
"type": "boolean",
"default": true
},
"textStyle": {
"name": "文本样式",
"type": "group",
"children": {
"color": {
"name": "颜色",
"type": "color",
"default": "rgba(255,255,255,.8)"
},
"fontStyle": {
"name": "字体样式",
"type": "text",
"default": "normal"
},
"fontWeight": {
"name": "字体粗细",
"type": "text",
"default": "normal"
},
"fontFamily": {
"name": "字体",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "字号",
"type": "number",
"default": 10
},
"align": {
"name": "对齐",
"type": "select",
"range": [
{
"name": "自动",
"value": "auto"
},
{
"name": "左对齐",
"value": "left"
},
{
"name": "居中对齐",
"value": "center"
},
{
"name": "右对齐",
"value": "right"
}
],
"default": ""
},
"baseline": {
"name": "基线",
"type": "text",
"default": ""
}
},
"fold": true
}
},
"fold": true
},
"splitLine": {
"name": "分割线",
"type": "group",
"children": {
"show": {
"name": "显示",
"type": "boolean",
"default": false
},
"interval": {
"name": "分割间隔",
"type": "number",
"default": 0
},
"lineStyle": {
"name": "轴线样式",
"type": "group",
"children": {
"width": {
"name": "宽度",
"type": "number",
"default": 1
},
"type": {
"name": "类型",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "透明度",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"splitArea": {
"name": "分割区域",
"type": "group",
"children": {
"interval": {
"name": "分割间隔",
"type": "number",
"default": 0
},
"show": {
"name": "显示",
"type": "boolean",
"default": false
},
"areaStyle": {
"name": "区域样式",
"type": "group",
"children": {
"opacity": {
"name": "透明度",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"axisPointer": {
"name": "坐标轴指示器",
"type": "group",
"children": {
"show": {
"name": "显示",
"type": "boolean",
"default": true
},
"type": {
"name": "类型",
"type": "select",
"default": "line",
"range": [
{
"name": "直线指示器",
"value": "line"
},
{
"name": "阴影指示器",
"value": "shadow"
}
]
},
"snap": {
"name": "自动吸附",
"type": "boolean",
"default": false
},
"value": {
"name": "初始值",
"type": "number",
"default": null
},
"status": {
"name": "状态",
"type": "boolean",
"default": false
},
"label": {
"name": "标签",
"type": "group",
"children": {
"show": {
"name": "显示",
"type": "boolean",
"default": false
},
"precision": {
"name": "小数精度",
"type": "number",
"default": "'auto'"
},
"margin": {
"name": "外间距",
"type": "boolean",
"default": 3
},
"textStyle": {
"name": "文本样式",
"type": "group",
"children": {
"color": {
"name": "颜色",
"type": "color",
"default": "#ffffff"
},
"fontStyle": {
"name": "字体样式",
"type": "text",
"default": "normal"
},
"fontWeight": {
"name": "字体粗细",
"type": "text",
"default": "normal"
},
"fontFamily": {
"name": "字体",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "字号",
"type": "number",
"default": 10
}
},
"fold": true
},
"backgroundColor": {
"name": "背景色",
"type": "text",
"default": "auto"
},
"borderColor": {
"name": "边框色",
"type": "text",
"default": ""
},
"borderWidth": {
"name": "边框粗细",
"type": "text",
"default": ""
}
},
"fold": true
},
"lineStyle": {
"name": "轴线样式",
"type": "group",
"show": [
[
"type",
"$eq",
"line"
]
],
"children": {
"color": {
"name": "颜色",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(0,0,0,0)"
}
},
"width": {
"name": "宽度",
"type": "number",
"default": 1
},
"type": {
"name": "类型",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "透明度",
"type": "number",
"default": 1
}
},
"fold": true
},
"shadowStyle": {
"name": "阴影样式",
"type": "group",
"show": [
[
"type",
"$eq",
"shadow"
]
],
"children": {
"color": {
"name": "颜色",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(150,150,150,0.3)"
}
},
"opacity": {
"name": "透明度",
"type": "number",
"default": 1
}
},
"fold": true
},
"handle": {
"name": "拖拽手柄",
"type": "group",
"children": {
"show": {
"name": "显示",
"type": "boolean",
"default": false
},
"size": {
"name": "大小",
"type": "number",
"default": 45
},
"margin": {
"name": "外间距",
"type": "number",
"default": 50
},
"color": {
"name": "颜色",
"type": "text",
"default": "#333"
},
"throttle": {
"name": "刷新频率",
"type": "number",
"default": 40
}
},
"fold": true
}
},
"fold": true
}
},
"fold": true
},
"yAxis": {
//...
},
"tooltip": {
//...
},
"series": {
"name": "系列",
"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": "系列<%= i+1 %>",
"child": {
"name": {
"name": "名称",
"type": "text",
"default": ""
},
"legendHoverLink": {
"name": "图例联动高亮",
"type": "boolean",
"default": true
},
"coordinateSystem": {
"name": "坐标系",
"type": "text",
"default": "cartesian2d"
},
"label": {
"name": "标签",
"type": "group",
"children": {
"normal": {
"name": "普通项",
"type": "group",
"children": {
"show": {
"name": "显示",
"type": "boolean",
"default": false
},
"textStyle": {
"name": "文本样式",
"type": "group",
"children": {
"color": {
"name": "颜色",
"type": "color",
"default": "#000"
},
"fontStyle": {
"name": "字体样式",
"type": "text",
"default": "normal"
},
"fontWeight": {
"name": "字体粗细",
"type": "text",
"default": "normal"
},
"fontFamily": {
"name": "字体",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "字号",
"type": "number",
"default": 10
}
},
"fold": true
}
},
"fold": true
},
"emphasis": {
"name": "重点项",
"type": "group",
"children": {
"show": {
"name": "显示",
"type": "boolean",
"default": false
},
"textStyle": {
"name": "文本样式",
"type": "group",
"children": {
"color": {
"name": "颜色",
"type": "color",
"default": "#000"
},
"fontStyle": {
"name": "字体样式",
"type": "text",
"default": "normal"
},
"fontWeight": {
"name": "字体粗细",
"type": "text",
"default": "normal"
},
"fontFamily": {
"name": "字体",
"type": "text",
"default": "sans-serif"
},
"fontSize": {
"name": "字号",
"type": "number",
"default": 10
}
},
"fold": true
}
},
"fold": true
}
},
"fold": true
},
"itemStyle": {
"name": "元素样式",
"type": "group",
"children": {
"normal": {
"name": "普通项",
"type": "group",
"children": {
"color": {
"name": "颜色",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(0,0,0,0)"
}
},
"borderColor": {
"name": "边框色",
"type": "multicolor",
"default": {
"style": "single",
"value": "#000"
}
},
"borderWidth": {
"name": "边框粗细",
"type": "number",
"default": 0
},
"borderType": {
"name": "边框样式",
"type": "text",
"default": "solid"
},
"barBorderRadius": {
"name": "柱状图圆角",
"type": "number",
"default": 0
},
"opacity": {
"name": "透明度",
"type": "number",
"default": 1
}
},
"fold": true
},
"emphasis": {
"name": "重点项",
"type": "group",
"children": {
"color": {
"name": "颜色",
"type": "multicolor",
"default": {
"style": "single",
"value": "rgba(0,0,0,0)"
}
},
"borderColor": {
"name": "边框色",
"type": "multicolor",
"default": {
"style": "single",
"value": "#000"
}
},
"borderWidth": {
"name": "边框粗细",
"type": "number",
"default": 0
},
"borderType": {
"name": "边框样式",
"type": "text",
"default": "solid"
},
"opacity": {
"name": "透明度",
"type": "number",
"default": 1
}
},
"fold": true
}
},
"fold": true
},
"stack": {
"name": "堆叠图",
"type": "text",
"default": ""
},
"barWidth": {
"name": "柱子宽度",
"type": "text",
"default": "50%"
},
"barMinHeight": {
"name": "柱状图最小高度",
"type": "number",
"default": 0
},
"barGap": {
"name": "柱状图间隔",
"type": "text",
"default": "30%"
},
"barCategoryGap": {
"name": "类目间柱子间距",
"type": "text",
"default": "20%"
},
"silent": {
"name": "静态",
"type": "boolean",
"default": false
}
}
}
},
"animation": {
"name": "动画",
"type": "boolean",
"default": true
},
"animationThreshold": {
"name": "动画阈值",
"type": "number",
"default": 2000
},
"animationDuration": {
"name": "动画时长",
"type": "number",
"default": 1000
},
"animationEasing": {
"name": "缓动效果",
"type": "text",
"default": "elasticOut"
}
},
"api_data": {
"source": [
{
"x": "类目0",
"y": 0,
"s": "bar"
},
{
"x": "类目0",
"y": -50,
"s": "bar2"
},
{
"x": "类目1",
"y": -8.901463875624668,
"s": "bar"
},
{
"x": "类目1",
"y": -47.18992898088751,
"s": "bar2"
},
{
"x": "类目2",
"y": -17.025413764148556,
"s": "bar"
},
{
"x": "类目2",
"y": -42.54426104547181,
"s": "bar2"
},
{
"x": "类目3",
"y": -24.038196249566663,
"s": "bar"
},
{
"x": "类目3",
"y": -36.290773900754886,
"s": "bar2"
},
{
"x": "类目4",
"y": -29.66504684804471,
"s": "bar"
},
{
"x": "类目4",
"y": -28.71517529663627,
"s": "bar2"
},
{
"x": "类目5",
"y": -33.699527649688676,
"s": "bar"
},
{
"x": "类目5",
"y": -20.146937097399626,
"s": "bar2"
},
{
"x": "类目6",
"y": -36.00971978255796,
"s": "bar"
},
{
"x": "类目6",
"y": -10.94374119697364,
"s": "bar2"
},
{
"x": "类目7",
"y": -36.541005056170455,
"s": "bar"
},
{
"x": "类目7",
"y": -1.4752538113770308,
"s": "bar2"
},
{
"x": "类目8",
"y": -35.31542466107655,
"s": "bar"
},
{
"x": "类目8",
"y": 7.893046603320797,
"s": "bar2"
},
{
"x": "类目9",
"y": -32.427752866005996,
"s": "bar"
},
{
"x": "类目9",
"y": 16.81528588241657,
"s": "bar2"
},
{
"x": "类目10",
"y": -28.038563739693934,
"s": "bar"
},
{
"x": "类目10",
"y": 24.979206795219028,
"s": "bar2"
},
{
"x": "类目11",
"y": -22.364693082297347,
"s": "bar"
},
{
"x": "类目11",
"y": 32.11821023962515,
"s": "bar2"
},
{
"x": "类目12",
"y": -15.667600860943732,
"s": "bar"
},
{
"x": "类目12",
"y": 38.02096119056733,
"s": "bar2"
},
{
"x": "类目13",
"y": -8.240217424060843,
"s": "bar"
},
{
"x": "类目13",
"y": 42.53821720798438,
"s": "bar2"
},
{
"x": "类目14",
"y": -0.3929067389459173,
"s": "bar"
},
{
"x": "类目14",
"y": 45.58667093073836,
"s": "bar2"
},
{
"x": "类目15",
"y": 7.560799717904647,
"s": "bar"
},
{
"x": "类目15",
"y": 47.14973738101559,
"s": "bar2"
},
{
"x": "类目16",
"y": 15.318054209871054,
"s": "bar"
},
{
"x": "类目16",
"y": 47.275355710354944,
"s": "bar2"
},
...
]
}
}
}编写index.js
参见index.js规范文档，按照以下方法编写index.js文件：
- 在初始化方法中，执行 EChart.init。
- 在渲染方法中，执行 chart.setOption。
- 在缩放方法中，执行 chart.resize。
- 在清空方法中，执行 chart.clear。
- 在销毁方法中，执行 chart.dispose。
可单击此处下载 index.js 完整示例文件。