紫色折线图echarts 折线配置项内容和展示

配置项如下
      option = {
  backgroundColor: '#000',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: [{
        name:"线损",
        itemStyle:{
            color:"rgb(13,219,207)"
        },
        lineStyle:{
            color:"rgb(13,219,207)"
        }
    }],
    textStyle: {
        //文字样式
        color: "#b4c9d1",
        fontSize: "12"
     },
     top:"4%",
     right:"3%"
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      //x轴坐标点
      axisTick:{
        show: false,
        lineStyle: {
          color: '#7e99c2'
        }
      },
      //x轴坐标线样式
      axisLine: {
        show: false,
        lineStyle: {
          color: '#7e99c2'
        }
      },
      axisLabel:{
        color: '#89C3DD'
      },
      //x轴线
      splitLine:{
        show: true,
        lineStyle: {
          type: [5,10],
          dashOffset: 10,
          color: '#1282C8'
        }
      },
      boundaryGap: false,
      data: ['1', '2','3', '4','5', '6','7','8']
    }
  ],
  yAxis: [
    {
      name: '单位:千t',
      nameTextStyle:{//y轴上方单位的颜色
              color:'#6b96aa'  
      },
      type: 'value',
      axisTick:{
        show: false,
        lineStyle: {
          color: '#1282C8'
        }
      },
      splitLine:{
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#1282C8'
        }
      },
      axisLabel:{
        color: '#89C3DD'
      }
    }
  ],
  series: [
    {
      name: '线损',
      type: 'line',
      smooth:0.6,
      min: 0,
      symbol: 'circle',
      symbolSize: 0,
      lineStyle: {
        normal: {
            // 颜色渐变函数 前四个参数分别表示四个位置依次为
            // 右下左上
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ 
                                        offset: 0, 
                                        color: '#b073f3' 
                                    },
                                    { 
                                        offset: 0.3, 
                                        color: '#ca9bea' 
                                    },
                                    { 
                                        offset: 0.6, 
                                        color: '#d1b0d4' 
                                    },{ 
                                        offset: 1, 
                                        color: '#fae5d9' 
                                    }]),//线条渐变色 
          width: 4,
          shadowColor: 'rgba(70, 55, 88, 0.35)',
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 10
        },
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: "rgba(58, 46, 73, 0.9)" // 0% 处的颜色
          }, {
              offset: 0.5, color: "rgba(56, 44, 71, 0.5)" // 100% 处的颜色
          },{
              offset: 1, color: "transparent", //0% 处的颜色
            }],
          global: false // 缺省为 false
        }
      },
      data: [0.32, 0.31, 0.43, 0.52, 0.54, 0.55, 0.54,0.41]
    }
  ]
};
    
截图如下