工作中遇到的问题(-)

Echarts 相关

1. 控制台 echarts 警告

削峰 series not exists. Legend data should be same with series name or data name. echarts 的警告怎么关闭?

<AnalyEChartReact
  style={{
    width: "100%",
    height: "calc(100%)",
  }}
  ref={this.refChartLine1}
  // legend={['昨日', '预测', '实际',]} // 注释掉 就可以去掉警告了
  showXAxis={true}
  showYAxis={true}
  ySplitLine={true} // 中间虚线
  xSplitLine={false}
  splitLineColor="#ededed"
  fontColor="black"
  fontSize={12}
  yName={"MW"}
  modalTitle="负荷预测"
  grid={{
    top: 50,
    left: 15,
    right: 10,
    bottom: 10,
    containLabel: true,
  }}
  legendPosition={{ left: "center", top: 0, itemWidth: 14, itemHeight: 2 }}
  datas={this.state.loadPredictionData}
/>

ant 的 Table 设置表头的背景色 和 设置隔行变色

    .ant-table-wrapper {
        .ant-table-thead {
            > tr {
                > th {
                    background: #D3F4F3;
                }
            }
        }
    }
    .dark-row {
        .ant-table-cell {
            background: #F2F2F2;
        }


    }
    .light-row {
        .ant-table-cell {
            background: #fff;
        }
    }

ant 的 DatePicker 时间选择器,年月日带小时分钟, 关键点 showTime 展示小时分钟

<DatePicker
    allowClear={false}
    style={{width: 200}}
    showTime
    defaultValue={dayjs()}
    format="MM-DD HH:mm"
    onChange={this.DateChange}
/>

Echarts 曲线图 曲线上展示角标

formatChartData = (seriesList) => {
    return seriesList.map((series) => ({
        ...series,
        markPoint: {
            data: [
                {type: 'max', name: '', itemStyle: {color: '#ff0000'}},
                {type: 'min', name: '', itemStyle: {color: '#00ff00'}},
            ],
            label: {
                show: false,
                color: '#ffffff',
                formatter: '{b}: {c}',
            },
            symbolSize: 25,
        },
        showAllSymbol: true,
    }));
}

Echarts 曲线图 展示限制线

const chartDataItem = this.state.chartData2.map((series) => {
    // 找到所有超过 9000 的点的索引
    const over9000Points = series.data
        .map((item, index) => item.value > 9000 ? index : -1)
        .filter(index => index !== -1);  // 过滤出超过 9000 的点的索引

    // 存储绘制的 markLine 数据
    const markLineData = [];

    let i = 0;
    while (i < over9000Points.length) {
        // 查找连续的点
        let start = i;
        while (i + 1 < over9000Points.length && over9000Points[i + 1] === over9000Points[i] + 1) {
            i++;
        }

        // 如果至少有4个连续的点
        if (i - start >= 3) {
            // 画竖线的逻辑
            markLineData.push({
                xAxis: over9000Points[start], // 连续区间的第一个点
                name: '超过9000区间',
                lineStyle: { color: '#ff0000', width: 2, type: 'dashed' }
            });

            markLineData.push({
                xAxis: over9000Points[i], // 连续区间的最后一个点
                name: '超过9000区间',
                lineStyle: { color: '#ff0000', width: 2, type: 'dashed' }
            });
            markLineData.push({
                yAxis: 9000,
                name: '9000兆瓦',  // 标记名称
                lineStyle: { color: '#ff0000', width: 2, type: 'dashed' },
            });
        }

        // 继续检查下一个区间
        i++;
    }

    return {
        ...series,
        markLine: {
            data: markLineData,
            label: {
                show: true,
                color: '#ffffff',
                formatter: '9000',
            },
        },
        showAllSymbol: true,
    };
});