北京企业营销网站建设,申请网站官网,如何开天猫店铺,wordpress商用简介#xff1a;
数据集#xff08;dataset#xff09;是专门用来管理数据的组件。简化在每一个系列中设置数据#xff0c;这一个配置是在Echarts4 中开始支持。
通过数据集配置#xff0c;避免为每一个系列创建一个数据#xff0c;避免格式转化的痛苦。
简单举例
数据集dataset是专门用来管理数据的组件。简化在每一个系列中设置数据这一个配置是在Echarts4 中开始支持。
通过数据集配置避免为每一个系列创建一个数据避免格式转化的痛苦。
简单举例 在 series 中配置数据
option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu]},yAxis: {type: value},series: [{data: [120, 200, 150, 80],type: bar},{data: [120, 200, 150, 80],type: bar},]
};
通过数据集来配置
option {xAxis: {type: category,},yAxis: {type: value},dataset:[{source:[ [Mon,120,120],[Tue,200,200],[Wed,150,150],[Thu,80,80],]}],series: [{type: bar},{type: bar},]
};
一、 dataset 配置代码
//维度就是列或者行 这里简单用二维数组来配置
option{dataset:[//第一种写法 配置数据{id:name, // 该系列的id source:[ // 第一行可以为维度名称但也可以不写不写则默认获取每一行第一列为维度名称如何你需要做数据转化则必写[Product,value1,value2][Mon,120,110], // Mon 数据组 [Tue,120,110], // Tue 数据组 ],// 简单写法配置维度dimensions: [value1,value2], // 定义维度的信息这个也可以配置在series中。// 详细写法配置维度dimensions[{:name:value1, // 维度名称type:string, // 维度类型 包含 string、number、ordinal、float、int、time等类型 },{name:value2, type:string, } ],sourceHeader:0 //指定上面的 source 配置中从哪一行/列为维度信息而后才为数据, 这里取行或者列需要在 series.seriesLayoutBy 中配置 },//第二种写法 配置数据 key-value 形式{source:[{product: Mon, value1: 120, value2: 110},{product: Tue, value1: 120, value2: 110} ] },//第三种写法 配置数据 key-value 形式{source:{product: [Mon, Tue],value1: [120, 120],value2: [110, 110] } },// 通过transform 处理的数据配置{transform:[{type:filter, // Echarts提供的默认转化类型 filter筛选fromDatasetIndex: 0, // 引用 index 为 0 的 dataset 数据config:{dimension: value2, value: 110}, // 筛选 value2 列 条件为 110 }, ] }, {transform:[{type:filter, // Echarts提供的默认转化类型 filter筛选sort 排序fromDatasetIndex: 0, // 引用 index 为 0 的 dataset 数据fromDatasetId:name, // 引用 ID 为 name 的 dataset 数据fromTransformResult: 1 // // 获取 transform result[1] 。// 排序的条件可以用 ,,,!,并且包含逻辑的比较 与 或 非 and | or | not // config:{dimension: value2, value: 110}, // 筛选 value2 列 条件为 110 config:{and:[{dimension: value2,:50}, // value2 列 值大于50的{dimension: value1,:200}, // value1 列 值小于200的 ] },parser:time, // 解析器将值转化为对应的格式然后比较常用于时间格式print:true, // 在发生错误时报错配置项只在开发环境中生效} ] }, {transform:[{type:sort, // 排序fromDatasetIndex: 0, config:{dimension: value2, order: desc},// order为 asc 或者 desc } ] },// 引入外部的数据转化器 使用第三方库 ecStat 提供的数据转换器。{// 请直接参考文档 https://echarts.apache.org/handbook/zh/concepts/data-transform/ }],// 在series 中定义如何获取 datase 的数据操作series:[{type:bar,datasetIndex: 0, // //引用 index 为 0 的 dataset 数据 ,datasetId: name, // 通过 dataset 中的 ID 引入 数据encode:{// 将 product 列或者行 映射到 X 轴。x: product,// 将 value1 列或者行 映射到 Y 轴。y: value1 },seriesLayoutBy:column, // 指定dataset 中用行还是列来取值展示 column 默认列row 行} ]
}
配置使用简单总结
1.先定义 dataset 数据
2.在 series 中获取对应的 dataset 数据 通过 datasetIndex 引入 dataset 的数据 seriesLayoutBy 定义从行还是列来获取数据 encode 获取对应的列或者行
二、配置实例代码
option {tooltip: {trigger: axis,axisPointer: {type: shadow}},xAxis: {type: category,},yAxis: {type: value},dataset:[// 第一组数据 index 为 0{source:[ [product,value1,value2,value3],[Mon,120,110],[Tue,200,150],[Wed,150,85],[Thu,80,80],],},// 第二组数据 index 为 1{source:[ [Fri,89,95],[Sat,140,145],[Sun,135,140],],dimensions:[product,value1,value2]},// 第三组通过 数据转化的数据 index 为 2{transform:[{fromDatasetIndex: 0,type:filter,config:{dimension:value2,:80}}]}],series: [//引用 index 为 0 的 dataset 数据{type: bar,datasetIndex: 0,// 默认获取值为第一列encode:{// 将 value1 列映射到 Y 轴。y: value1, }},//引用 index 为 0 的 dataset 数据{type: bar,datasetIndex: 0,encode:{// 将 value2 列映射到 Y 轴。y: value2, }},//引用 index 为 1 的 dataset 数据{type: bar,datasetIndex: 1,encode:{// 将 value2 列映射到 Y 轴。y: value2, }},//引用 index 为 2 dataset 的 transform 数据{type: bar,datasetIndex: 2},]
};
直接在 Echarts 中的 示例中使用
