echarts折线图之曲曲折折颜色渐变

效果: 

代码:

 option = {
     backgroundColor: 'b',
          tooltip : {
            trigger: 'axis',
            formatter: "{b}<br/>{c}分",
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          xAxis: {
            name: '年份',
            boundaryGap: true,
            nameTextStyle: {
              color: '#71edff'
            },
            type: 'category',
            data: ['2017', '2018', '2019'],
            splitLine: {
              show: true,
              lineStyle:{
                color: 'rgba(224,224,224,0.2)'
              }
            },
            axisLabel: { /*坐标轴的刻度文字设置*/
              formatter: '{value}',
              textStyle: {
                color: "rgba(113,237,255,0.5)"
              }
            },
            axisLine: {/*坐标轴,轴线的设置*/
              lineStyle: {
                color: "rgba(224,224,224,0.5)",
              }
            }

          },
          grid: {
            top: '14%',
            left: '8%',
            right:'14%',
            bottom: '8%',
            containLabel: true,

          },
          yAxis: {
            name: '数值',
            nameTextStyle: {
              color: '#71edff'
            },
            type: 'value',
            splitLine: {
              show: true,
              lineStyle:{
                color: 'rgba(224,224,224,0.2)'
              }
            },
            axisLabel: { /*坐标轴的刻度文字设置*/
              formatter: '{value}',
              textStyle: {
                color: "rgba(113,237,255,0.5)"
              }
            },
            axisLine: {/*坐标轴,轴线的设置*/
              lineStyle: {
                color: "rgba(224,224,224,0.5)",
              }
            }
          },
          series: [{
            data: [30, 70, 60],
            type: 'line',

            itemStyle: {
              normal: {
                color: '#a18cd2',
                lineStyle: {
                  color: '#a18cd2'
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: "#a18cd2"},
                    {offset: 0.5, color: "rgba(181,152,254,0.8)"},
                    {offset: 1, color: "rgba(181,152,254,0)"}
                  ])
                }
              }
            }
          }]
        };
发布了41 篇原创文章 · 获赞 17 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/Mr_carry/article/details/102565075
今日推荐