Echarts 折线图背景渐变色

最新推荐文章于 2024-12-23 17:43:26 发布

xiaohuichonga

最新推荐文章于 2024-12-23 17:43:26 发布

阅读量3.4k

点赞数

文章标签： echarts 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/xiaohuichonga/article/details/129382921

版权

本文介绍了如何在Echarts中为折线图设置背景渐变色，通过示例代码展示了具体的实现过程，帮助读者理解并应用到自己的前端项目中。

摘要由CSDN通过智能技术生成

在资料上找到类似的,如下:

echarts图表背景色

   option = {
            grid: {//设置图表四周留白间距
                top: '2%',
                right: '2%',
                bottom: '4%',
                left: '4%'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,//设置x轴两边的留白
                axisTick: { //x轴刻度尺
                    show: false
                },
                axisLine: {//x轴线条颜色
                    lineStyle: {
                        color: '#999'
                    }
                },
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                max: 1400,//最大刻度值
                interval: 100,//刻度值间隔值
                splitLine: {//网格线
                    show: false, //关闭网格线
                    // 或者
                    lineStyle: {
                        type: 'dashed',    //设置网格线类型 dotted：虚线   solid:实线
                        color: '#ededed'  //网格线颜色
                    },
                },
                axisLine: {//y轴线条颜色
                    show: true,
                    lineStyle: {
                        color: '#999'
                    }
                },
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,//面积图改成弧形状
                lineStyle: {
                    width: 1,//外边线宽度
                    color: 'red'//外边线颜色
                },
                showSymbol: false,//去除面积图节点圆
                areaStyle: {//区域填充渐变颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(237,66,100, 0.5)&#

最低0.47元/天解锁文章