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,
      }]
    };