Web 插件 之 ECharts 动态排序柱状图可视化图表库简单实现
目录
Web 插件 之 ECharts 动态排序柱状图可视化图表库简单实现
一、简单介绍
Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。
本节介绍，Web 开发 中 ECharts 进行数据动态排序柱状图可视化图表使用方法，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
ECharts 官网：Apache ECharts
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
ECharts 遵循 Apache-2.0 开源协议，免费商用。
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。
二、实现原理
1、在官网 Examples - Apache ECharts 找到动态排序柱状图示例代码
2、构建自己的 web 工程，然后引入动态排序柱状图相关代码，这里添加相关的数据
一些参数的具体作用可以参见代码注释，具体也可以参看官网手册：Handbook - Apache ECharts
三、ECharts 动态排序柱状图效果预览
四、注意事项
1、案例代码使用 Eclipse 构建，代码文件结构如下
五、关键代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script type="text/javascript" src="./js/echarts.js"></script>
</head>
<body>
<div><h1>ECharts 动态排序使用测试</h1></div>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 测试数据
var newArr = [
{
"cdate": "2016",
"cname": "苹果,梨子,香蕉,菠萝,栗子,石榴",
"cut": "20.9,13.82,3.6,0.56,1.49,9.48"
},
{
"cdate": "2017",
"cname": "苹果,梨子,香蕉,菠萝,栗子,石榴",
"cut": "18.7,12.82,13.6,9.56,12.49,13.48"
},
{
"cdate": "2018",
"cname": "苹果,梨子,香蕉,菠萝,栗子,石榴",
"cut": "14.9,18.82,7.6,19.56,13.49,17.48"
},
{
"cdate": "2019",
"cname": "苹果,梨子,香蕉,菠萝,栗子,石榴",
"cut": "16.9,3.82,13.6,15.56,12.49,14.48"
},
{
"cdate": "2020",
"cname": "苹果,梨子,香蕉,菠萝,栗子,石榴",
"cut": "3.8,8.82,13.6,21.56,15.49,19.2"
},{
"cdate": "2021",
"cname": "苹果,梨子,香蕉,菠萝,栗子,石榴",
"cut": "23.9,16.82,13.6,17.56,14.49,19.98"
}
]
// 柱形颜色
const countryColors = {
苹果: '#88008b',
梨子: '#f00',
香蕉: '#ffde00',
菠萝: '#002a8f',
栗子: '#0035ff',
石榴: '#edff39'
};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var updateFrequency = 300; // 数据更新速度
var years = [];
var startIndex = 0;
for (var i = 0; i < newArr.length; ++i) {
years.push(newArr[i])
}
// 获取第一个数据
var startYear = years[startIndex].cdate;
var startName = years[startIndex].cname.split(',');
var startCut = years[startIndex].cut.split(',');
var option = {
// 图标的上下左右边界
grid: {
top: 10,
bottom: 30,
left: 120,
right: 120
},
// x 轴相关
xAxis: {
max: 'dataMax',
splitLine: {
show: true,
lineStyle: {
color: 'rgba(100,100,100, 0.4)',
type: 'dashed'
}
},
axisLabel: {
// 圆整 X 轴 参数
formatter: function (n) {
return Math.round(n) + '';
}
}
},
dataset: {
source: newArr
},
// y 轴数据
yAxis: {
type: 'category',
inverse: true, // 大在上面，小在下面排序
max: 5, // 最多显示个数
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)' */
color:function (param) {
return countryColors[param.name];
}
},
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: {
// 年代的文字 Text
elements: [{
type: 'text',
right: 120,
bottom: 60,
style: {
text: startYear,
font: 'bolder 40px monospace',
fill: 'rgba(100, 100, 100, 0.25)'
},
z: 100
}]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
for (var i = startIndex; i < newArr.length - 1; ++i) {
(function (i) {
setTimeout(function () {
updateYear(years[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);
}
</script>
</body>
</html>