您可在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 完整示例文件。