Echarts在线免费图表

 
            //柱状图顶部波纹图片
const myIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAFCAYAAABbyvyAAAAABHNCSVQICAgIfAhkiAAAAO1JREFUKFO9kTFOAzEQRf/YYAVttEhJQWokJLo9QS5BSYHEHWjotqPJHSJRUFDkPKRJRbPFroREROTEHr4pIpNsnZFGsme+Pf/ZgiyeXrU4s3BG4EQxCIBNbRVccPG3zoP9QN1PqrEZqNtEhd8F+NmDrHOt1HMdbB2uKLqMBhMNGMFgLMCQWSpQcdS1CIpUyw/z0oa1T4UsWV/FgI761lh0VvFNE1/nHk39KBt5ftNbil0QTNm4+ecCeicGxSFJ3z5CFojYU9D4exrGwf7lXj6OiEwishjSbaIqmVVMRErCg6F9RHzCNvYRneqPfgEA53cGSAZ1RgAAAABJRU5ErkJggg==';
//x坐标轴的图片装饰（本地图片请使用require('本地路径')）
const barIcons = {
   one: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAABACAYAAACZUm7XAAAABHNCSVQICAgIfAhkiAAABENJREFUaEPtWE1y0zAUfmobtsAJaGfYU05A2HUaM7R7ZggnoF2xJJwAegLKCShD07IjXbKiPQHpCShb6kR8T7IdSf6R7CRDFn4zrh1Xlj5971+CFimyd04kdogmuyTO8TyfiPk+d75uwTWls2WuZc7PQOutfo6KR7TMtcx5GWiDsJeikgEtcy1zfgbaIOznqE1fbYPT0EpWKgjLnU2izgO9FdnF9QJ960P0rW+INn4Q3V6T+DZuuFWqH0rk7jYAvMSCACPwbIrED54yvSvQl/gzwv0TiTN+DpZwcDICGHqrQTUWgKR3JE757hU/OMXU2vsKUBfJKumC9/A7ZfRJCQKMjV/5VF4NTj7bgzo+YgFeMBH5Bw8nAHxC4ivuFSL38N0ETE8xD+ESd43RN/gNgOVzlIOT0WtM9MFeGnZDk4Fvx4VwlfOsDxJ7NYccQM1HRd8Ug5MRg2JwKVvXYHCvrkEXg1QOBcZF4uVq1BEAHrjj8+Dkbh8qY1WmcoWw0MV8UMOCRKk7HmG2R7MZp1Dx2bG5gg1OG/9Pg7EvJIZsL8sR2WMGnxsAH5vamYHTu/mFganxL54xd4s5BuUYQR0AtZYMcNEAvzmOQdgjJ9uNDL8ux9pREJwzT+Y4yFgScDnW8vqvu2at8badg7WNLWZPMyct1pAPh9hNieTssg6MqWVT1peyB5VmHqzYS8D1YGsiAST2K4OrTmPf60Ayxj4tTV064H9OzGoMgrYEWUzA1sTQyAYFEJYFTmmwx1kjySIxg+sh+AnOnfxfVA7DfiUrywVnhBZ5CHDRCGCSBB3gCEsFZyWACwccldtESqcNjiuSQTHTU9iwlWl4WPX8ztysVsMZYriwp3K1JuBCUgLcekFq48o4B9wDzsxQ8pKZ47JVizgNqO+W5K0zzWR45gWHFEdONSHhUKqML5IQszHBmcGviVrXHHBTBlfm8TXUSlfzOkRl1Cn4Z12HWOlQstJB2Cowb+Cx9/9fhoh+Y+0kfXL6YrEqgpVI/KoyKiqZVEVQyl6+OAx0Ck8BayUD1XinJROX6LfjWUUQkGMDIQUNs4pN3kRnc1ZsKtWaBSchHcUoDJsfwgSBUutymb7BTVVaqjlluhrkssd5s4O4tMCW0EWs10Thmh4ISfTHHfQuboOjALqtIY4dxOl+MAt1B8qIK9+k9WR1olgwTqICmuolMJhjjHfla6rTneePI+AsEr1FvfO1QiL1+R4YE7C1TAKPIzKAZubIXh6jn4XBNnAUHYLQF7tFgTxE6OKzmZwEHIFNAcg9upKo9fm6c1HpMEp9f9ECCNgVX+5RGt5VHCQGFJfK1QEw7TNyGxzpN2ybAiFIAlB2HNstVC0Ryvu479OAH9zMDnmhQQXIEhzWa91zLOzY1V1Sh5s+XjNY4wirFBtXyzCBKcJSPYcKZ65obR3dcSm1shdCpZIbY6iYJUaebuA8yVr/AKbKTpW9pByXAAAAAElFTkSuQmCC',
   two: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAvCAYAAAD0FnqqAAAABHNCSVQICAgIfAhkiAAAA7xJREFUWEftV01O21AQnnkliCRIzQ1KQOqW9AQNEkHdAScglaqqO9ITNJygYd1Fg9R9w64CVMIJcA4AgRM0SAQQAU9nnu3EeXl2HFqxileJPZ5v5puf9xnhiVf3vPQNAD8AuB+zi0f8e7ILJzMfWE+BJ2VuSnVixqbNlZgq33DaXIkZmzZXYqqmzZWEKmoXc3eQWnaBcgrUpwei1wrhhwL4PQe9FuabnSR+xGbsHAvYLaS2iKDM5oV4x+QgQj0Nvb1xQUQCC+ANzG4TUQUBc0kzETsC6iBiLZs/2Il6zwp823634NLjT1uG7PSEA+mwd0c7RSjwvRzfezsKQo7CF5vp/K8L89kI8HW7VGCnx8NZ0iUhVLPQa0RRKAx1IbWBBFWO5lUAJNlzcCvz+UMvUNs42UCR3M+ZpaPaJFTfnK1WCNXXOPB+xrqmNHvKxgu6TkRXoKBoRpo0AJ2EC02u9Uv/nYsM3r8JGOsDX5+XmkGd/hU0CG4EnKCRXTrY7I/TbXu16JI6Dl5Q6K6k80fNqOw8dlIOAeimmV88LEbZdttrG9wz3KjeFfjWGYez5b972cWDss1RaMSKzM4V2210z9e4f6iOCpxM/nDX9h7b1Pn+li4hUJMDXUFvdNz2ICKVN9ufX2zw83WJNsyMCRI8NxvShoFGB+5LFqZDnZVPk+sqK60Irl6X0s0y6yb9QfBiI4Fh+AYhvecuFlqGrgBYzyT4i8PCKdOvg7IBc6OVkfC7/9o+husb1VQBsK1+1l6wZBxuYL39wk6ZZusK/R/A/p744zPSeTZgAQwn8GzAQxnzVkxU4+uzkhxzDe6aC25AmWHLSTSotq25bDXWM+qNgr2r/ZErs8kyg4t9i0+cL1HNlqirx81xECnv710+NBxvJMhhRXLCLGwn7eqROR63uZjmWgAgjHgLgMEJdqKyNjO2bi5xFLeru2dr1QDgqcDGrtZbTc+teTox0CbrJaklyNHGGZ4OU8019jaYXvyWq3/QxJ5O/owNmsyQKxLYI2HVl0MOH+iVO5iJVJxz8ODIgW9RNP2zwFAgKc7C00tRWinp2hwFpcsM9gojCiSg1ZArgEiVqHM2KogRzWWRUXaVOayVxD8vDlGZ9/vxKnN23VOZnm7TzEVotxhd7UrNl82sREFws3VkpvUzl3U1al1dtDDQ4n4o2oKN/YSRUWKgSkgpJiqxZMmB1FjYSfbWK9m3kztTZmVRtjFgeG2xuqin1UP9yd9OtjC9r8WZggsqJxRrG6ZcsewJRigRJWz0F/Mo1zxfGaReAAAAAElFTkSuQmCC',
   three: 'data:image/png;base64,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',
   four: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAA6CAYAAAAz60BwAAAABHNCSVQICAgIfAhkiAAABTRJREFUaEPtWL1uG0cQ3jnKQcQECNMFIQFLpagidF5A1AskVBlYhCkgSGvpCSz3AUzXLkyCclKKBtKbegLLBalSMkAG6UICFBVEp5vM7P1w77h3tyZFpOE1+rnb2W+/+ftmQdzjU2j1XgkQPwsBv/T3t14tahoWNaCuX4Gbl80VcyvmDBhYZasBSdpPVsytmEtjYFWE0xiKe79ibsWcAQMLFeFvfr/YWEPx0EEnZwmrhA7+ACC+Fwi/ioz4wwbx8a+ftq4McNxPhyj8drFDICpkrUIn2whZRfqL/un9kK9Q4Dn9syMAm4PH2/S7+WPMXKF1UUZwXoCAUqx5DTj1WwYKaB31q1sdE4ip4PJvuiVAeEHGylqDKM6IlSFRpLAC7rcgdmJAdBDwKI3JRHDftnoVS+BrAZBTNhkhigaR1PmzWmynMcA2KA45BDgUvgq+Rxw6Ag6SbMSCo4L6lE5eD7tFNK9v1w+HB5vDNFDR97nXl7kvHtzUacMnkTg97FeLL3X2tODyrV6dTvvUX4CIH4QlamluMAHMYSIc0QCA76b2xctBtXgYXT8DLv/mogZIrgxWirOxvV6Zh604sMzil2s3bTUmEeBg8Hiroa4JgfOC//0Ul2gO9os1E0bm+SZ/0muobqYkeaR6JwDnnmZy6Qc/u/LazpbvkzFtHK5NOoGLKUnGdnbT3zMAV2h1jwnYM8/AaHy7vrFMYD5QScqDm6sgkxGf96vbx24lomeGNY3/53Gb6ZpQnCvsSXBqdrI7B9Xt+C5A33NPzdzhu5n2FYOGauLVXQZ2k/osxd8V2XsoTXjsueBOepf+Rg6KvbTiyochzivUOYyShQK9QR2krSsX/nlkwQdxKrHRYSgRNyGSoaP+flHtBlouqEB3+AUVz7I0ak1rlrrAcfADH1T9PsnVhZMeF3fZRThzgVg7JNa4dzJio9KhbkYGud3HPnRYMAWnlhYyeuQu9Bq0rhDqdl0aOLUBkKAIgSMud03kzLLAsSwjhfPOTQoCpyaDnYFNE+WqgpNhgaiNU/LEkAK7buxWV57JDiW1nxozHB9J8eO/M91snu9VPAuDUzMsOBiFh5dxDWJu41MOEwKXb3XP/d42j1vlkGOHZwk/bvkdh4kpOLWscTNYOCHUOmdbounHrNsS/ykxUFNwMwmxaClRmVdLkWTBgToXalNw4R7rZmtQhClH3vb3t1nrJz6mm31qQhROujSTwI9eQzgCGTN3eOnWFhySXPn6fwPX6v7t60mOf7/xB4rApPGz9iMXPqFEaqQdxD0zsvRv+jpNt0Z1KbWuj5zlEpwqNH1FkLSpKxAnBEzOp9NxT79oRPA649tsLUm8qs0gJJmiatS0x5qwZvJNZKgKVLheplPs2WvWI5NWZrJ50jdunXTeB4N7VKbzYm/oPffVKPe269vs7jLnCHfPCSlq9/6FY42G9tLMgMMvvQrdCeKI1CvVqb1F2YlbTyXplBW1935EArOsHQ19A9GhehkMRhmTrKUN1T7AyJgoNT3prL17u45AOA0NR0qcqSzHSqSZawkZE9i4y1jP50kUd2JznlF81VQASZUhUb95jZivuUK1jEEiiPbk3+xZUsKw+7KfTXYA+QpsZlIbkS8rSco7VVy6qU6jXcJFoJdpLL2G1A1yZNSfe7lIax58a2eswzQPpIKbxiHpe4F0ZRF7W5me1HwLKuDYZE5hY8bgptnMUkhUKEnoxlI/r4ZiikWjEG20aKhe1oW1jhZfULqlAGk4wRwPNTSkyPvhsf35+SJF/D/Z7HUxqIa/ygAAAABJRU5ErkJggg==',
   five: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAuCAYAAACiR6CHAAAABHNCSVQICAgIfAhkiAAABJxJREFUWEftWEty20YQnQYoyjsxJwi1icWV5ROEOoHoE8TLhE6V6KVLYpkqSpWlqaqIyS7KCUyfwMwJTK0oZyPpBIF2kk2g83qAoQYgABKkncpC3NgC5vPm9es33SC14u/FxRHLEqdbB7TiUmrlBR7AZIXggZkHZoqm54Nm/peaaf59vK1Y7RJzPQKo/4UNX8FBr/T/iYaw03f97/ZHRcK+kAO3LjuVT5/W9hTzc0yoxjfQtwF+s0sJQEV0Vi5/Pultdrx5wOaCaX48fk0ctLBZZd5i2e/ZY3J6/cf7h3lrZILRbNyV3mPAtr0ATntDrAaBwwM3UN5Ela5+r726+nH8S7WkJlXfURUnoAaTamDuRmLuqLw+2cliKRWM6IKC4H2MDVbXAND67XF7sChDzfExwsodRPBbM0eHzqFnaXqaAZMKRKmXKBF6i4JIjoMXIczqzf1zhM1xdpKAYmAkNJ/v3EvDiITEYW78WmsPlwVi5v087tYDosF96NhbW/c37ZBNwSQ1IkBAZ71oeuaB1rYQ8NAAwh6j/tbBUzNnCqY57naI6PU0tg49/ZJAbIbgQ9Bj+GPmw36t3ZmaQzI8eLGSRuaFNK6h+3BpZmKsIGtOawfVeQvmvf/pYxdpTbuwZbGFa4SiMSPq8REMMcwyw44G8+Ki+48RbUD8rEj6poEKM5I/RO9SWRbADtPbKFje6Vb7G4pN/AKs6MONj85YcRUa/N5nd1NMMQ00xt2zA41S86LbA6V7oZrUnwjR81VCJEBkvqwjp89jWY8l9YMJFUEvQzmBPMgKkQDGhbcRBO5h1inDy7T0hgJFix7IDhV081cMDMqCnSyD09ZOQQsX3tvkLWw8Ckp8F6jSmUv+H4Zd2cSkbpJxMUKT5hqMLd5FusIkKNlALlQUMSf92v6ZvUFEv4Cpp4U+tJQSkkeP9AAmbE91nDNaVJl0Nyk/mZ52QteOmoAp1WBFGwAC49rXWikCRsbb+y8EpnlxJHfKrnU6na4CUp7Z90sRMDYzujSxBZylGXuMUb7oIHJSA3IEgC+LgJnRzELZZGVcAsw0xPJcDqPfx++eTM3MZpPlMzCqk/5WW2qP2C+HmZXAxHwGe1OMKlRhuEc2/ysw0OKlKfBZHFg2xkPP1BhpuvkazCRIuAEJlfCitG05UfBosF9BMyDgw7TYj64hDSZyUGnCTDUfu2nt+sMuRWMpj0t27dFk+/Z2veIqX5q4WHlghz65HjqGqthDRqWXXjAntbTM38mCf6bSM+ygGB8iQSOnnS2Yl9ncnjNbUfI5ivK6Mc1YdyCNmEP+yK7g01qKZUDNMALHDdjdtquAjL5pWqWJhXnQSQf+c7IMiDBbu3vYqGM3hZLKuX2T2SzZUkTPh0j7wyI9VJS+0nHUzdp5LVBmry0hc2mCVtZoKFwu+vQxCFxnAHA39umiElayqI5x0mtX42zyuc+lRlaBlglmmvK3bgtVXivZxBcJmWaDuVd+5PfyPo3kgjEbapaU30n7spAHynyx8JXbyWLDnr8QGHuC7okYGkBPhOIK9YwdRj5nVh4MbwTgw6ItT2EwRcJTdOy/Q1lLKNB9YnoAAAAASUVORK5CYII=',
   six: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA2CAYAAACBWxqaAAAABHNCSVQICAgIfAhkiAAABcNJREFUaEPtWk1S20gY7ZaDk9hUhTlBnBOMOcGYqkDNLs5mcFYxJxhygjgnwJwgZhWYDZ7dFE4V4gRxToDnBIEq7GRIrJ73tdSi1ZasliwHFqjKC0vq7u91v+9fnC3pOtoaC5p6+6TKl7SEnHZpk98DsDy2+xNI2qh7Cv1sCn34/WutNGVPBZ/WYBvwYx1fBtHF/wtpMYTjMja9/GOwOrSUL/W1hXTgr82ruuD8BROsCXtWj6wmpBWF1DFLCHEhGO9jXP/hj8rZS9cHmOfKBeBo6+o1BOhgMO10AZfolq+r7/IAyQTgw/OvDc6nbznnjViphTjDjo/wjH50DYXHa9wRa/KfEA0Ar+FQns6Mx6lgLIBU9rMAsQJw3BBr/61M9rBw26DJJRbt414fC7u2CwfUa4JkTQjwqzHnBe5t2OpJKgAS/nplchrhuBAkOO1W11boJJ75p+r1zFPhQuwARC+Nn3MByJ1iDMJznwL+deA5TufVP48VTdLWsHqOtdpYq4u1ntwMEN3tk9U38yZIBEA74/DpsS687a5YSRzzkqRqeeLqtIIx67UG1Z2kOWMBzOw8KIMXG7a8zAuAxknKlifwHey1Ns87RLWduHlnAMxwHsJ7pVK9aMqkgUQoQvwPQSSd/gyAw82r09BM/sSdjwN0uDXuQ8AX8hnMbJx1igCQisT5ezXZsjmfdgqmTkDJR62T6jN9XAjAp874XFPaRN6lLVzkc4qxnOl0qKyTuakhAHCOlOStf1rsX2h+rUhBFpkrIhtO4eF1ZV35HwnA3P3bpo4JNogEhpqzC9khARw+n+wiXtm7i7uvwOj6qeuCD0DT9ru2+/ppHG1eUcAnPTXkXCe/xAPH8UW9iDDhWR6bH1iMTxlC7MxGQvcNiHLftD5Wuhw3m6QGkj6MfYaZiiYmltpHAL49+JY6FuF4E37mT1iKs+3BasNyevlaxMwH4wlAaH3wTqZdkSbO83SXnybPZ89zLhzHO80DwGQLFc04eOWCV7/Ryph849XHx26aFOp5xFPaDMKueaLUyQuAltD1AOH8LwsB0MHbyE+7XgCAyIYDwPiTSlaUZlsJ4++GnEwIsQ9eh4k5/q9BmdvR2J6UbBkAgiIsCZ21ECsBMP5ke1BdN0HH0qsIAFqUSpaIlDiof+QEQPojkLwzJOXaFZv4FwAA0XJXWjE6UAJwuDkeKRed1QfcER3Ib4UIAJVJ5gV+EZAFnIBpNRe3QlQW4WyXi9LI1ANPeGvMYd3QO+sAUByAzrVtDYZmus/VfMQYUCjKKXLPtpMuQqGsPodkinVkUffMhnEWJQlQHgDYvV3MV7ep+ZjrxoU9M8EceTfbYlVmABlDlRgAPdxToYsMe2Q4rQuSJZzOAoACRWRSDdvNiTt1rPdFpbxhOE0vRhMa4bYGqxs2ehBfTTNG+gVfd9EyZCSh0VJeeQJBVHmuLf0Sx0NF2ztzwbOH1gdCRVNKSSM9qY8pX9wmEp0hiKcuy9+rtUhSH5qolfFIBWAq47lNwTW5wnKPKVeksGUkN5nzg2WA1aPluHLPbGlxazwMq8Mo56Euup4nRy4CDOK093pTJc75JRR3b6hEkWb5e2VjEfOXB0yE95jAurhLiwXldUpW/GYDQHAmOyaFtUfngTJ3Hu8mxk2JDQ6z0EvVYQDaWaZ59Stw4+NILpFSvZjbYpKxhxA9IzXsZO0k2lDI7wh5e0a/+QBr7c6jb2qTj+jkoSkdacLJRrXTaQ0q+zbCzXtnTuvWqsSTCkDZYrN35asGG0E3+lywgyz64Xv+KUo5nIpq9Lu5/A5o25aqVgDU7KQXOI1OUqOaPh/AsxG9738X4V8eE3XOVbM75rOEG/FTKWOeZiYAarA0cdzrzJRN8vMpd+s2FwAlZ5BgNOEh0ayO+XxgDiDQ72/mcVc84P1FHOVCAHT5SNnxn75eqcn7+C5CPYewaE74hS94U/fRj0fDohzj/xC9uZRKi87hAAAAAElFTkSuQmCC',
};
let valueList = [30, 10, 20, 42, 30, 20],
   barData = [
      { value: 30, type: "分类一" },
      { value: 10, type: "分类二" },
      { value: 20, type: "分类三" },
      { value: 42, type: "分类四" },
      { value: 30, type: "分类五" },
      { value: 20, type: "分类六" },
   ];

let barMax = Math.max.apply(null, valueList);//获取柱状图数据中的最大值
let maxData = [];//用于背景装饰，数据均取最大值，symbol存放波纹图
for (let i in barData) {
   maxData.push({
      value: Math.ceil(barMax / 5) * 5,
      symbol: "image://" + myIcon + "",
   });
}
option = {
   backgroundColor: '#1e62ac',
   grid: {
      top: "20%",
      left: "10%",
      bottom: "30%",
      right: "10%",
   },
   tooltip: {
      trigger: "item",
      axisPointer: {
         type: "shadow",
      },
   },
   animation: true,
   xAxis: [
      {
         type: "category",
         data: ["分类一", "分类二", "分类三", "分类四", "分类五", "分类六"],
         axisTick: {
            show: false,
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "#01c5fc",
            },
         },
         axisLabel: {
            formatter: function (value, params) {
               return `{a|${value}}\n{${"img" + params}|}`;
            },
            textStyle: {
               color: "#fff",
               fontSize: 12,
            },
            rich: {
               a: {
                  color: "#fff",
                  fontSize: 12,
                  interval: 0,
               },
               img0: {
                  width: 39,
                  height: 64,
                  backgroundColor: {
                     image: barIcons.one,
                  },
               },
               img1: {
                  width: 30,
                  height: 47,
                  backgroundColor: {
                     image: barIcons.two,
                  },
               },
               img2: {
                  width: 49,
                  height: 70,
                  backgroundColor: {
                     image: barIcons.three,
                  },
               },
               img3: {
                  width: 39,
                  height: 58,
                  backgroundColor: {
                     image: barIcons.four,
                  },
               },
               img4: {
                  width: 35,
                  height: 46,
                  backgroundColor: {
                     image: barIcons.five,
                  },
               },
               img5: {
                  width: 48,
                  height: 54,
                  backgroundColor: {
                     image: barIcons.six,
                  },
               },
            },
         },
      },
   ],
   yAxis: [
      {
         show: false,
         type: "value",
      },
   ],
   series: [
      //背景装饰柱
      {
         type: "pictorialBar",
         // silent: true,
         symbolSize: [30, 6],
         symbolOffset: [0, -3],
         symbolPosition: "end",
         z: 12,
         color: "#3eb7f6",
         data: maxData,
         tooltip: {
            show: false,
         },
      },
      {
         name: "背景圆柱",
         type: "bar",
         barWidth: "30",
         // barGap: "10%",
         // barCateGoryGap: "1%",
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: "#0f519a",
                  },
                  {
                     offset: 0.79,
                     color: "#1a78c9",
                  },
                  {
                     offset: 0.99,
                     color: "#1e63ae",
                  },
                  {
                     offset: 1,
                     color: "#1e62ac",
                  },
               ]),
               opacity: 0.8,
            },
         },
         tooltip: {
            show: false,
         },
         data: maxData,
      },
      {
         name: "工单量", //内部渐变圆柱
         type: "bar",
         barWidth: 30,
         z: 12,
         barGap: "-100%",
         label: {
            normal: {
               show: true,
               position: "top",
               fontSize: 12,
               color: "#fff",
            },
         },
         itemStyle: {
            //lenged文本
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
               {
                  offset: 0,
                  color: "rgba(31,147,201,1)",
               },
               {
                  offset: 0.79,
                  color: "rgba(26,120,201,0.8)",
               },
               {
                  offset: 1,
                  color: "rgba(30,98,172,0)",
               },
            ]),
         },
         data: barData,
      },
      {
         name: "上部圆",
         type: "pictorialBar",
         silent: true,
         symbolSize: [30, 6],
         symbolOffset: [0, -5],
         symbolPosition: "end",
         z: 12,
         color: "#3eb7f6",
         data: barData,
      },
      {
         name: "底部圆",
         type: "pictorialBar",
         silent: true,
         symbolSize: [30, 6],
         symbolOffset: [0, 0],
         z: 12,
         color: "#3eb7f6",
         data: barData,
      },
   ],
};