Echarts 折线图一半实线一半虚线的效果实现

对数据处理：

 const y1: any = [];
        const y2: any = [];
        chartsData.value?.forEach((item: any, index: any) => {
            const temp = {
                value: item.memberFinalTotalAmount,
                settlementUnit: item.settlementUnit,
                settlementStatusValue: item.settlementStatusValue,
            };
            const copy1 = JSON.parse(JSON.stringify(temp));
            if (item.settlementStatusValue == 'Predict') {
                copy1.value = '-';
            }
            y1.push(copy1);
            const copy2 = JSON.parse(JSON.stringify(temp));
            if (
                item.settlementStatusValue == 'Final' &&
                index + 1 < chartsData.value.length - 1 &&
                chartsData.value.find((ele, idx) => idx == index + 1).settlementStatusValue !== 'Predict'
            ) {
                copy2.value = '-';
            }
            y2.push(copy2);
        });

console.log(
            y1.map(i => i.value),
            'Final'
        );
        console.log(
            y2.map(i => i.value),
            'Predict'
        );

image.png

即同一组数据对实线和虚线部分”取反“，不显示的部分使用'-'代替。同一组数据画两次重叠即可。但是两段交界处会不连续：

image.png

因此需要有重叠的部分，上面的代码处理之后即可得到连续折线：

index + 1 < chartsData.value.length - 1 &&
                chartsData.value.find((ele, idx) => idx == index + 1).settlementStatusValue !== 'Predict'

image.png

Tooltip 配置，会有重叠，因此需要过滤无效数据。

 tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
            },
            formatter: function (params: any): string {
                let htmlStr = '';
                htmlStr += `${params[0].axisValue} ${
                    params[0].data.settlementStatusValue == 'Final' ? '' : ' (' + t('org_profile_predict') + ')'
                }
`;
                const valMap = {};
                for (let i = 0; i < params.length; i++) {
                    const param = params[i];
                    const seriesName = param.seriesName; // 图例名称
                    const value = param.value; // y轴值

                    // 过滤无效值
                    if (value == '-') {
                        continue;
                    }

                    // 过滤重叠值
                    if (valMap[seriesName] == value) {
                        continue;
                    }

                    htmlStr += `
                         ${param.marker} ${seriesName}：${value}${param.data.settlementUnit}
                      
`;

                    valMap[seriesName] = value;
                }
                return htmlStr;
            },

实现坐标轴标签的自定义设置（此处为条件判断数据展示不同的样式的label）：

image.png

前提：对x轴数据进行封装配置：

value为x轴默认渲染的属性，额外封装一个属性用来判断。

Fetch:

 const temp = data.map((item: any) => {
            return {
                value: dayjs(item.settlementPeriod).format('YYYY-MM'),
                settlementStatusValue: item.settlementStatusValue,
            };
        });
        XData.value = temp;

Echarts options:

 },
        xAxis: [
            {
                type: 'category',
                data: XData.value,
                axisLabel: {
                    // x轴文字的配置
                    show: true,
                    formatter(val, i): any {
                        if (XData.value[i].settlementStatusValue == 'Final') {
                            return XData.value[i].value;
                        }
                        return `${XData.value[i].value} 预测账单`;
                    },
                },
            },