echarts 改变折线图曲线颜色、区域颜色

矫情吗；* 2023-06-04 12:53 75阅读 0赞

效果图：  
![1340563-20190828020605643-969486924.png][]

代码：

option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth:true,
            itemStyle : { 
               color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#1CD8D2' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#ffffff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
               }
            },
            lineStyle:{
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#ffffff' // 0% 处的颜色
                    },{
                        offset: 0.5, color: '#5865FF' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#ffffff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            areaStyle: {}
        }]
    };

转载于:https://www.cnblogs.com/justyouadmin/p/11421680.html

[1340563-20190828020605643-969486924.png]: /images/20230601/743e335282ff48f7afd8b953717afd8a.png