echarts 在vue中配置渐变折线图

效果图

直接上代码

option = {
          title: {
            text: '平台收入统计',
            x: 'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            textAlign: "center",//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
            textStyle: {
              //主标题文本样式
              fontSize: 16,
              fontStyle: 'normal',
              fontWeight: 'normal',
              color: "#333333"
            },
          },
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          xAxis: {
            type: 'category',
            scale: true,
            axisTick: {       //x轴刻度线是否显示
              show: false
            },
            axisLine: {
              lineStyle: {
                // 设置x轴颜色
                color: '#666666',
                width: 0, //x轴 是否显示
                type: 'dotted', //'dotted'虚线 'solid'实线
              }
            },
            // 设置X轴数据旋转倾斜
            boundaryGap: true,
            data:["19-05","19-08"] //日期数据源
          },
          yAxis: {
            type: 'value',
            axisTick: {       //y轴刻度线是否显示
              show: false
            },
            axisLine: {
              lineStyle: {
                // 设置y轴颜色
                color: '#666666',
                width: 0, //y轴 是否显示
              }
            },
          },
          //边距调整
          grid: {
            x: 40,
            x2: 20,
            y: 12,
          },
          series: [{
            data: [12,123], //总数数据源,
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            // 设置折线上圆点大小
            symbolSize: 8,
            areaStyle: {  //覆盖区域的渐变色
              normal: {
                // color: '#091e3b', //改变区域颜色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#0F89D7' // 0% 处的颜色
                  }, {
                    offset: 0.5, color: '#29BFF7' // 100% 处的颜色
                  }, {
                    offset: 1, color: '#fff' // 100% 处的颜色
                  }]
                ),  //背景渐变色
              }
            },
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label: {
                  show: true
                },
                borderColor: '#0FA8E1', // 拐点边框颜色
                color: "#0FA8E1",
                lineStyle: {
                  width: 3, // 设置线宽
                  type: 'solid' //'dotted'虚线 'solid'实线
                }
              }
            }
          }],
        };