Echarts在线免费图表

 
            let xLabel = ["2018", "2019", "2020", "2021", "2022"];
let dataValue = [20, 30, 20, 25, 35];
const option = {
  backgroundColor: '#00266b',
  tooltip: {
    show: true,
    trigger: "axis", //axis , item
    backgroundColor: "RGBA(0, 49, 85, 0)",
    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: "25%",
      label: {
        normal: {
          show: true,
          position: "top",
          textStyle: {
            color: "#d1ae36",
            fontSize: 12
          }
        }
      },
      itemStyle: {
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#66A6FF" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#015EB4" // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
          }, //渐变颜色
          borderColor: "#d1ae36",
          borderWidth: 0
        }
      },
      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
    },
    {
      // yAxisIndex: 1,
      itemStyle: {
        show: false,
        color: 'transparent',
        opacity: 0//透明度
      },
      showBackground: true,
      data: dataValue,//这个数据无所谓，反正不显示，只要data的长度和另外两个一样长就行了
      barWidth: 50,
      backgroundStyle: {
        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   { offset: 0, color: 'rgba(6, 40, 75,0.6)' },
        //   { offset: 1, color: 'rgba(6, 40, 75,0.6)' },
        // ])
        color: 'rgba(255, 255, 255,0.05)',
      },
      zlevel: -1,
      tooltip: {
        show: false,
        trigger: 'axis',
        type: 'none',
      },
      type: 'bar'
    }
  ],
  dataZoom: [
    {
      xAxisIndex: 0, // 这里是从X轴的0刻度开始
      show: false, // 是否显示滑动条，不影响使用
      type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      startValue: 0, // 从头开始。
      endValue: 5 // 展示到第几个。
    }
  ]
}
// 自动更新柱
setInterval(() => {
  if (option.dataZoom[0].endValue >= dataValue.length - 1) {
    option.dataZoom[0].endValue = 3 // 展示的下标数 （3 就是一共展示4个）
    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)
//   initAutoPlay(pictureEchartsRef.value.myChart, options.value)
}, 3000)