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 的映射的方式

1. 　　按行的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'}}
]

 

1.        按列的key --value 形式

dataset: {source: {name: ['Search Engine', 'Direct', 'Email'],value:[1048, 735, 580],}
},
series: [{type: 'pie',encode: {itemName: 'name',value: 'value'}}
]

 

1.        二维数组（如实例）

//按列取数的形式
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'}}
]

 

1.        利用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 });});