You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/10/13 02:00:30 UTC
[GitHub] [echarts] robin-repo removed a comment on issue #15868: 动态排序柱状图柱子显示不全。有时候有，有时候没有。参考：动态排序柱状图 - 人均收入
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/echarts@5.2.1/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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org