echarts渐变折线图

在这里插入图片描述

option = {
                    grid: {   // 直角坐标系内绘图网格
                        left: '10',  //grid 组件离容器左侧的距离,
                                     //left的值可以是80这样具体像素值,
                        //也可以是'80%'这样相对于容器高度的百分比
                        top: '10',
                        right: '10',
                        bottom: '0',
                        containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候,
                        // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
                        //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        axisLine: {show: false},//坐标轴轴线
                        axisTick: {show: false},//坐标轴刻度
                        axisLabel: {    // 坐标轴标签
                            // show: true,  // 是否显示
                            // inside: false, // 是否朝内
                            // rotate: 0, // 旋转角度
                            // margin: 5, // 刻度标签与轴线之间的距离
                            color: 'rgba(255,255,255,1)',
                        },
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {show: false},//坐标轴在 grid 区域中的分隔线
                        axisLabel: {show: false},//坐标轴刻度标签
                        axisTick: {show: false},//坐标轴刻度
                        axisLine: {show: false},//坐标轴轴线
                    },
                    series: [{
                        data: [100, 120, 130, 121, 150, 160],
                        type: 'line',
                        itemStyle : {
                            color:{
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgb(15,83,175)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgb(70,177,241)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },

                        lineStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgb(70,177,241)' // 0% 处的颜色
                                },{
                                    offset: 0.5, color: 'rgb(70,177,241)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgb(70,177,241)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },

                        areaStyle: {

                        }
                    }]
                };
 


版权声明:本文为weixin_42752532原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。