echarts动态排序柱状图

动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。 动态排序柱状图通常是横向的柱条，如果想要采用纵向的柱条，只要把本教程中的 X 轴和 Y 轴相反设置即可。 我的数据结构如下的列表：

var newArr = [ { cdate: "2021-08" cname: "湖南省,江西省,湖北省,四川省,江苏省,广东省,河南省,甘肃省,贵州省,山东省,安徽省,广西壮族自治区,陕西省,福建省,河北省" cut: "79.10,13.82,1.28,0.56,0.49,0.48,0.47,0.47,0.41,0.32,0.30,0.29,0.24,0.24,0.22" }, { cdate: "2021-09" cname: "湖南省,江西省,湖北省,广东省,河南省,四川省,广西壮族自治区,贵州省,福建省,陕西省,安徽省,江苏省,山东省,辽宁省,上海市" cut: "69.60,16.19,1.91,1.83,1.42,1.18,0.82,0.76,0.65,0.53,0.51,0.50,0.46,0.42,0.38" } ]

具体代码如下：

const myChart = echarts.init(document.getElementById("#id")) var updateFrequency = 6000; var month = []; var startIndex = 0; for (var i = 0; i < newArr.length; ++i) { if (month.length == 0) { month.push(newArr[i]) } } var startMonth = month[startIndex].cdate; var startName = month[startIndex].cname.split(','); var startCut = month[startIndex].cut.split(','); var option = { grid: { top: 10, bottom: 30, left: 10, right: 30 }, xAxis: { max: 'dataMax', splitLine: { show: true, lineStyle: { color: 'rgba(19,229,227, 0.4)', type: 'dashed' } } }, dataset: { source: newArr }, yAxis: { type: 'category', inverse: true, max: 15, data: startName, axisLabel: { show: true, textStyle: { fontSize: 14 }, rich: { flag: { fontSize: 25, padding: 5 } } }, animationDuration: 300, animationDurationUpdate: 300 }, series: [{ realtimeSort: true, seriesLayoutBy: 'column', type: 'bar', itemStyle: { color: 'rgb(13,208,229)' }, encode: { x: 0, y: 3 }, label: { show: true, precision: 1, position: 'right', valueAnimation: true, fontFamily: 'monospace', formatter: function (data) { return startCut[data.dataIndex] + "%"; } }, data: startCut }], animationDuration: 0, animationDurationUpdate: 1000, animationEasing: 'linear', animationEasingUpdate: 'linear', graphic: { elements: [{ type: 'text', right: 30, bottom: 60, style: { text: startMonth, font: 'bolder 40px monospace', fill: 'rgba(19,229,227, 0.4)' }, z: 100 }] } }; myChart.setOption(option) for (var i = startIndex; i < newArr.length - 1; ++i) { (function (i) { setTimeout(function () { updateYear(newArr[i + 1]); }, (i + 1) * updateFrequency); })(i); } function updateYear(year) { option.yAxis.data = year.cname.split(','); option.series[0].data = year.cut.split(','); option.graphic.elements[0].style.text = year.cdate; myChart.setOption(option); }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。