在短视频上看到过很多种根据热度排序的炫酷图，今天去echarts上找了找，发现还真有，echarts5开始内置支持动态排序柱状图，以下是示例，记录下来供参考。
效果图：
<template>
<div class="dynamic-container">
<div ref="chart" class="chart-cls"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios'
export default {
name: 'dynamicExample',
data() {
return {
}
},
mounted() {
let myChart = echarts.init(this.$refs.chart);
let ROOT_PATH =
'https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var option;
const updateFrequency = 2000;
const dimension = 0;
const countryColors = {
Australia: '#00008b',
Canada: '#f00',
China: '#ffde00',
Cuba: '#002a8f',
Finland: '#003580',
France: '#ed2939',
Germany: '#000',
Iceland: '#003897',
India: '#f93',
Japan: '#bc002d',
'North Korea': '#024fa2',
'South Korea': '#000',
'New Zealand': '#00247d',
Norway: '#ef2b2d',
Poland: '#dc143c',
Russia: '#d52b1e',
Turkey: '#e30a17',
'United Kingdom': '#00247d',
'United States': '#b22234'
};
axios.all([axios({
url: 'https://fastly.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'
}),axios({
url: ROOT_PATH + '/data/asset/data/life-expectancy-table.json',
})]).then(res => {
console.log(res);
const flags = res[0].data
const data = res[1].data
const years = []
for(let i =0; i< data.length; ++i){
if(years.length == 0 || years[years.length - 1] != data[i][4]){
years.push(data[i][4])
}
}
const getFlag = (countryName) => {
if (!countryName) {
return '';
}
return (
flags.find(function (item) {
return item.name === countryName;
}) || {}
).emoji;
}
let startIndex = 10;
let startYear = years[startIndex];
option = {
grid: {
top: 10,
bottom: 30,
left: 150,
right: 80
},
xAxis: {
max: 'dataMax',
axisLabel: {
formatter: function (n) {
return Math.round(n) + '';
}
}
},
dataset: {
source: data.slice(1).filter(function (d) {
return d[4] === startYear;
})
},
yAxis: {
type: 'category',
inverse: true,
max: 10,
axisLabel: {
show: true,
fontSize: 14,
formatter: function (value) {
return value + '{flag|' + getFlag(value) + '}';
},
rich: {
flag: {
fontSize: 25,
padding: 5
}
}
},
animationDuration: 300,
animationDurationUpdate: 300
},
series: [
{
realtimeSort: true,
seriesLayoutBy: 'column',
type: 'bar',
itemStyle: {
color: function (param) {
//param。value是data中的每一行数据，param.value[3]是国家名称
return countryColors[param.value[3]] || '#5470c6';
}
},
//使用dataset中的dimension列作为x轴，第3列作为y轴
encode: {
x: dimension,
y: 3
},
label: {
show: true,
precision: 1,
position: 'right',
valueAnimation: true,
fontFamily: 'monospace'
}
}
],
// Disable init animation.
animationDuration: 0,
animationDurationUpdate: updateFrequency,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
graphic: {
elements: [
{
type: 'text',
right: 160,
bottom: 60,
style: {
text: startYear,
font: 'bolder 80px monospace',
fill: 'rgba(100, 100, 100, 0.25)'
},
z: 100
}
]
}
};
myChart.setOption(option);
for (let i = startIndex; i < years.length - 1; ++i) {
(function (i) {
setTimeout(function () {
updateYear(years[i + 1]);
}, (i - startIndex) * updateFrequency);
})(i);
}
function updateYear(year) {
let source = data.slice(1).filter(function (d) {
return d[4] === year;
});
option.series[0].data = source;
option.graphic.elements[0].style.text = year;
myChart.setOption(option);
}
})
},
methods: {
}
}
</script>
<style lang="less" scoped>
.chart-cls{
width: 100%;
height: 500px;
}
</style>
