Echarts在线免费图表

 
            // areaStyle.origin 5.3.2及以上支持

var arr = [
  [0, 50],
  [1, 100],
  [2, 150],
  [3, 200],
  [4, 150],
  [5, 100],
  [6, 50]
];
var arr1 = [
  [6, 50],
  [7, 0],
  [8, -50],
  [9, -100],
  [10, -50],
  [11, 0],
  [12, 50],
];
option = {
  title: {
    left: 'center',
    text: '警戒线区域渐变',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 16
    }
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    show: true,
    transitionDuration: 0 // 让toolltip紧跟鼠标
  },
  xAxis: {
    axisLabel: {
      // interval: 0, //x轴全部显示
      textStyle: {
        //改变刻度字体样式
        // color: "#fff",
        fontSize: 12
      }
    },
    type: 'category',
    boundaryGap: false,
    data: [
     0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20
    ]
  },

  yAxis: {
    type: 'value',
    splitNumber: 6 //坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
  },
  grid: {
    left: '6%',
    top: '15%',
    width: '85%',
    height: '80%',
    containLabel: true
  },
  series: [
    {
      color: 'blue',
      data: arr,
      type: 'line',
      smooth: true,
      showSymbol: true, //是否默认展示圆点
      symbol: 'circle', //设定为实心点
      symbolSize: 10, //设定实心点的大小
      markLine: {
        symbol: 'none', //去掉箭头
        data: [
          {
            yAxis: 50,
            name: '警戒线',
            lineStyle: { color: '#FFD800', width: 2 }
          }
        ]
      },
      areaStyle: {
        origin: 50,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(58,132,255, 0.5)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(58,132,255, 0)' //   100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    },
    {
      color: 'red',
      data: arr1,
      type: 'line',
      smooth: true,
      showSymbol: true, //是否默认展示圆点
      symbol: 'circle', //设定为实心点
      symbolSize: 10, //设定实心点的大小
      areaStyle: {
        origin: 50,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(200,0,0, 0)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(200,0,0, 0.5)' //   100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    }
  ]
};