var data = []; for (let i = 0; i < 5; ++i) { data.push(Math.round(Math.random() * 10)); } var xData2 = ['A', 'B', 'C', 'D', 'E']; var data1 = [100, 100, 100, 100, 100]; var data2 = [50, 32, 55, 65, 53]; var data3 = [0.01, 0.01, 0.01, 0.01, 0.01]; var data4 = [20, 20, 20, 20, 20]; option = { backgroundColor: '#fff', tooltip: { trigger: 'item', }, grid: { top:100, left: 100, bottom: 100, }, xAxis: { show: false, axisLabel: { interval: 0, textStyle: { color: 'rgba(65, 49,28, .9)', fontSize: 30, fontFamily: 'FZYaoti', fontWeight: 100, }, margin: 20, }, splitLine: { show: false, }, axisLine: { show: false, lineStyle: { color: 'rgba(255, 255,255, .8)', width: 4, }, }, splitArea: { show: false, }, axisTick: { show: false, }, data: ['A', 'B', 'C', 'D', 'E'], }, yAxis: { show: false, axisLine: { lineStyle: { color: 'rgba(255, 255,255, .9)', width: 4, }, }, axisLabel: { interval: 0, textStyle: { color: '#42321c', fontSize: 20, fontFamily: 'FZYaoti', }, margin: 20, }, splitLine: { show: false, lineStyle: { color: 'rgba(255, 255,255, .8)', width: 2, }, }, axisTick: { show: false, }, }, series: [ { name: '', type: 'pictorialBar', symbolSize: [25, 25], symbolOffset: [-5, -20], z: 20, itemStyle: { color: function (params) { var colorList = [ new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fef8a7', }, { offset: 0.5, color: '#eb710f', }, { offset: 1, color: '#fed174', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#feecc2', }, { offset: 0.5, color: '#01c49a', }, { offset: 1, color: '#01c49a', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fafee6', }, { offset: 0.5, color: '#2eb0ee', }, { offset: 1, color: '#2eb0ee', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fed6ee', }, { offset: 0.5, color: '#fd359c', }, { offset: 1, color: '#fd359c', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fefdf9', }, { offset: 0.5, color: '#aa2cbd', }, { offset: 1, color: '#aa2cbd', }, ]), ]; return colorList[params.dataIndex]; }, }, symbolPosition: 'end', data: data, }, { name: '', type: 'pictorialBar', symbolSize: [10, 10], symbolOffset: [-2, -40], z: 20, itemStyle: { color: function (params) { var colorList = [ new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fef8a7', }, { offset: 0.5, color: '#eb710f', }, { offset: 1, color: '#fed174', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#feecc2', }, { offset: 0.5, color: '#01c49a', }, { offset: 1, color: '#01c49a', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fafee6', }, { offset: 0.5, color: '#2eb0ee', }, { offset: 1, color: '#2eb0ee', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fed6ee', }, { offset: 0.5, color: '#fd359c', }, { offset: 1, color: '#fd359c', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fefdf9', }, { offset: 0.5, color: '#aa2cbd', }, { offset: 1, color: '#aa2cbd', }, ]), ]; return colorList[params.dataIndex]; }, }, symbolPosition: 'end', data: data, }, { name: '', type: 'pictorialBar', symbolSize: [15, 15], symbolOffset: [20, -50], z: 20, itemStyle: { color: function (params) { var colorList = [ new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fef8a7', }, { offset: 0.5, color: '#eb710f', }, { offset: 1, color: '#fed174', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#feecc2', }, { offset: 0.5, color: '#01c49a', }, { offset: 1, color: '#01c49a', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fafee6', }, { offset: 0.5, color: '#2eb0ee', }, { offset: 1, color: '#2eb0ee', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fed6ee', }, { offset: 0.5, color: '#fd359c', }, { offset: 1, color: '#fd359c', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fefdf9', }, { offset: 0.5, color: '#aa2cbd', }, { offset: 1, color: '#aa2cbd', }, ]), ]; return colorList[params.dataIndex]; }, }, symbolPosition: 'end', data: data, }, { name: '', type: 'pictorialBar', symbolSize: [12, 12], symbolOffset: [-20, -70], z: 20, itemStyle: { color: function (params) { var colorList = [ new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fef8a7', }, { offset: 0.5, color: '#eb710f', }, { offset: 1, color: '#fed174', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#feecc2', }, { offset: 0.5, color: '#01c49a', }, { offset: 1, color: '#01c49a', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fafee6', }, { offset: 0.5, color: '#2eb0ee', }, { offset: 1, color: '#2eb0ee', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fed6ee', }, { offset: 0.5, color: '#fd359c', }, { offset: 1, color: '#fd359c', }, ]), new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fefdf9', }, { offset: 0.5, color: '#aa2cbd', }, { offset: 1, color: '#aa2cbd', }, ]), ]; return colorList[params.dataIndex]; }, }, symbolPosition: 'end', data: data, }, { name: '', type: 'pictorialBar', symbolSize: [70, 20], symbolOffset: [0, -10], z: 1, itemStyle: { opacity: 1, color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: '#bdbdbd', }, { offset: 0.2, color: '#f8f8f8', }, { offset: 0.5, color: '#fff', }, { offset: 0.8, color: '#f8f8f8', }, { offset: 1, color: '#bdbdbd', }, ], global: false, }, borderColor: 'rgba(0,0,0,.3)', borderWidth: 2, shadowBlur: 0, shadowColor: 'rgba(0, 0, 0, .1)', shadowOffsetY: 1, shadowOffsetX: 0, }, symbolPosition: 'end', data: data1, }, { name: '', type: 'bar', barWidth: 70, barGap: '-100%', z: 0, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: '#eeeeee', }, { offset: 0.15, color: '#fafafa', }, { offset: 0.3, color: '#fff', }, { offset: 0.5, color: '#fff', }, { offset: 0.7, color: '#fff', }, { offset: 0.85, color: '#fafafa', }, { offset: 1, color: '#eeeeee', }, ], global: false, }, }, data: data1, }, { name: '', type: 'pictorialBar', symbolSize: [70, 20], symbolOffset: [0, -10], z: 12, itemStyle: { opacity: 1, color: function (params) { var colorList = [ new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [ { offset: 0, color: '#ea8126', }, { offset: 1, color: '#fff', }, ]), new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [ { offset: 0, color: '#05e8b5', }, { offset: 1, color: '#fff', }, ]), new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [ { offset: 0, color: '#51c4fb', }, { offset: 1, color: '#fff', }, ]), new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [ { offset: 0, color: '#ff58ae', }, { offset: 1, color: '#fff', }, ]), new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [ { offset: 0, color: '#c937e4', }, { offset: 1, color: '#fff', }, ]), ]; return colorList[params.dataIndex]; }, }, symbolPosition: 'end', data: data, }, { name: '', type: 'bar', barWidth: 70, barGap: '-100%', z: 10, label: { show: true, formatter: '{c}%', position: 'bottom', distance: 20, color: '#333', fontSize: 18, }, itemStyle: { color: function (params) { var colorList = [ new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#ffc664', }, { offset: 0.3, color: '#ff831f', }, { offset: 0.5, color: '#ff831f', }, { offset: 0.7, color: '#ff831f', }, { offset: 1, color: '#ffc664', }, ]), new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#0fae8b', }, { offset: 0.3, color: '#01c49a', }, { offset: 0.5, color: '#01c49a', }, { offset: 0.7, color: '#01c49a', }, { offset: 1, color: '#0efbc7', }, ]), new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#229adf', }, { offset: 0.3, color: '#2eb0ee', }, { offset: 0.5, color: '#2eb0ee', }, { offset: 0.7, color: '#2eb0ee', }, { offset: 1, color: '#6ad1fc', }, ]), new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#fa1181', }, { offset: 0.3, color: '#fd359c', }, { offset: 0.5, color: '#fd359c', }, { offset: 0.7, color: '#fd359c', }, { offset: 1, color: '#fe7bc7', }, ]), new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#932792', }, { offset: 0.3, color: '#aa2cbd', }, { offset: 0.5, color: '#aa2cbd', }, { offset: 0.7, color: '#aa2cbd', }, { offset: 1, color: '#c382de', }, ]), ]; return colorList[params.dataIndex]; }, }, data: data, }, { name: '', type: 'pictorialBar', symbolSize: [70, 25], symbolOffset: [0, 10], z: 3, itemStyle: { opacity: 1, color: function (params) { var colorList = [ new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#ffc664', }, { offset: 0.3, color: '#ff831f', }, { offset: 0.5, color: '#ff831f', }, { offset: 0.7, color: '#ff831f', }, { offset: 1, color: '#ffc664', }, ]), new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#0fae8b', }, { offset: 0.3, color: '#01c49a', }, { offset: 0.5, color: '#01c49a', }, { offset: 0.7, color: '#01c49a', }, { offset: 1, color: '#0efbc7', }, ]), new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#229adf', }, { offset: 0.3, color: '#2eb0ee', }, { offset: 0.5, color: '#2eb0ee', }, { offset: 0.7, color: '#2eb0ee', }, { offset: 1, color: '#6ad1fc', }, ]), new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#fa1181', }, { offset: 0.3, color: '#fd359c', }, { offset: 0.5, color: '#fd359c', }, { offset: 0.7, color: '#fd359c', }, { offset: 1, color: '#fe7bc7', }, ]), new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#932792', }, { offset: 0.3, color: '#aa2cbd', }, { offset: 0.5, color: '#aa2cbd', }, { offset: 0.7, color: '#aa2cbd', }, { offset: 1, color: '#c382de', }, ]), ]; return colorList[params.dataIndex]; }, }, data: [1, 1, 1, 1, 1], }, { name: '', type: 'pictorialBar', symbol: 'rect', symbolSize: [70, 40], symbolOffset: [0, 40], z: -1, label: { show: true, formatter: '{c}%', position: 'top', distance: -20, color: '#fff', fontFamily: 'FZYaoti', fontWeight: 100, fontSize: 20, }, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: '#bbbbbb', }, { offset: 0.5, color: '#e9e9e9', }, { offset: 0.6, color: '#fff', }, { offset: 1, color: '#e5e6e8', }, ], global: false, }, }, data: data4, }, { name: '', type: 'pictorialBar', symbolSize: [70, 20], symbolOffset: [0, 30], z: -2, itemStyle: { opacity: 1, shadowBlur: 5, shadowColor: 'rgba(90, 96, 108, .3)', shadowOffsetY: 2, shadowOffsetX: 15, color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: '#bbbbbb', }, { offset: 0.5, color: '#e9e9e9', }, { offset: 0.6, color: '#fff', }, { offset: 1, color: '#e5e6e8', }, ], global: false, }, }, symbolPosition: 'end', data: data3, }, ], }; function run () { var data = option.series[0].data; for (var i = 0; i < data.length; ++i) { if (Math.random() <= 100) { data[i] = Math.round(Math.random() * 60); } else { data[i] = Math.round(Math.random() * 80); } } myChart.setOption(option); } setTimeout(function() { run(); }, 0); setInterval(function () { run(); }, 3000);