// 方案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 配置完,某些样式、设置没有提供,此时可以生成配置,然后手动修改、添加配置。