ECharts--dataset的使用
dataset可以使我们传给ECharts的数据字段名不局限于value,name,以下部分以饼图为例,其余图形只需改变encode中的字段即可(折线图,柱状图为{x:a,y:b},极坐标图为{radius:a,angle:b})。还可以设置tooltip显示的内容,在encode中增加tooltip:[a,b,c]字段。1、sourcesource可以接受多种形式的数据,主要代码如下:按行的 k
·
dataset可以使我们传给ECharts的数据字段名不局限于value,name,以下部分以饼图为例,其余图形只需改变encode中的字段即可(折线图,柱状图为{x:a,y:b},极坐标图为{radius:a,angle:b})。还可以设置tooltip显示的内容,在encode中增加tooltip:[a,b,c]字段。
1、source
source可以接受多种形式的数据,主要代码如下:
按行的 key-value 形式(对象数组):
dataset: {
source: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
]
},
series: [
{
type: 'pie',
encode: {
itemName: 'name',
value: 'value'
}
}
]
按列的 key-value 形式:
dataset: {
source: {
name: ['Search Engine', 'Direct', 'Email'],
value:[1048, 735, 580],
}
},
series: [
{
type: 'pie',
encode: {
itemName: 'name',
value: 'value'
}
}
]
二维数组形式:
//按列取数的形式
dataset: {
source: [
['name', 'value'],
['Search Engine', 1048],
['Direct', 735,],
['Email',580]
],
},
series: [
{
type: 'pie',
encode: {
itemName: 'name',
value: 'value'
}
}
]
//按行取数的形式
dataset: {
source: [
['name','Search Engine','Direct','Email'],
['value',1048,735,580]
],
},
series: [
{
type: 'pie',
seriesLayoutBy: 'row',//默认为column,即默认是取第一行作为维度名信息,需要改成列
encode: {
itemName: 'name',
value: 'value'
}
}
]
2、dimensions
dimensions用于定义每个维度的信息,也可以在dataset-source中的第一行或者第一列中给出,若同时给出,以dimensions中的定义为准。
source二维数组形式可以改写为:
//按列取数的形式
dataset: {
source: [
['Search Engine', 1048],
['Direct', 735,],
['Email',580]
],
dimensions: ['name', 'value'],
},
series: [
{
type: 'pie',
encode: {
itemName: 'name',
value: 'value'
}
}
]
dimensions中的每一项可以为字符串或对象,对于不想给出定义的维度直接给null即可。 为对象形式时请参考官方说明:Documentation - Apache ECharts
更多推荐
已为社区贡献1条内容
所有评论(0)