Echarts在线免费图表

 
            option = {
   backgroundColor: "#031a40",
        color: ["rgba(215,73,134,1)", "rgba(6,176,251,1)"],
        grid: {
          top: "1%",
          left: "3%",
          right: "3%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          //   axisPointer: {
          //     // 坐标轴指示器，坐标轴触发有效
          //     type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          //   },
          textStyle: {
            fontSize: 14,
          },
          backgroundColor: "rgba(255,255,255,1)",
          extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
          formatter: (params) => {
            return `${params[0].name} : <br> 沉降：${params[0].value} 件 <br> 隆起：${params[3].value} 件 `;
          },
        },
        // 添加图例配置
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          icon: "rectangle",
          // 图例的位置，可选值有'top', 'left', 'right', 'bottom'
          orient: "horizontal", // 设置图例水平布局
          right: "10%", // 水平居中
          top: "10%", // 置于顶部
          //   icon: "rect",
          // 图例的数据数组，每个元素与series中的name对应以显示到图例上
          data: ["问题数", "整改数"],
          // 图例的样式设置
          textStyle: {
            color: "#A1BADF",
            fontSize: 12,
          },
        },

        grid: {
          show: false,
          left: "2%",
          right: "2%",
          bottom: "3%",
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["桥梁", "隧道", "路基", "深路堑边坡", "即有线"],
          splitLine: {
            show: false,
          },
          axisLabel: {
            // rotate: -20,
            color: "#fff",
            fontSize: 12,
            interval: "auto", // x轴间距
            margin: 20,
            // rotate:40
          },

          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(152, 212, 255, .1)",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "(件)",
            nameGap: "15",
            nameTextStyle: {
              color: "#A1BADF",
              fontWeight: 400,
              fontSize: 14,

              // 其他样式设置...
              padding: [0, 20, 0, 0], //间距分别是 上 右 下 左
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#A1BADF",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(152, 212, 255, .1)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(152, 212, 255, .1)",
              },
            },
          },
        ],
        series: [
          {
            data: [50, 30, 10, 30, 60],
            type: "bar", // 柱图
            barMaxWidth: "auto",
            barWidth: 20,
            color: "rgba(215,73,134,1)",
          },
          //   {
          //     name: "问题数", // 添加name属性
          //     data: [1, 1, 1, 1, 1],
          //     type: "pictorialBar", // 底部
          //     barMaxWidth: "20",
          //     symbolOffset: [-12, "50%"],
          //     color: "rgb(116, 170, 249)", // Specify the color using rgb format
          //     symbolSize: [20, 15],
          //   },
          {
            name: "问题数", // 添加name属性
            data: [50, 30, 10, 30, 60],
            type: "pictorialBar", // 顶部
            barMaxWidth: "20",
            symbolPosition: "end",
            symbolOffset: [-12, "-50%"],
            symbolSize: [20, 6],
            color: "rgba(251,144,194,1)", // Specify the color using rgb format
            zlevel: 2,
            // z: 5,
          },

          {
            data: [40, 10, 20, 50, 20],
            type: "bar", // 柱图
            barMaxWidth: "auto",
            barWidth: 20,
            color: "rgba(6,176,251,1)", // Specify the color using rgb format
          },
          //   {
          //     name: "整改数", // 添加name属性
          //     data: [1, 1, 1, 1, 1],
          //     type: "pictorialBar", // 底部
          //     color: "rgb(66,185,131)", // Specify the color using rgb format
          //     barMaxWidth: "20",
          //     symbolOffset: [12, "50%"],
          //     symbolSize: [20, 15],
          //   },
          {
            name: "整改数", // 添加name属性
            data: [40, 10, 20, 50, 20],
            type: "pictorialBar", // 顶部
            color: "rgba(185,232,255,1)", // Specify the color using rgb format
            barMaxWidth: "20",
            symbolPosition: "end",
            symbolOffset: [12, "-50%"],
            symbolSize: [20, 6],
            zlevel: 2,
          },
        ],
};