先一起来看一下效果。
这样的效果用HTML与JS，调用Echarts库就可以很轻松的来完成。
在ChatGPT中，输入一个指令就可以了。
完整的HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var years = ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009'];
var data = {};
// 生成随机数据
for (var i = 0; i < years.length; i++) {
var yearData = [];
for (var j = 0; j < 10; j++) {
yearData.push(Math.floor(Math.random() * 100));
}
data[years[i]] = yearData;
}
var option = {
timeline: {
data: years,
autoPlay: true,
loop: true,
playInterval: 1000,
left: '5%',
right: '5%',
},
baseOption: {
title: {
text: 'ECharts Bar Chart Race'
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5', 'Category6', 'Category7', 'Category8', 'Category9', 'Category10'].reverse()
},
series: [
{
name: 'Amount',
type: 'bar',
label: {
show: true,
position: 'insideRight'
}
}
]
},
options: years.map(function (year) {
return {
title: {
subtext: year
},
series: {
data: data[year].sort(function(a, b) {return b - a;})
}
};
})
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>ChatGPT直接完成。
AIGC ChatGPT 职场案例
AI 绘画 与 短视频制作
PowerBI 商业智能 68集
数据库Mysql 8.0 54集
数据库Oracle 21C 142集
Office 2021实战应用
Python 数据分析实战，
ETL Informatica 数据仓库案例实战
Excel 2021实操 100集，
Excel 2021函数大全 80集
Excel 2021高级图表应用89集，
Excel 2021大屏可视化制作 56集
Excel 2021实用技巧300集
PPT 2021 商业汇报实战应用69集
数据分析可视化Tableau 80集
数据可视化FineReport 50集
送你各类文档模板PPT，表格，大屏可视化 超过5000+模板
案例实战
