渐变色

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LzzMandy/article/details/83870170

1、bar ------用itemStyle

2、line ------用areaStyle

option = {
    color: ['rgb(123,104,238)', 'rgb(0,205,102)', 'rgba(0,0,0,1)', 'yellow'],
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            return params[0].name + ' : ' +
                (params[2].value - params[1].value > 0 ? '+' : '-') +
                params[0].value + '<br/>' +
                params[2].seriesName + ' : ' + params[2].value + '<br/>' +
                params[3].seriesName + ' : ' + params[3].value + '<br/>'
        }
    },
    legend: {
        data: ['本周', '上周'],
        selectedMode: false
    },
    xAxis: [{
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    yAxis: [{
        type: 'value',
        min: 200,
        max: 450
    }],
    series: [{
            name: '本周',
            type: 'line',
            smooth: true,
            data: [400, 374, 251, 300, 420, 400, 440],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                                offset: 0, //开始位置，从上向下
                                color: 'rgb(123,104,238)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(123,104,238,.4)'
                            }
                        ]
                    )
                }
            },
        },
        {
            name: '上周',
            smooth: true,
            type: 'line',
            symbol: 'none',
            itemStyle: {
                normal: {
                    lineStyle: {
                        width: 1,
                        type: 'dashed'
                    }
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                                offset: 0, //开始位置，从上向下
                                color: 'rgb(0,205,102)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(0,205,102,.4)'
                            }
                        ]
                    )
                }
            },
            data: [320, 332, 301, 334, 360, 330, 350]
        },
        {
            name: '上周2',
            type: 'bar',
            stack: '1',
            barWidth: 16,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                                offset: 0, //开始位置，从上向下
                                color: '#000'
                            },
                            {
                                offset: 1,
                                color: 'rgba(0,0,0,.2)'
                            }
                        ]
                    )
                }
            },
            data: [320, 332, 251, 300, 360, 330, 350] //堆积的底层部分取线性的最小值
        },
        {
            name: '变化',
            type: 'bar',
            stack: '1',
            data: [
                80, 42,
                  {value : 50, itemStyle:{ normal:{color:'red'}}},
                  {value : 34, itemStyle:{ normal:{color:'red'}}}, 
                60, 70, 90
            ]
        }
    ]
};