要问我为什么会想要自己做数据可视化嘛，这就要从很久很久以前说起，话说....卡，其实就是觉得很有意思就想要来尝试一下。之前在b站看到有大佬用d3.js的库写了个很牛逼的数据可视化制作工具，还有用python写的大佬。那么小弟我呢，鉴于才疏学浅，就用echarts.js实现了一个简单版本的动态数据可视化。
那么让我们先来瞧瞧最终的效果图吧！
这个战力是我瞎填的（ps:火影迷们就不要在意了）
接下来我们来一起实现一下：
第一步：导入echarts.js，使用node的同学可以用npm安装，关于具体的细节echarts官网都有说得的，这里就不再赘述了。
第二步：去官网给出的实例中看下有没有这种类似的横向条形图，看能不能借鉴一下。
我的这个呢就是参考了上面这个官方示例。
第三步:我们可以先通过简单修改上面的官方示例，来实现一个静态的图
chart.setOption({
title: {
text: '火影忍者战力变化榜',
subtext: '数据瞎填的'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: date
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ["鸣人", "夜凯", "卡卡西", "我爱罗", "佐助"]
},
series: [
{
name: '',
type: 'bar',
data: [60, 100, 300, 500, 600]
}
],
})
此时，颜色就很单一，都是红色的，所以我们需要在配置项中再加一个参数
visualMap: {
orient: 'horizontal',
left: 'right',
max: 1000,
min: 50,
text: ['High Score', 'Low Score'],
// Map the score column to color
dimension: 0,
inRange: {
color: ['#1abc9c', '#2ecc71', '#9b59b6', '#e67e22']
},
show: false
},
其中的inRange是你设置的渐变色，最少可以设置2种颜色，dimension,min和max都会影响颜色的变化，自己可以适当地去进行参数的调整。
第四步：那么我们怎样让它动起来呢？当然就是动态地去改变它的数据（ps:我所用的数据就是json数组）了，上面代码中yAxis和series中的data很显然分别就是我们的name和value了，那么我们动态地去改变它就可以了。在js中有个setInterval()这个函数可以每隔一段时间对其中的回调方法进行调用。所以只要每次去通过这个函数设置新的数据就可以实现动态变化数据了，代码如下：
setInterval(function () {
getCurrentData();//获取最新数据
current_data = [];
console.log("current_date", current_date)
console.log("length", date.length)
// 显示 tooltip
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: xdata.length - 1
});
if (current_date > date.length) {
return;
}
time++;
xdata.forEach(e => {
setTimeout(function () {
current_data.push(e);
console.log(current_data)
console.log("cuurent_date后：", current_date)
chart.setOption({
yAxis: {
type: 'category',
data: name_list
},
series: [
{
name: date[time >= date.length ? date.length - 1 : time],
type: 'bar',
data: current_data
}
]
})
}, 500)
})
current_date = current_date + 1;
}, 1200);
第五步：知道如何动态改变数据了，那么如何获取每次的新数据呢？也就是说怎么去实现上面的getCurrentData()这个函数。在我的数据中，除了name和value这两个字段外，我还有一个date的字段，我就是通过date日期来更新数据的，例如我上面的数据可视化的动图就是从1号到5号的数据变化。
先上实现代码：
data.sort(function (a, b) {
return Date.parse(a.date) - Date.parse(b.date);//时间正序
});
//获取时间
var date = [];
data.forEach(e => {
console.log(e)
if (date.indexOf(e.date) == -1) {
date.push(e.date);
}
});
function getCurrentData() {
if (current_date >= date.length) {
current_date++;
return;
}
xdata = [];
name_list = [];
temp = [];
data.forEach(e => {
if (e.date == date[current_date]) {
temp.push(e);
}
})
console.log(temp.length)
temp.sort(function (a, b) {
return a.value - b.value;
});
temp.forEach(e => {
if (e.date == date[current_date]) {
xdata.push(e.value);
name_list.push(e.name);
}
})
console.log(xdata)
console.log(name_list);
}
这里我是先用时间进行排序（所以要注意时间的格式，例如2020-1-2），因为你的数据有可能并不是按照顺序来的，同时再单独定义一个date数组来存放获取到的各个时间，用于动态地改变legend参数，即上方的图例。之后就可以获取当前日期的data，然后对data根据value，也就是例子中的战力来排序，最后更新我们的xdata和name_list,即例子中的人物名称和战力，因为人物肯定是要随着它的战力来一起变化的。
总结：总体实现上还是比较简单的，就是用echarts展示图，然后利用serInterverl去动态地更新数据。代码也就200多行，目前这还就是只是个简单的数据可视化，还有些不足，感兴趣的朋友可以去进一步实现一下。