Echarts在线免费图表

 
            var echartData = {
   xData: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
   ],
   yData: [150, 20, 30, 40, 50, 60, 200, 80, 90, 100, 110, 120],
};
option = {
   backgroundColor: '#002653',
   tooltip: {
      trigger: 'axis',
      color: '#00',
      fontSize: 14,
      borderColor: 'rgba(255, 255, 255, .16)',
      textStyle: {
         color: '#00',
         fontSize: 14
      },
      axisPointer: {
         lineStyle: {
            color: 'rgba(28, 124, 196, .6)'
         }
      }
   },
   grid: {
      top: '11%',
      left: '5%',
      right: '4%',
      bottom: '10%',
      containLabel: true
   },
   xAxis: [
      {
         type: 'category',
         data: echartData.xData,
         axisLine: {
            show: true
         },
         axisLabel: {
            color: '#FFF',
            fontSize: 14,
            formatter(params) {
               return params.replace(/-/, '\n');
            },
         },
         boundaryGap: false,
         axisTick: {
            //坐标轴刻度相关设置。
            show: true
         }
      }
   ],
   yAxis: [
      {
         type: 'value',
         min: 5,
         axisTick: {
            show: false
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: '#FFF'
            }
         },
         axisLabel: {
            color: '#FFF',
            fontSize: 14
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: '#000',
               type: 'dashed',
               opacity: 0.1
            }
         }
      }
   ],
   series: [
      {
         type: 'line',
         data: echartData.yData,
         smooth: true,
         symbolSize: 10,
         // lineStyle: {
         //     color: 'rgba(34,150,243, 1)', // 折线颜色
         //     width: 2,
         //     shadowColor: 'rgba(34,150,243, 0.3)', // 折线阴影颜色
         //     shadowOffsetY: 5
         // },
         itemStyle: {
            color: 'rgba(113, 240, 203, 1)' // 折线点的颜色
         },
         areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
               // 折线点的阴影
               {
                  offset: 0,
                  color: 'rgba(113, 240, 203, 0)'
               },
               {
                  offset: 1,
                  color: 'rgba(113, 240, 203, 0.7)'
               }
            ])
         }
      }
   ]
};