ECharts折线图-循环展示数据、自定义色值（渐变）

1、需求：折线图条数不定，需按后端给出数据进行相应展示，且色值不能使用默认的样式
2、实现效果

3、重点代码

var fontColor = '#30eee9';
var chartData = [{
    value: {
        01: '20',
        02: '10'
    },
    xaxis: '2010'
}, {
    value: {
        01: '100',
        02: '50'
    },
    xaxis: '2030'
}
, {
    value: {
        01: '100',
        02: '50'
    },
    xaxis: '2070'
}
, {
    value: {
        01: '100',
        02: '50'
    },
    xaxis: '2020'
}]
var value = [];
var xaxis = [];
var data = {}; //编号
chartData.forEach(item => {
    for (var key in item.value) {
        if (data[key] === undefined) {
            data[key] = [];
        }
        data[key].push(item.value[key]); //{01:[1,2,3],02:[1,2,3]......}
    }
    xaxis.push(item.xaxis); //日期
})
data = {
    '01': [2, 50, 264, 95],
    '02': [3, 234, 83, 284],
    '03': [354, 234, 43, 24],
    '04': [34, 234, 483, 24],
}
var colors = ['235,100,148', '20,224,219','25,150,237','248,246,103']
var colors2 =['#eb6494','#14e0db','#1996ed','#f8f667']
var i=0;
for (var key in data) {
    let color = colors[i%colors.length];
    value.push({
        name: key,
        type: 'line',
        stack: '总量',
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
            normal: {
                color: colors2[i],
                lineStyle: {
                    color: colors2[i],
                    width: 1
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: 'rgba(0,29,61,0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba('+color+',0.9)'
                    }]),
                }

            },
        },
        data: data[key]
    })
    i++
}

3.1、如果不想要渐变效果，循环时可如下编写代码

for (var key in data) {
    value.push({
        name: key,
        type: 'line',
        //stack: '总量',
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
            normal: {
                color: colors2[i], //点
                lineStyle: {
                    color: colors2[i], //线
                    width: 1
                },
            }
        },
        data: data[key]
    })
    i++;
}

4、完整代码

var fontColor = '#30eee9';
var chartData = [{
    value: {
        01: '20',
        02: '10'
    },
    xaxis: '2010'
}, {
    value: {
        01: '100',
        02: '50'
    },
    xaxis: '2030'
}
, {
    value: {
        01: '100',
        02: '50'
    },
    xaxis: '2070'
}
, {
    value: {
        01: '100',
        02: '50'
    },
    xaxis: '2020'
}]
var value = [];
var xaxis = [];
var data = {}; //编号
chartData.forEach(item => {
    for (var key in item.value) {
        if (data[key] === undefined) {
            data[key] = [];
        }
        data[key].push(item.value[key]); //{01:[1,2,3],02:[1,2,3]......}
    }
    xaxis.push(item.xaxis); //日期
})
data = {
    '01': [2, 50, 264, 95],
    '02': [3, 234, 83, 284],
    '03': [354, 234, 43, 24],
    '04': [34, 234, 483, 24],
}
var colors = ['235,100,148', '20,224,219','25,150,237','248,246,103']
var colors2 =['#eb6494','#14e0db','#1996ed','#f8f667']
var i=0;
for (var key in data) {
    let color = colors[i%colors.length];
    value.push({
        name: key,
        type: 'line',
        stack: '总量',
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
            normal: {
                color: colors2[i],
                lineStyle: {
                    color: colors2[i],
                    width: 1
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: 'rgba(0,29,61,0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba('+color+',0.9)'
                    }]),
                }

            },
        },
        data: data[key]
    })
    i++
}
option = {
    title: {
        text: '名字',
        left: 19,
        top: 15,
        textStyle: {
            color: '#fff',
            fontSize: 16
        }
    },
    backgroundColor: "#091d3d",
    grid: {
        left: '3%',
        right: '4%',
        bottom: '8%',
        containLabel: true
    },
    tooltip: {
        show: true,
        trigger: 'item'
    },
    legend: {
        show: true,
        // x:'right',
        right: 30,
        y: '35',
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
            color: '#fff'
        },
        // data:['01','02']
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLabel: {
            color: fontColor,
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#397cbc'
            }
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#195384'
            }
        },
        data: xaxis
    }],
    yAxis: [{
            type: 'value',
            // name : '信息量',
            min: 0,
            // max:1000,
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#27b4c2'
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#11366e'
                }
            }
        },
        {
            type: 'value',
            // name : '浏览量',
            min: 0,
            max: 1000,
            axisLabel: {
                show: false,
                formatter: '{value} 人',
                textStyle: {
                    color: '#186afe'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#186afe'
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#11366e'
                }
            }
        }
    ],
    series: value
};

声明：此博客为个人学习之用，如与其他作品雷同，纯属巧合，并请明示指出