echarts折線圖的相關設置

從上面這個簡單的折線圖，通過配置項修改折線的顯示，下面的有背景圖。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

 option = {
    //  全局設置字體顏色
      textStyle: {
        color: '#1BB3E3'
      },
    //   是否顯示鼠標指向時顯示label 可設置formatter自定義樣式
      tooltip: {},
      xAxis: {
        type: 'category',
        axisLine: {
          show: true,
          // 設置座標軸顏色
          lineStyle: {
            color: '#3C7DB9'
          }
        },
        // 座標軸刻度相關設置。
        axisTick: {
          show: false
        },
        // 刻度標籤與軸線之間的距離。
        axisLabel: {
          margin: 28
        },
        // x軸值 y軸不設置的話自適應
        data: ['1','2','3','4']
      },
      yAxis: {
        type: 'value',
        // 座標軸刻度設置爲不顯示
        axisTick: {
          show: false
        },
        // 座標軸軸線設置爲不顯示
        axisLine: {
          show: false
        },
        // 設置分隔線顏色
        splitLine: {
          lineStyle: {
            // 使用深淺的間隔色
            color: ['#193F69']
          }
        }
      },
    //   折線symbol圓點變顏色，暫時這樣處理，不知道有無更好的辦法
      series: [{
        // 設置折線下面的陰影
        areaStyle: {
          color: '#0A4C7B',
          opacity: 0.2
        },
        data: [12,13,10,15],
        type: 'line',
        symbol: 'circle',
        itemStyle: {
          // 點邊線顏色
          color: '#051A38',
          // 轉折點描邊顏色
          // borderColor: '#1BB3E3',
          borderColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0, color: '#60D620' // 0% 處的顏色
            }, {
              offset: 1, color: '#00ECB1' // 100% 處的顏色
            }],
            global: false // 缺省爲 false
          }
          // 轉折點描邊寬
          // borderWidth: 2
        },
        lineStyle: {
          // 線顏色
          // color: '#1BB3E3'
          // 改變線的顏色爲漸變色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0, color: '#60D620' // 0% 處的顏色
            }, {
              offset: 1, color: '#00ECB1' // 100% 處的顏色
            }],
            global: false // 缺省爲 false
          },
        },
        symbolSize: 8,
      }]
    };