robin-repo removed a comment on issue #15868: URL: https://github.com/apache/echarts/issues/15868#issuecomment-940863472
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title></title>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js";
type="text/javascript"
charset="utf-8"></script>
<style type="text/css">
div {
height: 800px;
width: 100%;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
var colorArray = ['#ef5b9c', '#fedcbd', '#80752c',
'#2a5caa', '#46485f', '#585eaa', '#f58220', '#a3cf62', '#78a355',
'#77ac98', '#2570a1'
];
const data = [{
"settlementUnit": "客户1",
"createDate": "2021-12-17",
"productCount": 2
},
{
"settlementUnit": "客户1",
"createDate": "2021-11-17",
"productCount": 70
},
{
"settlementUnit": "客户2",
"createDate": "2021-09-17",
"productCount": 10
},
{
"settlementUnit": "客户3",
"createDate": "2021-10-17",
"productCount": 6
},
{
"settlementUnit": "客户4",
"createDate": "2021-09-17",
"productCount": 7
},
{
"settlementUnit": "客户51111",
"createDate": "2021-08-17",
"productCount": 4
},
{
"settlementUnit": "客户22211",
"createDate": "2021-08-17",
"productCount": 50
},
{
"settlementUnit": "客户5",
"createDate": "2021-06-17",
"productCount": 1
}
];
let myChart =
echarts.init(document.getElementById("root"));
if (window.timerList) {
window.timerList.forEach(item => {
clearTimeout(item);
});
} else window.timerList = [];
const updateFrequency = 2000;
const dimension = 0;
const dates = [];
const seriesData = [];
for (let i = 0; i < data.length; i++) {
if (!dates.includes(data[i].createDate)) {
dates.push(data[i].createDate)
}
if (data[i].createDate == data[0].createDate) {
const index =
seriesData.findIndex(element => element[1] == data[i].settlementUnit);
if (index !== -1) {
seriesData[index][0] +=
data[i].productCount;
} else
seriesData.push([data[i].productCount, data[i].settlementUnit,
data[i].createDate]);
}
}
let option = {
grid: {
top: 10,
bottom: 30,
left: 150,
right: 80
},
xAxis: {
max: 'dataMax',
axisLabel: {
formatter: function(n) {
return n;
}
}
},
dataset: {
source: seriesData
},
yAxis: {
type: 'category',
inverse: true,
max: 10,
axisLabel: {
interval: 0,
show: true,
fontSize: 14,
formatter: function(value) {
return value;
},
rich: {
flag: {
fontSize: 25,
padding: 5
}
}
},
animationDuration: 300,
animationDurationUpdate: 300
},
series: [{
realtimeSort: true,
seriesLayoutBy: 'column',
type: 'bar',
itemStyle: {
color: function(param) {
return
colorArray[Math.round(Math.random() * 10)];
}
},
encode: {
x: dimension,
y: 3
},
label: {
show: true,
precision: 1,
position: 'right',
valueAnimation: true,
fontFamily: 'monospace'
}
}],
// Disable init animation.
animationDuration: 1000,
animationDurationUpdate: 500,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
graphic: {
elements: [{
type: 'text',
right: 160,
bottom: 60,
style: {
text: dates[0],
font: 'bolder 80px
monospace',
fill: 'rgba(100, 100,
100, 0.25)'
},
z: 100
}]
}
};
myChart.setOption(option);
for (let i = 0; i < dates.length - 1; i++) {
(function(i) {
var timer = setTimeout(function() {
updateDate(dates[i + 1]);
}, (i + 1) * updateFrequency);
window.timerList.push(timer);
})(i);
}
function updateDate(currentDate) {
var seriesData2 = [];
let source = data.filter(function(d) {
return d.createDate == currentDate;
});
source.forEach(item => {
var index =
seriesData2.findIndex(element => element[1] == item.settlementUnit);
if (index !== -1) {
seriesData2[index][0] +=
item.productCount;
} else
seriesData2.push([item.productCount, item.settlementUnit, item.createDate]);
});
option.series[0].data = seriesData2;
option.graphic.elements[0].style.text =
currentDate;
myChart.setOption(option);
}
</script>
</body>
</html>
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
