在echarts社区我保存了这个图的源码
http://gallery.echartsjs.com/editor.html?c=xBJhOw_sdX
象形图echarts官方解释为
象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。
在网上有一种我认为更加贴切的名字异型组柱状图,这个图形的配置信息与柱状图的配置信息十分相似,只是将柱状图的‘柱子’进行了改变。
image.png
此图的配置信息,以及一些配置备注在下方的代码块中,因为任务比较急,没有修正成“响应式”(8.25留坑)
我需要展示4组数据,数组中却出现5组数据,为了通过lineData 数组中前四组数据与第五组数据的比例控制出现“柱子”的长度。
为了画柱状图的外框,又使用了两个固定长度异型柱子进行构建
而内部底层是一个固定长度的重复图形的“柱子”,顶层是一个可变长度的“柱子”
symbol:为异型柱状图的“柱子”,可以是一个symbol,也可以是重复的symbol来构成“柱子”
var category = ['服务器数(台)', '计算容量(核)', '内存容量(GB)', '存储容量(PB)'];
// var barData = [0, ~~(Math.random() * 100), ~~(Math.random() * 100), ~~(Math.random() * 100), ~~(Math.random() * 100)];
var barData = [60,