Echarts在线免费图表

 
            let legendData =  ['已租房屋', '已售房屋'];
let xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
let seriesData = [355, 330, 290, 233, 205, 321]
let seriesData1 =  [299, 304, 359, 410]

option = {
   backgroundColor:"#064965",
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      }
   },
   grid: {
      top: '30%',
      left: '2%',
      right: '10%',
      bottom: '5%',
      containLabel: true
   },
   legend: {
      icon: 'rect',
      right: "center",
      top: '2%',
      itemWidth: 7, // 设置宽度
      itemHeight: 7, // 设置高度
      itemGap: 15, // 设置间距
      textStyle: { //图例文字的样式
         color: '#89BFE5',
         fontSize: 12
      }
   },
   xAxis: {
      boundaryGap: true,
      data: xAxisData,
      axisLine: {
         lineStyle: {
            color: "rgba(117, 168, 202, 0.4)"
         }
      },
      axisTick: {
         show: false
      },
      axisLabel: {
         color: '#fff'
      }
   },
   yAxis: [{
      // name: '单位：个',
      // type: "value",
      inverse: false,
      splitLine: {
         show: true,
         lineStyle: {
            color: 'rgba(117, 168, 202, 0.3)',
            type: 'dashed'
         }
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: "#0A5C95"
         }
      },
      axisLabel: {
         formatter: "{value}",
         textStyle: {
            color: '#89BFE5',
            fontSize: 12
         }
      },
      nameTextStyle: {
         color: '#89BFE5',
         padding: [0, 0, 0, 15],
         fontSize: 12
      },
      axisTick: {
         show: false
      }
   }],
   series: [
      {
         name: legendData[0],
         type: "line",
         symbol: 'circle', //设定为实心点
         showAllSymbol: true,
         symbolSize: 5,
         smooth: true,
         itemStyle: {
            normal: {
               color: `#2BDFD4`,
               lineStyle: { //线的颜色
                  color: `#2BDFD4`,
                  width: 1.5
               },
               areaStyle: {
                  //type: 'default',
                  //旧版渐变色实现
                  // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //变化度
                  //    //三种由深及浅的颜色
                  //    [{
                  //       offset: 0,
                  //       color: 'rgba(1, 180, 255, 0.2)'
                  //    }, {
                  //       offset: 1,
                  //       color: 'rgba(1, 180, 255, 0.1)'
                  //    }])
                  
                  //新版渐变色实现
                  color: {
                     type: 'linear',
                     x: 0,
                     y: 0,
                     x2: 0,
                     y2: 1,
                     colorStops: [
                        {
                           offset: 0,
                           color: 'rgba(1, 180, 255, 0.2)'
                        },
                        {
                           offset: 1,
                           color: 'rgba(1, 180, 255, 0.1)'
                        }
                     ]
                  }
               },
            }
         },
         data: seriesData
      },
      {
         name: legendData[1],
         type: "line",
         symbol: 'circle', //设定为实心点
         showAllSymbol: true,
         symbolSize: 5,
         smooth: true,
         itemStyle: {
            normal: {
               color: `#FFD076`,
               lineStyle: { //线的颜色
                  color: `#FFD076`,
                  width: 1.5
               },
               areaStyle: {
                  //旧版渐变色实现
                  // type: 'default',                 
                  // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //变化度
                  //    //三种由深及浅的颜色
                  //    [{
                  //       offset: 0,
                  //       color: 'rgba(255, 223, 4, 0.2)'
                  //    }, {
                  //       offset: 1,
                  //       color: 'rgba(255, 223, 4, 0.1)'
                  //    }])
                  //新版渐变色实现
                  color: {
                     type: 'linear',
                     x: 0,
                     y: 0,
                     x2: 0,
                     y2: 1,
                     colorStops: [
                        {
                           offset: 0,
                           color: 'rgba(255, 223, 4, 0.2)'
                        },
                        {
                           offset: 1,
                           color: 'rgba(255, 223, 4, 0.1)'
                        }
                     ]
                  }
               },
            }
         },
         data: seriesData1
      }
   ]
};