Echarts在线免费图表

 
            let xLabel = ["2018", "2019", "2020", "2021", "2022"];
let dataValue = [20, 30, 20, 25, 35];
let option = {
   backgroundColor: '#00266b',
   tooltip: {
      show: true,
      trigger: "axis", //axis , item
      backgroundColor: "RGBA(0, 49, 85, 1)",
      borderColor: "rgba(0, 151, 251, 1)",
      borderWidth: 1,
      borderRadius: 0,
      textStyle: {
         color: "#BCE9FC",
         fontSize: 16,
         align: "left"
      }
   },
   grid: {
      left: "7%",
      right: "7%",
      top: "25%",
      bottom: "2%",
      containLabel: true
   },
   xAxis: [
      {
         type: "category",
         axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
               color: "rgba(1, 58, 116,1)"
            }
         },
         axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
               color: "#FFFFFF",
               fontSize: 12
            }
         },
         splitLine: {
            show: false,
            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: "pictorialBar",
         barWidth: "60%",
         label: {
            normal: {
               show: true,
               position: "top",
               textStyle: {
                  color: "#d1ae36",
                  fontSize: 12
               }
            }
         },
         itemStyle: {
            normal: {
               color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: "#d1ae36" // 0% 处的颜色
                     },
                     {
                        offset: 0.8,
                        color: "#d1ae3600" // 100% 处的颜色
                     },
                     {
                        offset: 1,
                        color: "#d1ae3600" // 100% 处的颜色
                     }
                  ],
                  globalCoord: false // 缺省为 false
               }, //渐变颜色
               borderColor: "#d1ae36",
               borderWidth: 4
            }
         },
         symbol:
            "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",

         data: dataValue
      }
   ],
   dataZoom: [
      {
         xAxisIndex: 0, // 这里是从X轴的0刻度开始
         show: false, // 是否显示滑动条，不影响使用
         type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
         startValue: 0, // 从头开始。
         endValue: 4 // 展示到第几个。
      }
   ]
};

setInterval(() => {
   if (option.dataZoom[0].endValue >= dataValue.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)