Echarts在线免费图表

 
            let legendData = ["人流量", "车流量"];
let xAxisData = ["2021", "2022", "2023", "2024", "2025"]
let seriesData = [1, 2, 3, 5, 5, 1]
let seriesData1 = [1, 2, 4, 3, 6, 5]


option = {
   backgroundColor:"#064965",
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      }
   },
   grid: {
      top: '10%',
      left: '2%',
      right: '10%',
      bottom: '5%',
      containLabel: true
   },
   legend: {
      icon: 'rect',
      right: "0%",
      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
      }
   }],
   // dataZoom: [
   //   {
   //     type: 'slider',
   //     show: xAxisData.length > this.scrollLen ? true : false,
   //     startValue: 0,
   //     endValue: this.scrollLen - 1,
   //     height: '4',
   //     bottom: '1%',
   //     zoomLock: true,
   //     fillerColor: "#0587BD", // 滚动条颜色
   //     borderColor: "rgba(0,0,0, 0)",
   //     backgroundColor: "#4e5d6a",
   //     handleSize: 0, // 两边手柄尺寸
   //     showDetail: false // 拖拽时是否展示滚动条两侧的文字
   //   },
   //   {
   //     type: "inside", // 支持内部鼠标滚动平移
   //     zoomOnMouseWheel: true, // 关闭滚轮缩放
   //     moveOnMouseWheel: true, // 开启滚轮平移
   //     moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
   //   }
   // ],
   series: [
      {
         name: legendData[0],
         type: "line",
         symbol: 'circle', //设定为实心点
         showAllSymbol: true,
         symbolSize: 0,
         smooth: true,
         itemStyle: {
            normal: {
               color: `#00CBFE`,
               lineStyle: { //线的颜色
                  color: `#00CBFE`,
                  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: 0,
         smooth: true,
         itemStyle: {
            normal: {
               color: `#FFDF04`,
               lineStyle: { //线的颜色
                  color: `#FFDF04`,
                  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
      }
   ]
};