EChatrs-实战

EChatrs

Conditions Precedent  通过axios拿到要展示的数据，[] 粒度也叫业务实体,{} 维度, () 指标, <>筛选范围

eg:按照{资产所属}{改造设计时间}统计<所有>[历史]的(数量)，等数据 ,详情研究数据立方体，数据仓库

Firstly  在index.vue添加div,并设置好css样式、标题

  <div class="echart-box" style="background-color: white">
    <div class="title text-14px leading-30px px-20px pt-10px">数量统计图</div>
    <div class="h-210px pr-10px">
      <BasicEchart :option="option1" />
    </div>
  </div>

Secondly  导入所需其他组件的资源、axios的api数据等等

 import { defineComponent, ref, unref, reactive, onMounted } from 'vue';
  import { BasicEchart } from '/@/components/Echart';
//指标接口
  import { getOtherModificationHistoryCountGroupByFieldAndModificationDesignDate } from '/@/api/generated/statistics';

   加入进组件 BasicEchart,

After that  把配置项<BasicEchart :option="option1">的option1设置成响应式

setup(){

const option1 = reactive({ option: {} });
//其他
return{

 　　option1

}

}

Afterward编写初始化option的函数包含

　　1、过滤数据集 datasert : sourceLists

　　2、Echarts的其他各种配置项 backgroundColor、tooltip、legend: {data: data.dimensionValues.Field,},end: {},grid: {},xAxis: {}, yAxis: {},

      //echart start
      function getOption(data: any) {
        console.log(data);
//过滤
        const filtersource = data.statistics.filter(
          (obj) => obj.Field != '*' && obj.AssessmentDate != '*',
        );
        console.log(filtersource);
        const sourceLists: Recordable[] = [];
//排序
        data.statistics.sort((item1, item2) => {
          if (item1.Field > item2.Field) {
            return 1;
          } else if (item1.Field < item2.Field) {
            return -1;
          }
          return 0;
        });
//组织
//1】data.dimensionValues。Field 是 图例项      {维度1}
//2】data.dimensionValues.AssessmentDate 是 x轴  {维度2}
//3】sourceList[维度2, 图例1  对应的 data.statistics.count,图例2 count, 图例3 count, 图例4 count, 图例5 count]    指标
//4】 sourceLists 赋值给 ECharts的dataset 配置项
        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 '图例1':
                  sourceList.splice(1, 1, obj.count);
                  break;
                case '图例2':
                  sourceList.splice(2, 1, obj.count);
                  break;
                case '图例3':
                  sourceList.splice(3, 1, obj.count);
                  break;
                case '图例4':
                  sourceList.splice(4, 1, obj.count);
                  break;
                case '图例5':
                  sourceList.splice(5, 1, obj.count);
                  break;
                default:
                  console.log('Unknown filter');
                  break;
              }
            }
          }
          sourceLists.push(sourceList);
        }
        console.log(data.dimensionValues.Field);
        const option = {
//其他配置项按照文档中的例子对应配置好背景、轴的样式、series的配置等等
          backgroundColor: '#323a5e',
          tooltip: {},
          legend: {
            data: data.dimensionValues.Field,
          },
          end: {},
          grid: {},
          xAxis: {},

          yAxis: {},
          dataset: {
            source: sourceLists,
          },
          series: [
            {
              name: '图例1',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  barBorderRadius: 2,
                },
              },
            },
            {
              name: '图例2',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  barBorderRadius: 2,
                },
              },
            },
            {
              name: '图例3',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  barBorderRadius: 2,
                },
              },
            },
            {
              name: '图例4',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  barBorderRadius: 2,
                },
              },
            },
            {
              name: '图例5',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  barBorderRadius: 2,
                },
              },
            },
          ],
        };
        console.log(sourceLists);
        return option;
      }

 

Finally   把加载数据放到事件加载函数中

      async function loadData() {
        const AccidentHistoryCountGroupByFieldAndStartDatetime: any =
          await getAccidentHistoryCountGroupByFieldAndStartDatetime();
//加载数据并配置option
        option1.option = getOption(
          AccidentHistoryCountGroupByFieldAndStartDatetime,
        );
      }
//页面加载时运行
      onMounted(async () => {
        await loadData();
        // emit('register', { reloadData });
      });