echarts-dataset数据源配置项
如下效果图：
代码入下：
let box4 = document.querySelector('.box4') let myCharts3 = echarts.init(box4) myCharts3.setOption({ dataset:{ // 二维数组存放数据 source:[ // 0 1 2 3 4 5 六个维度 ['衣服',22,15,36,35,18], ['食品',60,39,50,15,22], ['生活用品',60,52,36,15,36], ['家具',45,32,8,25,46], ['厨具',35,42,26,5,16], ['裤子',10,22,46,42,56] ] }, title: { text: "dataset数据集", subtext: '折线、柱状、饼图', left: "center" }, xAxis: { data: ['衣服', '食品', '生活用品', '家具', '厨具', '裤子'] }, yAxis: { // 设置是否显示y轴线 axisLine: { show: true }, // 设置是否显示y轴刻度 axisTick: { show: true } }, series: [ { type:"line", // 选择使用哪一个维度 encode:{ // 使用1维度映射到y轴上 y:2 } }, { type:"bar", encode:{ // 使用1维度映射到y轴上 y:4 } }, { type:"pie", width:"260px", height:"260px", top:"-60px", left:"500px", radius:["0%","40%"], encode:{ // 饼图旁边的文字 // 使用0维度映射 itemName:0, // 使用4维度映射 value:4 } } ] })
实例中 dataset 用 source 配置项接收一个二维数组，series 用 encode 来与x,y轴映射数据
下面介绍几中 dataset 的组织形式，还有 series 的映射的方式
- 按行的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' } } ]
- 利用dimensions
//按列取数的形式 dataset: { source: [ ['Search Engine', 1048], ['Direct', 735,], ['Email',580] ], dimensions: ['name', 'value'], }, series: [ { type: 'pie', encode: { itemName: 'name', value: 'value' } } ]
处理Axios清求到的数据时就得将其组织成以上三种形式中获得任意一种
处理方法如下
指标的数据的组织形式就是数据立方体的新式后端的DTO如下
/** * 统计通用dto */ @Data @ApiModel(description = "统计通用dto") public class StatisticsDTO { @ApiModelProperty(value = "统计数据") List<Map<String, Object>> statistics; @ApiModelProperty(value = "维度取值") Map<String, List<String>> dimensionValues; @ApiModelProperty(value = "维度分层统计") Map<String, List<Map<String, Object>>> hierarchyDimensionData; }
Responses 数据如下格式
{ "code": 0, "data": { "dimensionValues": { "additionalProp1": [ "string" ], "additionalProp2": [ "string" ], "additionalProp3": [ "string" ] }, "hierarchyDimensionData": { "additionalProp1": [ { "additionalProp1": {}, "additionalProp2": {}, "additionalProp3": {} } ], "additionalProp2": [ { "additionalProp1": {}, "additionalProp2": {}, "additionalProp3": {} } ], "additionalProp3": [ { "additionalProp1": {}, "additionalProp2": {}, "additionalProp3": {} } ] }, "statistics": [ { "additionalProp1": {}, "additionalProp2": {}, "additionalProp3": {} } ] }, "msg": "string" }
拿到的数据需要过滤，或者排序
// *就是所有，不加限制条件 // 所有维度都等于* ，则就是就全部的指标和或计数或最值 const filtersource = data.data.statistics.filter( (obj) => obj.CaseType != '*' && obj.Datasource != '*' && obj.MaterialType != '*' && obj.MaterialGrade != '*' ); //排序 data.statistics.sort((item1, item2) => { if (item1.Field > item2.Field) { return 1; } else if (item1.Field < item2.Field) { return -1; } return 0; });
将过滤的数据组织成上述的三种形式
//二维数组形式 const sourceLists: Recordable[] = []; //二维数组第一项 根据某一维度放x轴 //往后项 根据第二维度放legend图例 //[维度x, 图例, 图例,]; //[维度x, 图例, 图例, ; for (let entity of data.dimensionValues.AssessmentDate) { var sourceList: Recordable[] = [0, 0, 0, 0, 0, 0]; sourceList.splice(0, 1, entity); for (let obj of filtersource) { if (obj.AssessmentDate == entity) { switch (obj.Field) { case '海一采油管理区': sourceList.splice(1, 1, obj.count); break; case '海二采油管理区': sourceList.splice(2, 1, obj.count); break; case '海三采油管理区': sourceList.splice(3, 1, obj.count); break; case '海四采油管理区': sourceList.splice(4, 1, obj.count); break; case '集输大队': sourceList.splice(5, 1, obj.count); break; default: console.log('Unknown filter'); break; } } } sourceLists.push(sourceList);
到此在series映射绑定（name映射到对应的图例）
series: [ { name: '海一采油管理区', type: 'line', smooth: true, barWidth: '10%', itemStyle: { color: '#5ab1ef', }, areaStyle: { normal: { areaStyle: { normal: { color: (0, 0, 0, 1), }, }, }, }, }, { name: '海二采油管理区', type: 'line', smooth: true, barWidth: '10%', itemStyle: { normal: { barBorderRadius: 2, color: '#4daaf8', }, }, }, { name: '海三采油管理区', type: 'line', smooth: true, barWidth: '10%', itemStyle: { normal: { barBorderRadius: 2, color: '#2cde87', }, }, areaStyle: { normal: { areaStyle: { normal: { color: (0, 0, 0, 1), }, }, }, }, }, { name: '海四采油管理区', type: 'line', smooth: true, barWidth: '10%', itemStyle: { normal: { barBorderRadius: 2, color: '#ffa43a', }, }, areaStyle: { normal: { color: (0, 0, 0, 1), }, }, }, { name: '集输大队', type: 'line', smooth: true, barWidth: '10%', itemStyle: { normal: { barBorderRadius: 2, color: '#ffce3a', }, }, areaStyle: { normal: { color: (0, 0, 0, 1), }, }, }, ],
注意要将数据请求放到页面加载时运行的钩子函数中
//页面加载时运行 onMounted(async () => { await loadData(); // emit('register', { reloadData }); });
