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

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐