本文介绍了ECharts对数据和数据集(dataset)的异步加载，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。

目录

数据的异步加载动态更新数据集(dataset)数据到图形的映射视觉通道的映射(颜色、大小等。)互动联动

异步加载数据

ECharts通常在setOption中设置数据。如果需要异步加载数据，可以在异步获取数据后，配合jQuery等工具通过setOption填充数据和配置项。

Json数据：

{

data_pie : [

{ 值:235，名称:视频广告 }，

{ 值:274，名:联盟广告 }，

{ 值:310，名称:邮件营销 }，

{ 值:335，名称:直接访问 }，

{ 值:400，名称:搜索引擎 }

]

}

例子

var myChart=echarts . init(document . getelementbyid( main ))；

$.get( https://www . runoob . com/static/js/echarts _ test _ data . JSON ，function (data) {

myChart.setOption({

系列：[

{

名称：“访问源”，

Type: pie ，//将图表类型设置为饼图。

Radius: 55% ，//饼图的半径，外半径是可视区域长度的55%(容器高度和宽度中较小的一个)。

数据：data.data_pie

}

]

})

}， json )

如果异步加载需要一段时间，我们可以添加加载效果，ECharts默认提供了简单的加载动画。只需要调用showLoading方法即可显示。数据加载后，调用hideLoading方法隐藏加载动画：

var myChart=echarts . init(document . getelementbyid( main ))；

mychart . show loading()；//打开加载效果

$.get( https://www . runoob . com/static/js/echarts _ test _ data . JSON ，function (data) {

mychart . hide loading()；//隐藏加载效果

myChart.setOption({

系列：[

{

名称：“访问源”，

Type: pie ，//将图表类型设置为饼图。

Radius: 55% ，//饼图的半径，外半径是可视区域长度的55%(容器高度和宽度中较小的一个)。

数据：data.data_pie

}

]

})

}， json )

电子海图是由数据驱动的，数据的变化驱动海图显示的变化，所以动态数据的实现变得极其简单。

所有数据更新都是通过setOption实现的。你只需要定期获取数据，setOption填充数据，不管数据发生了什么变化。ECharts会找出两组数据的不同点，然后通过合适的动画展示数据的变化。

var基数=新日期(2014，9，3)；

var oneDay=24 * 3600 * 1000

var date=[]；

var data=[math . random()* 150]；

var now=新日期(基数)；

函数addData(shift) {

now=[now.getFullYear()，now.getMonth() 1，now.getDate()]。join(/)；

date.push(现在)；

data . push((math . random()-0.4)* 10 data[data . length-1])；

if (shift) {

date . shift()；

data . shift()；

}

now=新日期(新日期(now)one day)；

}

for(var I=1；i 100i ) {

add data()；

}

选项={

xAxis: {

类型：“类别”，

boundaryGap:假，

数据：日期

},

亚西斯：{

边界差距：[0， 50%]，

类型：“值”

},

系列：[

{

名称：交易，

类型：“行”，

顺利：真的，

符号：无，

堆栈：“a”，

区域样式：{

普通：{}

},

数据：数据

}

]

};

setInterval(function () {

add data(true)；

myChart.setOption({

xAxis: {

数据：日期

},

系列：[{

名称：交易，

数据：数据

}]

});

}, 500);

var myChart=echarts . init(document . getelementbyid( main )， dark )；

myChart.setOption(选项)；

数据集（dataset）

ECharts使用数据集来管理数据。

Dataset组件用于单独的数据集声明，这样数据可以单独管理，可以被多个组件重用，可以基于数据指定数据到vision的映射。

下面是一个最简单的数据集示例：

选项={

图例：{}，

工具提示：{}，

数据集：{

//提供一个数据。

来源：[

[产品， 2015 ， 2016 ， 2017]，

【‘抹茶拿铁’，43.3，85.8，93.7】，

[奶茶，83.1，73.4，55.1]，

[奶酪可可，86.4，65.2，82.5]，

[核桃布朗尼，72.4，53.9，39.1]

]

},

//声明一个x轴，分类轴。默认情况下，分类轴对应于数据集的第一列。

xAxis: {type: category}，

//声明一个y轴，数值轴。

yAxis: {}，

//声明多个条形系列。默认情况下，每个系列将自动对应数据集的每一列。

系列：[

{type: bar}，

{type: bar}，

{类型：条形 }

]

}

或者可以使用对象数组的通用格式：

选项={

图例：{}，

工具提示：{}，

数据集：{

//此处指定维度名称的顺序，以便可以使用维度到坐标轴的默认映射。

//如果不指定维度，也可以通过指定series.encode来完成映射参见后面。

维度：[产品， 2015 ， 2016 ， 2017]，

来源：[

{产品：抹茶拿铁， 2015: 43.3， 2016: 85.8， 2017: 93.7}，

{产品：奶茶， 2015: 83.1， 2016: 73.4， 2017: 55.1}，

{产品：奶酪可可， 2015: 86.4， 2016: 65.2， 2017: 82.5}，

{产品：核桃布朗尼， 2015: 72.4， 2016: 53.9， 2017: 39.1}

]

},

xAxis: {type: category}，

yAxis: {}，

系列：[

{type: bar}，

{type: bar}，

{类型：条形 }

]

};

我们可以将数据映射到配置项中的图表。

我可以使用series.seriesLayoutBy属性来配置数据集是按列还是按行映射为图形序列。默认情况下，它按列映射。

在下面的示例中，我们将使用seriesLayoutBy属性来配置数据是按列显示还是按行显示。

选项={

图例：{}，

工具提示：{}，

数据集：{

来源：[

[产品， 2012年， 2013年， 2014年， 2015年]，

【‘抹茶拿铁’，41.1，30.4，65.1，53.3】，

[奶茶，86.5，92.1，85.7，83.1]，

[奶酪可可，24.1，67.2，79.5，86.4]

]

},

xAxis: [

{类型：“类别”，gridIndex: 0}，

{类型：“类别”，gridIndex: 1}

],

亚西斯：[

{gridIndex: 0}，

{gridIndex: 1}

],

网格：[

{底部：“55%”}，

{最高： 55%}

],

系列：[

//这些系列会在第一个直角坐标系中，每个系列对应dataset的每一行。

{type: bar ，seriesLayoutBy: row}，

{type: bar ，seriesLayoutBy: row}，

{type: bar ，seriesLayoutBy: row}，

//这些系列会在第二个直角坐标系中，每个系列对应数据集的每一列。

{type: bar ，xAxisIndex: 1，yAxisIndex: 1}，

{type: bar ，xAxisIndex: 1，yAxisIndex: 1}，

{type: bar ，xAxisIndex: 1，yAxisIndex: 1}，

{type: bar ，xAxisIndex: 1，yAxisIndex: 1}

]

}

图表中通常描述的大多数数据都是“二维表格”结构。我们可以使用series.encode属性将相应的数据映射到坐标轴(如X和Y轴):

var选项={

数据集：{

来源：[

[分数，金额，产品]，

[89.3，58212，抹茶拿铁]，

[57.1，78254，奶茶]，

[74.4，41032，奶酪可可]，

[50.1，12755，奶酪布朗尼]，

[89.7，20145，抹茶可可]，

[68.1，79146，茶]，

[19.6，91852，橙汁]，

[10.6，101852，柠檬汁]，

[32.7，20112，核桃布朗尼]

]

},

网格：{containLabel: true}，

xAxis: {}，

yAxis: {type:类别 }，

系列：[

{

类型：“条形”，

编码：{

//将“amount”列映射到x轴。

x:金额，

//将“产品”列映射到Y轴。

y:“产品”

}

}

]

};

encode声明的基本结构如下，其中冒号的左边是坐标系，标签和其他特定的名称，如 x ， y ， tooltip 等。冒号右边是维度名称(字符串格式)或数据中维度的序列号(数字格式，从0开始计数)，可以指定一个或多个维度(使用数组)。通常情况下，以下信息不需要全部写，按需写即可。

encode支持以下属性：

//在任何坐标系和系列中，支持：

编码：{

//使用“维度命名产品”和“维度命名分数”的值显示在工具提示中

工具提示：[产品，分数]

//使用“维度1”和“维度3”的维度名称作为系列名称进行连接。(有时名称很长，这可以避免在系列中重复这些名称。name)

系列名称：[1，3]，

//表示使用“维度2”中的值作为id。这在使用setOption动态更新数据时很有用，可以使新旧数据与id对应，从而可以生成适当的数据更新动画。

itemId: 2，

//指定数据项的名称。在饼图等图表中使用“维3”很有用，它可以使该名称出现在图例中。

项目名称：3

}

//直角坐标系(网格/笛卡尔)特有的属性：

编码：{

//将“维度1”、“维度5”和“维度命名分数”映射到X轴：

x: [1，5，分数]，

//将“维度0”映射到Y轴。

y: 0

}

//单轴独有的属性：

编码：{

单身：3人

}

//极坐标系统(极坐标)唯一属性：

编码：{

半径：3，

角度：2

}

//地理坐标系(geo)特有的属性：

编码：{

液化天然气：3，

纬度：2

}

//对于一些没有坐标系的图表，比如饼状图，漏斗图等。可以是：

编码：{

值：3

}

更多编码示例：

预期寿命-table.json:

[

[收入，预期寿命，人口，国家，年份]，

[815，34.05，351014，澳大利亚，1800年]，

[1314，39，645526，加拿大，1800年]，

[985，32，321675013，中国，1800年]，

[864，32.2，345043，古巴，1800年]，

[1244，36.5731262，977662，芬兰，1800年]，

[1803，33.96717024，29355111，法国，1800年]，

[1639，38.37，22886919，德国，1800年]，

[926，42.84559912，61428，冰岛，1800]，

[1052，25.4424，168574895，《印度》，1800年]，

[1050，36.4，30294378，日本，1800年]，

[579，26，4345000，朝鲜，1800]，

[576，25.8，9395000，韩国，1800]，

[658，34.05，100000，新西兰，1800年]

]

例子

$.get( https://www . run OOB . com/static/js/life-expectation-table . JSON ，function (data) {

var size value= 57% ；

var symbolSize=2.5

选项={

图例：{}，

工具提示：{}，

工具箱：{

左：“中间”，

功能：{

数据缩放：{}

}

},

网格：[

{右：大小值，下：大小值}，

{左：大小值，下：大小值}，

{右：大小值，上：大小值}，

{左：大小值，上：大小值}

],

xAxis: [

{type:值，gridIndex: 0，name:收入，axisLabel: {rotate: 50，interval: 0}}，

{type: category ，gridIndex: 1，name: Country ，boundaryGap: false，axisLabel: {rotate: 50，interval: 0}}，

{type:值，gridIndex: 2，name:收入，axisLabel: {rotate: 50，interval: 0}}，

{type: value ，gridIndex: 3，name:预期寿命，axisLabel: {rotate: 50，interval: 0}}

],

亚西斯：[

{type: value ，gridIndex: 0，name:预期寿命 }，

{type:值，gridIndex: 1，name:收入 }，

{type:值，gridIndex: 2，name:人口 }，

{type: value ，gridIndex: 3，name: Population}

],

数据集：{

尺寸：[

收入，

预期寿命，

人口，

国家，

{名称：年份，类型：序数 }

],

来源：数据

},

系列：[

{

类型："散点图",

符号大小：符号大小

xAxisIndex: 0，

yAxisIndex: 0，

编码：{

x:收入，

y:预期寿命，

工具提示：[0,1,2,3,4]

}

},

{

类型："散点图",

符号大小：符号大小

xAxisIndex: 1，

yAxisIndex: 1，

编码：{

x:国家，

y:收入，

工具提示：[0,1,2,3,4]

}

},

{

类型："散点图",

符号大小：符号大小

xAxisIndex: 2，

yAxisIndex: 2，

编码：{

x:收入，

y:人口，

工具提示：[0,1,2,3,4]

}

},

{

类型："散点图",

符号大小：符号大小

xAxisIndex: 3，

yAxisIndex: 3，

编码：{

x:预期寿命，

y:人口，

工具提示：[0,1,2,3,4]

}

}

]

};

myChart.setOption(选项);

});

我们可以使用视觉地图组件进行视觉通道的映射。

视觉元素可以是：

符号：图元的图形类别符号大小：图元的大小颜色：图元的颜色colorAlpha:图元的颜色的透明度不透明度：图元以及其附属物（如文字标签)的透明度颜色亮度：颜色的明暗度颜色饱和度：颜色的饱和度颜色色调：颜色的色调。

视觉地图组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。

定义变量选项={

数据集：{

来源：[

[分数,金额,产品],

[89.3,58212,抹茶拿铁],

[57.1,78254,奶茶],

[74.4,41032,奶酪可可],

[50.1,12755,奶酪布朗尼],

[89.7,20145,抹茶可可],

[68.1,79146,茶],

[19.6,91852,橙汁],

[10.6,101852,柠檬汁],

[32.7,20112,核桃布朗尼]

]

},

网格：{containLabel: true}，

xAxis: {name: amount}，

yAxis:{类型：类别 },

视觉图：{

方向："水平",

左："中间",

分钟：10,

max: 100，

正文：[高分,低分],

//将分数列映射到颜色

维度：0,

范围：{

颜色：[#D7DA8B ， #E15457]

}

},

系列：[

{

类型："条形",

编码：{

//将"金额"列映射到X轴。

x:金额，

//将"产品"列映射到Y轴

y:"产品"

}

}

]

};

以下实例多个图表共享一个数据集，并带有联动交互：

setTimeout(function () {

选项={

图例：{},

工具提示：{

触发器："轴",

显示内容：假

},

数据集：{

来源：[

[产品, 2012 , 2013 , 2014 , 2015 , 2016 , 2017],

[抹茶拿铁,41.1,30.4,65.1,53.3,83.8,98.7],

[奶茶,86.5,92.1,85.7,83.1,73.4,55.1],

[奶酪可可,24.1,67.2,79.5,86.4,65.2,82.5],

[核桃布朗尼,55.2,67.1,69.2,72.4,53.9,39.1]

]

},

xAxis: {type: category}，

yAxis: {gridIndex: 0}，

网格：{顶部： 55%},

系列：[

{type: line ，smooth: true，seriesLayoutBy: row}，

{type: line ，smooth: true，seriesLayoutBy: row}，

{type: line ，smooth: true，seriesLayoutBy: row}，

{type: line ，smooth: true，seriesLayoutBy: row}，

{

类型："饼图",

id:"馅饼",

半径："30%",

中心：[50% , 25%],

标签:{

格式化程序：" {b}: {@2012} ({d}%)"

},

编码：{

项目名称："产品",

值："2012年",

工具提示："2012"

}

}

]

};

myChart.on(updateAxisPointer ，函数（事件){

var xAxisInfo=event。ax ESI info[0]；

if (xAxisInfo) {

var dimension=xaxisinfo。值1；

myChart.setOption({

系列：{

id:"馅饼",

标签:{

格式化程序：" {b}: {@[ dimension ]} ({d}%)"

},

编码：{

值：维度，

工具提示：尺寸

}

}

});

}

});

myChart.setOption(选项);

});

到此这篇关于埃查尔兹异步加载数据与数据集（数据集)的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。