Echarts在线免费图表

 
            // 真实数据
let xData1 = ['1月', 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, '13月']
let yData1 = [110, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 110, 130]
// 预测值
let xData2 = [114, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
let yData2 = [110, 150, 160, 170, 180, 190, 200, 210, 220, 230, 200]
let xData = xData1.concat(xData2);
let yData = yData1.concat(yData2);
option = {
  backgroundColor: '#0c2d55',
  grid: {
    top: 20,
    left: 80,
    right: 20,
    bottom: 50,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: 'rgb(41,188,245)',
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#FFFFFF',
          fontSize: 12,
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#233653',
        },
      },
      axisTick: {
        show: false,
      },
      data: xData,
    },
  ],
  yAxis: [
    {
      nameTextStyle: {
        color: "#fff",
        fontSize: 12,
        padding: [0, 60, 0, 0]
      },
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: '#1160a0',
          type: 'dashed'
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#008de7',
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      axisTick: {
        show: false,
      },
    },
  ],
  visualMap: {
    show: false,
    dimension: 0,
    pieces: [
      {
        gt: 0,
        lte: xData1.length - 1,
        color: 'green'
      },
      {
        gt: xData1.length - 1,
        lte: xData.length - 1,
        color: 'red'
      },
    ]
  },
  series: [
    {
      type: 'line',
      smooth: true,
      symbol: 'circle',
      // 拐点大小
      symbolSize: 2,
      emphasis: {
        disabled: true
      },
      data: yData,
      markArea: {
        data: [
          [
            {
              xAxis: 0,
              itemStyle: {
                color: 'blue' //背景色
              },
            },
            {
              xAxis: xData1.length - 1,
              itemStyle: {
                color: 'blue' //背景色
              },
            }
          ],
          [
            {
              xAxis: xData1.length - 1,
              itemStyle: {
                color: 'yellow' //背景色
              },
            },
            {
              xAxis: xData.length - 1,
              itemStyle: {
                color: 'yellow' //背景色
              },
            }
          ],
        ]
      }
    }
  ]
};