本文介绍了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(选项);
});
到此这篇关于埃查尔兹异步加载数据与数据集（数据集)的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。