在echarts社區(qū)我保存了這個(gè)圖的源碼
http://gallery.echartsjs.com/editor.html?c=xBJhOw_sdX
象形圖echarts官方解釋為
象形柱圖是可以設(shè)置各種具象圖形元素（如圖片、SVG PathData 等）的柱狀圖。往往用在信息圖中。用于有至少一個(gè)類(lèi)目軸或時(shí)間軸的直角坐標(biāo)系上。
在網(wǎng)上有一種我認(rèn)為更加貼切的名字異型組柱狀圖，這個(gè)圖形的配置信息與柱狀圖的配置信息十分相似，只是將柱狀圖的‘柱子’進(jìn)行了改變。

image.png

此圖的配置信息，以及一些配置備注在下方的代碼塊中，因?yàn)槿蝿?wù)比較急，沒(méi)有修正成“響應(yīng)式”（8.25留坑）
我需要展示4組數(shù)據(jù)，數(shù)組中卻出現(xiàn)5組數(shù)據(jù)，為了通過(guò)lineData 數(shù)組中前四組數(shù)據(jù)與第五組數(shù)據(jù)的比例控制出現(xiàn)“柱子”的長(zhǎng)度。
為了畫(huà)柱狀圖的外框，又使用了兩個(gè)固定長(zhǎng)度異型柱子進(jìn)行構(gòu)建
而內(nèi)部底層是一個(gè)固定長(zhǎng)度的重復(fù)圖形的“柱子”，頂層是一個(gè)可變長(zhǎng)度的“柱子”
symbol：為異型柱狀圖的“柱子”,可以是一個(gè)symbol，也可以是重復(fù)的symbol來(lái)構(gòu)成“柱子”

var category = ['服務(wù)器數(shù)（臺(tái)）', '計(jì)算容量（核）', '內(nèi)存容量（GB）', '存儲(chǔ)容量（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圖的類(lèi)型
            symbol: 'reat',//內(nèi)部類(lèi)型（方塊，圓，svg，base64圖片）
            barWidth: '3%',
            barMaxWidth: '10%',
            symbolOffset: [70, 0],//柱子的位置
            symbolSize: [130, 20],//size,單個(gè)symbol的大小
            itemStyle: {
                normal: {
                    color: '#3f559c'
                }
            },
            z: -180,//圖層值
            symbolRepeat: null,//是否重復(fù)symbol
            data: [1, 1, 1, 1],
            barGap: 50,//柱子的“粗細(xì)”
            barCategoryGap: 0,
            animationEasing: 'elasticOut',

        },
        { // 內(nèi)邊框
            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,
        },
        /* 
         */

    ],

}