象形柱图的官方解释
象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示，它利用图片和形状表现数据，具体来说它既可以用图形的长宽变形表现数据，也可以用图形的个数、甚至是图形的颜色、透明度变化表现数据。
代码实现
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,//是否重复symboldata: [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 bartype: '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,},/* */],}
实现的效果：
这里是引用：/p/0632b3e773d9
