optionsStructure.js 9.32 KB
// 方案1 页面配置
//  以下以2023年分公司年度业绩为例子,配置的结果
/*const optionStructure = {
  layoutOptions: {
    layout: '上图下表',
    chartCount: 3,
    tableConfigs: [
      {
        title: '业绩报表',
        width: '100%',
        height: '500px',
      },
    ],
    chartConfigs: [
      {
        title: '业绩图',
        width: '100%',
        height: '100%',
      },
      {
        title: '业绩图',
        width: '100%',
        height: '100%',
      },
      {
        title: '业绩图',
        width: '100%',
        height: '100%',
      },
    ],
  },
  chartOptions: [
    {
      title: {
        show: true,
        text: '2023年业绩报表',
        textStyle: {
          color: '#123445',
          fontSize: 18,
        },
      },
      xAxis: {
        name: '分公司',
        type: 'category', // 我们的场景,使用两种,category/time
        // minInterval:'', // category为time时,才显示

        // 1. category 表头名称时,data的结构为 ['01月','02月','03月','04月','05月','06月','07月','08月']
        // 2. category 表内数据时 data为带 $ + 字段名的组合
        // 3. time 表内数据时 data 为 $ + 字段名的组合
        data: '${分公司}',
        // time时,直接使用以下配置
        // axisLabel:{
        //     formatter: {
        //         year: '{yyyy}',
        //         month: '{MMM}',
        //         day: '{d}',
        //         hour: '{HH}:{mm}',
        //         minute: '{HH}:{mm}',
        //         second: '{HH}:{mm}:{ss}',
        //         millisecond: '{hh}:{mm}:{ss} {SSS}',
        //         none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
        //     }
        // }
      },
      yAxis: [
        {
          name: '万元',
          gridIndex: 0,
          // 特定情况下才需要,比如PH值
          // minInterval:1
          // precision
        },
      ],
      series: [
        {
          type: 'line',
          name: '销售业绩',
          colorBy: 'series',
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
              { type: 'average', name: '平均值' },
            ],
          },
          markLine: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
              { type: 'average', name: '平均值' },
            ],
          },
          stack: '',
          customerConfig: {
            unit: 'Mpa',
          },
          data:'${销售业绩}'
        },
      ],
      legend: {
        left: 'right', // left right center
      },
      // left/right/top/bottom 这几个允许配置
      grid: {
        left: 10,
        right: 20,
        top: 40,
        bottom: 40,
        labelContainer: true,
      },
      // 是否显示
      dataZoom: {
        show: true,
      },
    },
    {
      title: {
        show: true,
        text: '2023年业绩报表',
        textStyle: {
          color: '#123445',
          fontSize: 18,
        },
      },
      xAxis: {
        name: '分公司',
        type: 'category', // 我们的场景,使用两种,category/time
        // minInterval:'', // category为time时,才显示

        // 1. category 表头名称时,data的结构为 ['01月','02月','03月','04月','05月','06月','07月','08月']
        // 2. category 表内数据时 data为带 $ + 字段名的组合
        // 3. time 表内数据时 data 为 $ + 字段名的组合
        data: '$分公司',
        // time时,直接使用以下配置
        // axisLabel:{
        //     formatter: {
        //         year: '{yyyy}',
        //         month: '{MMM}',
        //         day: '{d}',
        //         hour: '{HH}:{mm}',
        //         minute: '{HH}:{mm}',
        //         second: '{HH}:{mm}:{ss}',
        //         millisecond: '{hh}:{mm}:{ss} {SSS}',
        //         none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
        //     }
        // }
      },
      yAxis: [
        {
          name: '万元',
          gridIndex: 0,
          // 特定情况下才需要,比如PH值
          // minInterval:1
          // precision
        },
      ],
      series: [
        {
          type: 'line',
          name: '分公司',
          colorBy: 'series',
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
              { type: 'average', name: '平均值' },
            ],
          },
          markLine: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
              { type: 'average', name: '平均值' },
            ],
          },
          stack: '',
          customerConfig: {
            unit: 'Mpa',
          },
        },
      ],
      legend: {
        left: 'right', // left right center
      },
      // left/right/top/bottom 这几个允许配置
      grid: {
        left: 10,
        right: 20,
        top: 40,
        bottom: 40,
        labelContainer: true,
      },
      // 是否显示
      dataZoom: {
        show: true,
      },
    },
    {
      title: {
        show: true,
        text: '2023年业绩报表',
        textStyle: {
          color: '#123445',
          fontSize: 18,
        },
      },
      xAxis: {
        name: '分公司',
        type: 'category', // 我们的场景,使用两种,category/time
        // minInterval:'', // category为time时,才显示

        // 1. category 表头名称时,data的结构为 ['01月','02月','03月','04月','05月','06月','07月','08月']
        // 2. category 表内数据时 data为带 $ + 字段名的组合
        // 3. time 表内数据时 data 为 $ + 字段名的组合
        data: '$分公司',
        // time时,直接使用以下配置
        // axisLabel:{
        //     formatter: {
        //         year: '{yyyy}',
        //         month: '{MMM}',
        //         day: '{d}',
        //         hour: '{HH}:{mm}',
        //         minute: '{HH}:{mm}',
        //         second: '{HH}:{mm}:{ss}',
        //         millisecond: '{hh}:{mm}:{ss} {SSS}',
        //         none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
        //     }
        // }
      },
      yAxis: [
        {
          name: '万元',
          gridIndex: 0,
          // 特定情况下才需要,比如PH值
          // minInterval:1
          // precision
        },
      ],
      series: [
        {
          type: 'line',
          name: '分公司',
          colorBy: 'series',
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
              { type: 'average', name: '平均值' },
            ],
          },
          markLine: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
              { type: 'average', name: '平均值' },
            ],
          },
          stack: '',
          customerConfig: {
            unit: 'Mpa',
          },
        },
      ],
      legend: {
        left: 'right', // left right center
      },
      // left/right/top/bottom 这几个允许配置
      grid: {
        left: 10,
        right: 20,
        top: 40,
        bottom: 40,
        labelContainer: true,
      },
      // 是否显示
      dataZoom: {
        show: true,
      },
    },
  ],
};*/
const optionStructure = {
  layoutOptions: {
    layout: '上图下表',
    chartCount: 1,
    tableConfigs: [
      {
        title: '水箱个数',
        width: '100%',
        height: '500px',
      },
    ],
    chartConfigs: [
      {
        title: '水箱个数',
        width: '100%',
        height: '100%',
      },
    ],
  },
  chartOptions: [
    {
      title: {
        show: true,
        text: '泵房水箱个数',
        textStyle: {
          color: '#123445',
          fontSize: 18,
        },
      },
      xAxis: {
        name: '泵房名称',
        type: 'category',
        data: '${设备名称}',
        customConfig:{
          dataType:'columnData',// columnData
          combineSame:true
        },
      },
      yAxis: [
        {
          name: '个',
          gridIndex: 0,
        },
      ],
      series: [
        {
          type: 'bar',
          name: '水箱个数',
          colorBy: 'series',
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
              { type: 'average', name: '平均值' },
            ],
          },
          markLine: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
              { type: 'average', name: '平均值' },
            ],
          },
          stack: '',
          customerConfig: {
            unit: '个',
          },
          data:'${水箱个数}'
        },
      ],
      legend: {
        left: 'right',
      },
      grid: {
        left: 10,
        right: 20,
        top: 40,
        bottom: 40,
        labelContainer: true,
      },
      dataZoom: {
        show: true,
      },
    },
  ],
};
export default optionStructure;
// 方案2 配置完,某些样式、设置没有提供,此时可以生成配置,然后手动修改、添加配置。