echarts象形柱状图

option中代码

  let option = {
        backgroundColor: "#031d33",
        animation: true,
        tooltip: {
          trigger: "item",
          backgroundColor: "transparent", // 修改背景颜色
          borderColor: "transparent", // 修改边框颜色
          formatter: function (params) {
            //使用formatter函数修改需要的样式
            let res = "";
            res +=
              `<div style="background:url(${require("../../assets/image/tooltipbg.png")}) no-repeat 100% 100%; width:111px;height:65px;">` +
              '<div style="color:#fff;padding:10% 1%;font-size:14px">' +
              '<span style="border:4px solid #fff;border-color:transparent transparent transparent #66FFFF">' +
              "</span>" +
              "<span>" +
              params.name +
              "</span>" +
              "</div>" +
              "<div >" +
              '<span style="color:#fff;font-family:SourceHanSansCN-Bold;font-size:20px;letter-spacing:1.25px;font-weight:700;padding-left:10%">' +
              params.value +
              "</span>" +
              "</div>" +
              "</div>";
            return res;
          },
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "10%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          data: [
            "高端装备制",
            "新一代信息",
            "新能源汽车",
            "新材料产业",
            "数字创意产业",
          ],
          // 去掉刻度线
          axisTick: {
            show: false,
          },
          // x轴 轴线颜色
          axisLine: {
            lineStyle: {
              color: "rgba(56, 80, 148, .3)",
            },
          },
          axisLabel: {
            // 间隔N个显示
            interval: 0,
            // 倾斜度
            rotate: -40,
            formatter: function (value) {
              if (value.length > 4) {
                return `${value.slice(0, 4)}...`;
              }
              return value;
            },
          },
        },
        yAxis: [
          {
            type: "value",
            gridIndex: 0,
            min: 0,
            max: 100,
            interval: 25,
            axisTick: {
              show: false,
            },
            splitLine: {
              //网格线
              lineStyle: {
                // type: "solid", //设置网格线类型 dotted：虚线   solid:实线
                width: 0.7,
                color: "rgba(177, 253, 255, 0.1)",
              },
            },
          },
        ],
        textStyle: {
          color: "rgba(177, 253, 255, 0.59)",
        },
        series: [
          {
            // name: "",
            type: "bar",
            // showBackground: true,
            barWidth: 16,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(200, 202, 67, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 207, 242, 1)",
                  },
                ]),
              },
            },
            data: ["20", "10", "50", "80", "60"],
            z: 10,
            zlevel: 0,
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#0F375F",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 1,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [18, 6],
            symbolPosition: "start",
            symbolOffset: [1, 1],
            data: ["20", "10", "50", "80", "60"],
            width: 2,
            z: 0,
            zlevel: 1,
          },
          {
            name: "外框",
            type: "bar",
            barGap: "-110%", // 设置外框粗细
            data: ["20", "10", "50", "80", "60"],
            barWidth: 16,
            itemStyle: {
              normal: {
                color: "transparent", // 填充色
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: "top", // insideTop 或者横向的 insideLeft
                },
              },
            },
            z: 0,
          },
          {
            name: "背影",
            type: "line",
            smooth: true, //平滑曲线显示
            showAllSymbol: false, //显示所有图形。
            symbolSize: 0,
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              color: "rgba(0, 151, 251, 0.1)",
            },
            data: ["20", "10", "50", "80", "60"],
            z: 5,
          },
        ],
        dataZoom: [
          {
            type: "slider",
            show: false,
            xAxisIndex: [0],
            endValue: 4,
            startValue: 0,
          },
        ],
      };

效果图

另外看到一篇文章也不错，试过效果-- 象形柱状图 

代码如下  具体可参考文章

var category = ['服务器数（台）', '计算容量（核）', '内存容量（GB）', '存储容量（PB）'];
// var barData = [0, ~~(Math.random() * 100), ~~(Math.random() * 100), ~~(Math.random() * 100), ~~(Math.random() * 100)];
var barData = [60, 30, 52, 34, 90];
var lineData = [63, 63, 63, 63, 100]

// console.log(barData)
var option = {
    backgroundColor: '#0d073d',//背景色
    grid: [{//图形的位置
        left: '10',
        bottom: '20',
        top: 3,
        right: 30
    }],
    xAxis: {
        show: false//是否展示X轴
    },
    yAxis: {
        data: category,
        show: true,
        axisLabel: {
            inside: true,
            verticalAlign: 'middle',
            lineHeight: 150,
            color: '#4488bc',
            fontSize: 8
        },
        axisLine: {
            show: false//不展示刻度
        }
    },
    series: [{ // 外边框
            name: '',
            type: 'pictorialBar',//echarts图的类型
            symbol: 'reat',//内部类型（方块，圆，svg，base64图片）
            barWidth: '3%',
            barMaxWidth: '10%',
            symbolOffset: [70, 0],//柱子的位置
            symbolSize: [130, 20],//size,单个symbol的大小
            itemStyle: {
                normal: {
                    color: '#3f559c'
                }
            },
            z: -180,//图层值
            symbolRepeat: null,//是否重复symbol
            data: [1, 1, 1, 1],
            barGap: 50,//柱子的“粗细”
            barCategoryGap: 0,
            animationEasing: 'elasticOut',

        },
        { // 内边框
            name: '',
            type: 'pictorialBar',
            symbol: 'reat',
            barWidth: '3%',
            barMaxWidth: '20%',
            symbolOffset: [72, 0],
            symbolSize: [125, 18],
            itemStyle: {
                normal: {

                    color: '#0d073d'
                }
            },
            z: -20,
            symbolRepeat: null,
            data: [1, 1, 1, 1],
            barGap: 45,
            barCategoryGap: 0,
            animationEasing: 'elasticOut',

        },

        { // 下层块
            name: '',
            type: 'pictorialBar',
            symbol: 'roundRect',
            barWidth: '3%',
            barMaxWidth: '20%',
            symbolOffset: [75, 0],
            itemStyle: {
                normal: {

                    color: '#1F4683'
                }
            },
            z: -11,
            symbolRepeat: true,
            symbolSize: [6, 16],
            data: lineData,
            barGap: 50,
            barCategoryGap: 0,
            animationEasing: 'elasticOut',

        },

        { // 上层块
            name: '', // blue bar
            type: 'pictorialBar',
            symbol: 'roundRect',
            barWidth: '3%',
            barMaxWidth: 100,
            symbolOffset: [75, 0],
            itemStyle: {
                normal: {
                    barMaxWidth: '20%',
                    barBorderRadius: 100,
                    color: '#6DE8FA',

                }
            },
            symbolRepeat: true,
            symbolSize: [6, 16],
            // symbolClip: true,
            data: barData,
        },
        /* 
         */

    ],

}