动态可视化图表分析实例如下图:
这样的动态可视化图表可以使用ChatGPT OpenAI 来实现。
给ChatGPT发送指令:
你现在是一个数据分析师,请使用HTML,JS,Echarts,来完成一个动态条形图,条形图方向横向,数据可以随机生成,并且随机生成10个不同的商品名称,每个类别分别用不同的颜色表示,数据从小到大进行排序,自动在图表中进行滚动,按年份进行滚动,在图表中显示数据标签字体大小20号字体,加粗,请写出一个完整的Demo,可以运行的
完整的HTML代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态条形图</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var dataAxis = ['商品1', '商品2', '商品3', '商品4', '商品5', '商品6', '商品7', '商品8', '商品9', '商品10'];
var data = [];
for (var i = 0; i < 10; i++) {
data.push(Math.round(Math.random() * 100));
}
data.sort(function(a, b) {
return a - b;
});
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
var option = {
title: {
text: '动态条形图',
subtext: '数据可视化'
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{
type: 'bar',
itemStyle: {
color: function(params) {
var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'];
return colorList[params.dataIndex]
},
barBorderRadius: [30, 30, 30, 30],
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 4
},
label: {
show: true,
position: 'inside',
formatter: '{c}',
fontSize: 20,
fontWeight: 'bold'
},
data: data
}
]
};
myChart.setOption(option);
setInterval(function () {
for (var i = 0; i < 10; i++) {
data[i] = Math.round(Math.random() * 100);
}
data.sort(function(a, b) {
return a - b;
});
myChart.setOption({
series: [{
data: data
}]
});
}, 2000);
</script>
</body>
</html>
AIGC ChatGPT ,BI商业智能,可视化Tableau PowerBI,
数据库Mysql Oracle,Office, Python 案例实战 http://t.csdn.cn/zBytu
AIGC ChatGPT ,BI商业智能,可视化Tableau PowerBI,
数据库Mysql Oracle,Office, Python 案例实战 http://t.csdn.cn/zBytu
AIGC ChatGPT ,BI商业智能,可视化Tableau PowerBI,
数据库Mysql Oracle,Office, Python 案例实战 http://t.csdn.cn/zBytu
AIGC ChatGPT ,BI商业智能,可视化Tableau PowerBI,
数据库Mysql Oracle,Office, Python 案例实战 http://t.csdn.cn/zBytu