var maxData = 100;
option = {
backgroundColor: '#19181d',
title: {
top: 80,
text: 'Annual yield of apple✍',
subtext: '',
x: 'center',
textStyle: {
align: 'center',
color: '#fff',
fontSize: 30,
fontWeight: '100',
},
},
tooltip: {},
xAxis: {
max: maxData,
splitLine: {
show: false
},
offset: 10,
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
margin: 10
}
},
yAxis: {
data: ['2017', '2018', '2019', '2020'],
inverse: true,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
margin: 10,
color: '#999',
fontSize: 16
}
},
grid: {
top: 'center',
height: 200,
left: 70,
right: 100
},
series: [{
type: 'pictorialBar',
symbol: 'path://M166.5,42.8c-28.9-14.2-57.6,0.2-61.9,2.7c-4.5-2.3-33.2-17.1-62-2.5c-27.3,13.6-31.4,52.6-15,91.6 c14.6,34.8,36.1,53.3,47,56.7c9.8,2.8,20.3,2.5,30-0.8c3.1,0.9,17.5,5.2,29.9,0.8c10.5-3.7,32.9-21.6,47.1-56.9 C197.9,93.5,195.5,57,166.5,42.8L166.5,42.8z M38.2,114.8c-1.3-6.8-2.1-13.6-2.4-20.5c0-8.7-5.1-4.5-5.6,1c0,7.4,1.2,14.7,3.5,21.8 c3.7,11.6,7.7,18.5,8.4,17.6C42.9,133.8,39.8,124.5,38.2,114.8L38.2,114.8z M32.6,84.6c2,0,3-1.7,3-4c0.1-2.3-0.6-4.2-2.6-4.2 c-2,0.5-3.4,2.2-3.5,4.2C29.4,82.6,30.7,84.3,32.6,84.6z M86.6,49.3c0.4-1,6,2.5,14.8,3.4S117,51,117.3,52s-3.3,9.8-16.7,9.1 C93.8,60.8,88,55.9,86.6,49.3z M103.9,45.9c9.4-12.2,23-20.5,38.1-23.2c24.5-3.7,35,6,44.6,4c0,0-8.4,14.4-33.6,20.6 C136.8,50.7,120,50.3,103.9,45.9z M100.9,57.1c-1,0.4,0.8-5,2-12.3c2.1-12.3,4.3-29.9,1.1-34.8s9.1-3.3,10-1.5 c-0.7,8.7-2.2,17.3-4.5,25.7C107,44.3,103.2,56.3,100.9,57.1z M172.7,127.9c-1.2-0.5-2.5,0.1-3,1.3c0,0,0,0,0,0 c-1.2,2.9-2.4,5.7-3.7,8.3c-0.5,1.2,0.1,2.5,1.3,2.9c1.1,0.4,2.2,0,2.8-1c1.3-2.8,2.6-5.6,3.8-8.6 C174.4,129.7,173.9,128.3,172.7,127.9z M164.5,145.5c-1.1-0.6-2.5-0.2-3.1,0.9l-0.7,1.2c-0.7,1.1-0.3,2.5,0.7,3.1 c1.1,0.7,2.5,0.3,3.1-0.7c0,0,0,0,0-0.1l0.7-1.2C166,147.5,165.7,146.1,164.5,145.5C164.6,145.5,164.6,145.5,164.5,145.5z M155.2,156.5c-11.1,15.9-23.6,25.7-31.1,28.3c-9.4,2.7-19.4,2.4-28.6-0.9c-0.4-0.1-0.8-0.1-1.2,0l-0.9,0.3c-9,3-18.6,3.2-27.7,0.6 c-9.8-2.9-31-21.1-45.6-55.6C3.6,90,9.4,53.6,34,40.4s50-2.7,59.8,2.5c1.1,0.6,2.4,0.2,3-0.9c0,0,0,0,0-0.1c0.6-1.1,0.1-2.5-1-3.1 c-10.3-5.5-37.2-16.7-64.1-2.5s-33.4,53.2-16,94.5c15.3,36.4,37.4,54.5,48.5,58.2c4.4,1.4,9,2,13.6,2c5.6,0,11.2-0.9,16.5-2.6 c9.9,3.3,20.6,3.5,30.6,0.6c8-2.7,21.3-12.1,33.9-30c0.7-1.1,0.3-2.5-0.7-3.1c-1-0.6-2.3-0.4-3,0.5L155.2,156.5z M186.4,21.5 c0.6-1.1,0.2-2.5-0.9-3.1c-0.4-0.2-0.9-0.3-1.4-0.3c-4,0.3-8-0.2-11.7-1.6c-10.6-3.3-21.8-4.1-32.8-2.4c-9,1.4-17.5,4.9-24.9,10.2 c-1.1,0.7-1.4,2.1-0.7,3.1c0.7,1.1,2.1,1.4,3.1,0.7c0.1,0,0.1-0.1,0.2-0.1c6.8-4.8,14.5-8.1,22.7-9.4c10.3-1.6,20.9-0.8,30.9,2.3 c2.9,0.8,5.8,1.4,8.8,1.7c-8,8.1-18.2,13.6-29.4,16c-4.6,1.1-9.3,1.9-14,2.2c-1.3,0-2.3,1-2.3,2.3c0,1.3,1,2.3,2.3,2.3 c4.9-0.3,9.8-1.1,14.6-2.3c2.2-0.5,4.3-1.2,6.2-1.8c22,12,28,39.8,16.3,76.4c-0.4,1.2,0.3,2.5,1.5,2.9h0.7c1,0,1.9-0.6,2.2-1.6c11.9-37,6.3-65.7-15.1-79.8C172.2,35.9,180.5,29.7,186.4,21.5z',
symbolRepeat: 'fixed',
symbolMargin: '5%',
symbolClip: true,
symbolSize: 30,
symbolBoundingData: maxData,
data: [891, 1220, 660, 1670],
itemStyle: {
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#FAFF52'
}, {
offset: 1,
color: '#fe8500'
}])
},
markLine: {
symbol: 'none',
label: {
formatter: 'Statistics: {c}%',
position: 'start'
},
lineStyle: {
color: '#fcc229',
type: 'dotted',
opacity: 0.2,
width: 2
},
data: [{
type: 'max'
}]
},
z: 10
}, {
type: 'pictorialBar',
itemStyle: {
normal: {
opacity: 0.3,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#fe8500'
}, {
offset: 1,
color: '#1A1835'
}]),
}
},
label: {
show: true,
formatter: function(params) {
return (params.value / maxData * 100).toFixed(1) + ' %';
},
position: 'right',
offset: [10, 0],
color: '#fcc229',
fontSize: 18
},
animationDuration: 0,
symbolRepeat: 'fixed',
symbolMargin: '5%',
symbol: 'path://M166.5,42.8c-28.9-14.2-57.6,0.2-61.9,2.7c-4.5-2.3-33.2-17.1-62-2.5c-27.3,13.6-31.4,52.6-15,91.6 c14.6,34.8,36.1,53.3,47,56.7c9.8,2.8,20.3,2.5,30-0.8c3.1,0.9,17.5,5.2,29.9,0.8c10.5-3.7,32.9-21.6,47.1-56.9 C197.9,93.5,195.5,57,166.5,42.8L166.5,42.8z M38.2,114.8c-1.3-6.8-2.1-13.6-2.4-20.5c0-8.7-5.1-4.5-5.6,1c0,7.4,1.2,14.7,3.5,21.8 c3.7,11.6,7.7,18.5,8.4,17.6C42.9,133.8,39.8,124.5,38.2,114.8L38.2,114.8z M32.6,84.6c2,0,3-1.7,3-4c0.1-2.3-0.6-4.2-2.6-4.2 c-2,0.5-3.4,2.2-3.5,4.2C29.4,82.6,30.7,84.3,32.6,84.6z M86.6,49.3c0.4-1,6,2.5,14.8,3.4S117,51,117.3,52s-3.3,9.8-16.7,9.1 C93.8,60.8,88,55.9,86.6,49.3z M103.9,45.9c9.4-12.2,23-20.5,38.1-23.2c24.5-3.7,35,6,44.6,4c0,0-8.4,14.4-33.6,20.6 C136.8,50.7,120,50.3,103.9,45.9z M100.9,57.1c-1,0.4,0.8-5,2-12.3c2.1-12.3,4.3-29.9,1.1-34.8s9.1-3.3,10-1.5 c-0.7,8.7-2.2,17.3-4.5,25.7C107,44.3,103.2,56.3,100.9,57.1z M172.7,127.9c-1.2-0.5-2.5,0.1-3,1.3c0,0,0,0,0,0 c-1.2,2.9-2.4,5.7-3.7,8.3c-0.5,1.2,0.1,2.5,1.3,2.9c1.1,0.4,2.2,0,2.8-1c1.3-2.8,2.6-5.6,3.8-8.6 C174.4,129.7,173.9,128.3,172.7,127.9z M164.5,145.5c-1.1-0.6-2.5-0.2-3.1,0.9l-0.7,1.2c-0.7,1.1-0.3,2.5,0.7,3.1 c1.1,0.7,2.5,0.3,3.1-0.7c0,0,0,0,0-0.1l0.7-1.2C166,147.5,165.7,146.1,164.5,145.5C164.6,145.5,164.6,145.5,164.5,145.5z M155.2,156.5c-11.1,15.9-23.6,25.7-31.1,28.3c-9.4,2.7-19.4,2.4-28.6-0.9c-0.4-0.1-0.8-0.1-1.2,0l-0.9,0.3c-9,3-18.6,3.2-27.7,0.6 c-9.8-2.9-31-21.1-45.6-55.6C3.6,90,9.4,53.6,34,40.4s50-2.7,59.8,2.5c1.1,0.6,2.4,0.2,3-0.9c0,0,0,0,0-0.1c0.6-1.1,0.1-2.5-1-3.1 c-10.3-5.5-37.2-16.7-64.1-2.5s-33.4,53.2-16,94.5c15.3,36.4,37.4,54.5,48.5,58.2c4.4,1.4,9,2,13.6,2c5.6,0,11.2-0.9,16.5-2.6 c9.9,3.3,20.6,3.5,30.6,0.6c8-2.7,21.3-12.1,33.9-30c0.7-1.1,0.3-2.5-0.7-3.1c-1-0.6-2.3-0.4-3,0.5L155.2,156.5z M186.4,21.5 c0.6-1.1,0.2-2.5-0.9-3.1c-0.4-0.2-0.9-0.3-1.4-0.3c-4,0.3-8-0.2-11.7-1.6c-10.6-3.3-21.8-4.1-32.8-2.4c-9,1.4-17.5,4.9-24.9,10.2 c-1.1,0.7-1.4,2.1-0.7,3.1c0.7,1.1,2.1,1.4,3.1,0.7c0.1,0,0.1-0.1,0.2-0.1c6.8-4.8,14.5-8.1,22.7-9.4c10.3-1.6,20.9-0.8,30.9,2.3 c2.9,0.8,5.8,1.4,8.8,1.7c-8,8.1-18.2,13.6-29.4,16c-4.6,1.1-9.3,1.9-14,2.2c-1.3,0-2.3,1-2.3,2.3c0,1.3,1,2.3,2.3,2.3 c4.9-0.3,9.8-1.1,14.6-2.3c2.2-0.5,4.3-1.2,6.2-1.8c22,12,28,39.8,16.3,76.4c-0.4,1.2,0.3,2.5,1.5,2.9h0.7c1,0,1.9-0.6,2.2-1.6c11.9-37,6.3-65.7-15.1-79.8C172.2,35.9,180.5,29.7,186.4,21.5z',
symbolSize: 30,
symbolBoundingData: maxData,
data: [40, 50, 60, 70],
z: 5
}]
};
function random() {
return +(Math.random() * (maxData - 10)).toFixed(1);
}
setInterval(function() {
var dynamicData = [random(), random(), random(), random()];
myChart.setOption({
series: [{
data: dynamicData.slice()
}, {
data: dynamicData.slice()
}]
})
}, 1000)