首页 > 编程学习 > echarts-dataset数据源配置项

echarts-dataset数据源配置项

发布时间:2022/8/29 14:51:04

 如下效果图:

 

 

 代码入下:

  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 });
      });

 

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号