如下效果图：
代码入下：
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 });
});
标签：obj,name,数据源,value,dataset,维度,type,echarts From： https://www.cnblogs.com/origin-zy/p/16635934.html