bar2echarts 配置项内容和展示

      option ={
        backgroundColor: "#263361",
        tooltip: {},
        grid: {
          top: 30,
          right: 10,
          left: 40,
          bottom: 50,
        },
        dataZoom: {
          type: "slider",
          start: 0,
          end: 70,
          height: 10,
          bottom: 3,
          textStyle: {
            color: "#ccc",
            fontSize: 10,
          },
        },
        xAxis: [
          {
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisLine: {
              show: false,
              lineStyle: {
                color: "#FFFFFF",
              },
            },
            axisTick: {
              show: false,
              // length: 1,
            },
            axisLabel: {
              color: "#FFFFFF",
              // show: false,
              width: 34,
              height: 16,
              fontSize: 12,
              lineHeight: 18,
              interval: 0,
            //   backgroundColor: {
            //     image: braItemBg,
            //   },
            },
          },
          {
            type: "category",
            show: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
              length: 2,
            },
            axisLabel: {
              interval: 0,
              margin: 5,
              color: "#fff",
              fontSize: 12,
              padding: 3,
              backgroundColor: "rgba(9,93,88,0.30)",
            },
            data: [120, 200, 150, 80, 70, 110, 130],
          },
        ],
        yAxis: [
          {
            name: "单位：人",
            max: 200,
            offset: 10,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
              length: 2,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#095D58",
              },
            },
            nameTextStyle: {
              color: "#095D58",
              fontSize: 12,
            },
            // axisLabel: {
            //   show: true,
            //   textStyle: {
            //     color: "#6F6D6D",
            //     fontSize: 10,
            //   },
            // },
          },
        ],
        series: [
          {
            type: "bar",
            // showBackground: true,
            showBackground: true,
            backgroundStyle: { color: "#001b3f" },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#08E8A4", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(2,177,255,0.00)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: [120, 200, 150, 80, 70, 110, 130],
            barWidth: 12,
            padding: 6,
            z: 1,
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#2f424a",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 3,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [12, 1],
            symbolPosition: "start",
            symbolBoundingData: 200,
            symbolOffset: [-3, 0],
            data: [120, 200, 150, 80, 70, 110, 130],
            z: 2,
            animationEasing: "elasticOut",
          },
           {
            name: "",
            type: "line",
            // barWidth: 19,
            symbol: "rect",
            symbolSize: [7, 1],
            symbolOffset: [-3, "-100%"],
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 2,
              borderColor: "#fff",
              padding: 0,
            },
            hoverAnimation: false,
            legendHoverLink: false,
            z: 10,
            data: [120, 200, 150, 80, 70, 110, 130],
          },
          //外框
          {
            name: "",
            type: "bar",
            barGap: "-140%", // 设置外框粗细
            data: [200, 200, 200, 200, 200, 200, 200],
            barWidth: 22,
            itemStyle: {
              normal: {
                color: "transparent", // 填充色
                barBorderColor: "rgba(9,200,137,.3)", // 边框色
                barBorderWidth: 1, // 边框宽度
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: "top", // insideTop 或者横向的 insideLeft
                },
              },
            },
            z: 0,
          },
         
        ],
      }