项目记录echarts 折线配置项内容和展示

根据上升下降趋势展示不同颜色

      var xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
var seriesData = [];
var data = [
    [60, 90, 60, 70, 80, 100, 70, 90, 60, 70, 80, 100],
    [50, 80, 50, 60, 70, 90, 60, 80, 50, 60, 70, 90],
    [40, 60, 40, 50, 55, 70, 50, 60, 30, 40, 50, 70],
];
let dataNewArr = [];
let colorArr = ['#4BCD6C', '#00F1FF', '#33AEEE'];
let legendData = ['转向架', '车体', '总装'];

// 颜色十六进制转换rgb
let hexToRgba = (hex, opacity) => {
    let rgbaColor = '';
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt(
            '0x' + hex.slice(5, 7)
        )},${opacity})`;
    }
    return rgbaColor;
};
// 循环处理3条数据
for (var i = 0; i < data.length; i++) {
    dataHandling(i);
}
// 数据拆分为上升和下降
function dataHandling(num) {
    let lineData = data[num];
    let lineNewArr = [];
    let btn = true; //默认首次第一个和第二个比较是升就是false?否则是true
    let startIndex = 0;
    for (var i = 0; i < lineData.length; i++) {
        let next = lineData[i + 1];
        if (i == lineData.length - 1) {
            var flagArr = lineData.slice(startIndex);
            if (startIndex > 0) {
                for (var j = 0; j < startIndex; j++) {
                    flagArr.unshift('');
                }
            }
            if (flagArr.length > 0) {
                lineNewArr.push({
                    nullData: startIndex,
                    data: flagArr,
                    status: btn,
                });
            }
        }
        if (next) {
            if (btn == false) {
                if (next < lineData[i]) {
                    if (lineNewArr.length == 0) {
                        startIndex = 0;
                    }
                    var flagArr = lineData.slice(startIndex, i + 1);
                    if (startIndex > 0) {
                        for (var j = 0; j < startIndex; j++) {
                            flagArr.unshift('');
                        }
                    }
                    lineNewArr.push({
                        nullData: startIndex,
                        data: flagArr,
                        status: btn,
                    });
                    btn = true;
                    startIndex = i;
                }
            } else {
                if (next > lineData[i]) {
                    var flagArr = lineData.slice(startIndex, i + 1);
                    if (startIndex > 0) {
                        for (var j = 0; j < startIndex; j++) {
                            flagArr.unshift('');
                        }
                    }
                    lineNewArr.push({
                        nullData: startIndex,
                        data: flagArr,
                        status: btn,
                    });
                    startIndex = i;
                    btn = false;
                }
            }
        }
    }
    dataNewArr.push(lineNewArr);

    lineHandling(num);
}
// 循环line
function lineHandling(num) {
    let lineNewArr = dataNewArr[num];
    lineNewArr.forEach(function (item, i) {
        if (lineNewArr[i].status == false) {
            seriesData.push({
                name: legendData[num],
                data: lineNewArr[i].data,
                type: 'line',
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 14,
                label: {
                    show: true,
                    formatter: function (params) {
                        return params.value;
                    },
                    position: [0, -20],
                    textStyle: {
                        color: '#FDFDFD',
                        fontSize: 12,
                    },
                },
                lineStyle: {
                    normal: {
                        width: 2,
                        color: colorArr[num],
                        shadowBlur: 3,
                        shadowColor: 'rgba(0,0,0,.8)',
                        shadowOffsetY: 16,
                    },
                },
                emphasis: {
                    show: false,
                },

                itemStyle: {
                    color: colorArr[num],
                    borderColor: '#fff',
                    borderWidth: 1,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: hexToRgba(colorArr[num], 0.1),
                                },
                                {
                                    offset: 1,
                                    color: hexToRgba(colorArr[num], 0),
                                },
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(colorArr[num], 0.1),
                        shadowBlur: 10,
                    },
                },
            });
        } else {
            seriesData.push({
                name: legendData[num],
                data: lineNewArr[i].data,
                type: 'line',
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 14,
                label: {
                    show: true,
                    formatter: function (params) {
                        return params.value;
                    },
                    position: [0, -20],
                    textStyle: {
                        color: '#FDFDFD',
                        fontSize: 12,
                    },
                },
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#F54D4D',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0,0,0,.8)',
                        shadowOffsetY: 16,
                    },
                },
                itemStyle: {
                    color: colorArr[num],
                    borderColor: '#fff',
                    borderWidth: 1,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: hexToRgba(colorArr[num], 0.1),
                                },
                                {
                                    offset: 1,
                                    color: hexToRgba(colorArr[num], 0),
                                },
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(colorArr[num], 0.1),
                        shadowBlur: 10,
                    },
                },
            });
        }
    });
}

option = {
    backgroundColor: '#010e28',
    legend: {
        right: '5',
        top: '20',
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 15,
        textStyle: {
            color: '#E3E3E5',
            fontSize: 12,
            fontFamily: 'PingFang',
        },
        icon: 'rect',
        data: legendData,
    },
    grid: {
        left: '4%',
        right: '4%',
        bottom: '5%',
        top: '15%',
        containLabel: true,
    },
    xAxis: {
        axisTick: {
            show: false, // 隐藏x轴的分割点
        },
        axisLabel: {
            textStyle: {
                fontSize: 12,
                color: '#E3E3E5',
                fontFamily: 'PingFang',
            },
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        data: xAxisData,
    },
    yAxis: {
        type: 'value',
        scale: true,
        axisTick: {
            show: false, // 隐藏x轴的分割点
        },
        axisLabel: {
            textStyle: {
                fontSize: 12,
                color: '#E3E3E5',
                fontFamily: 'PingFang',
            },
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: ' rgba(204,204,204,.42)',
                type: 'dashed',
            },
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: ' rgba(204,204,204,.42)',
                type: 'dashed',
            },
        },
    },
    series: seriesData,
};