Echarts在线免费图表

 
            let xLabel = ["2017", "2018", "2019", "2020", "2021", "2022"];
let dataValue = [2000, 3000, 2000, 2500, 3500, 3100];
let dataValue1 = [2300, 3500, 2800, 1500, 3700, 2500];
let option = {
   backgroundColor: '#00266b',
   tooltip: {
      trigger: "axis",
      axisPointer: {
         lineStyle: {
            color: "rgb(255,255,255,0.3)"
         }
      }
   },
   legend: {
      icon: "rect",
      show: true,
      top: "5%",
      right: "5%",
      itemWidth: 11, // 图例标记的图形宽度。
      itemHeight: 7, //  图例标记的图形高度。
      textStyle: {
         color: "#fff",
         fontSize: 12,
         padding: [0, 5, 0, 5]
      }
   },
   grid: {
      left: "7%",
      right: "7%",
      top: "25%",
      bottom: "5%",
      containLabel: true
   },
   xAxis: [
      {
         type: "category",
         boundaryGap: false,
         axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
               color: "rgba(1, 58, 116,1)"
            }
         },
         axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
               color: "#FFFFFF",
               fontSize: 12
            }
         },
         splitLine: {
            show: true,
            type: "dashed",
            lineStyle: {
               color: "rgba(1, 58, 116,1)"
            }
         },

         axisTick: {
            show: false
         },
         data: xLabel
      }
   ],
   yAxis: [
      {
         name: "(元)",
         nameTextStyle: {
            color: "white",
            fontSize: 12,
            padding: [0, 0, 0, -30]
         },
         // minInterval: 1,
         type: "value",
         splitLine: {
            show: false,
            lineStyle: {
               color: "#1160a0",
               type: "dashed"
            }
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "rgba(1, 58, 116,1)"
            }
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: "#fff",
               fontSize: 12
            }
         },
         axisTick: {
            show: false
         }
      }
   ],
   series: [
      {
         name: "居民人均收入",
         type: "line",
         smooth: true,
         showSymbol: false,
         lineStyle: {
            normal: {
               width: 2,
               color: "#00cbff" // 线条颜色
            }
         },
         itemStyle: {
            normal: {
               color: "#00cbff", //拐点颜色
               // borderColor: '#fff600',//拐点边框颜色
               // borderWidth: 13//拐点边框大小
               label: {
                  show: false, //开启显示
                  color: "#fff",
                  position: "top", //在上方显示
                  formatter: function (res) {
                     if (res.value) {
                        return res.value;
                     } else {
                        return 0;
                     }
                  }
               }
            }
         },
         areaStyle: {
            normal: {
               //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                     {
                        offset: 0,
                        color: "#ffba0030"
                     },
                     {
                        offset: 0.6,
                        color: "#ffba0020"
                     },
                     {
                        offset: 1,
                        color: "#ffba0010"
                     }
                  ],

                  false
               )
            }
         },
         data: dataValue
      },
      {
         name: "人均纯收入",
         type: "line",
         smooth: true,
         showSymbol: false,
         lineStyle: {
            normal: {
               width: 2,
               color: "#ffcc00" // 线条颜色
            }
         },
         itemStyle: {
            normal: {
               color: "#ffcc00", //拐点颜色
               // borderColor: '#fff600',//拐点边框颜色
               // borderWidth: 13//拐点边框大小
               label: {
                  show: false, //开启显示
                  color: "#fff",
                  position: "top", //在上方显示
                  formatter: function (res) {
                     if (res.value) {
                        return res.value;
                     } else {
                        return 0;
                     }
                  }
               }
            }
         },
         areaStyle: {
            normal: {
               //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                     {
                        offset: 0,
                        color: "#00ffa230"
                     },
                     {
                        offset: 0.6,
                        color: "#00ffa220"
                     },
                     {
                        offset: 1,
                        color: "#00ffa210"
                     }
                  ],
                  false
               )
            }
         },
         data: dataValue1
      }
   ],
   dataZoom: [
      {
         xAxisIndex: 0, // 这里是从X轴的0刻度开始
         show: false, // 是否显示滑动条，不影响使用
         type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
         startValue: 0, // 从头开始。
         endValue: 4 // 展示到第几个。
      }
   ]
};
setInterval(() => {
   if (option.dataZoom[0].endValue >= dataValue1.length - 1) {
      option.dataZoom[0].endValue = 3
      option.dataZoom[0].startValue = 0
   } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
   }
   myChart.setOption(option)
}, 4000)