<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间轴可视化图</title>
<script src="../../js/echarts.min.js"></script>
<script src="../../js/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width: 1200px;height: 800px"></div>
<script type="text/javascript">
// 第一部分
// 定义一个rankData的变量存放数据，他是一个列表，其中有多个字典，每个字典代表了某天的数据情况
// 内容包括日期（date），分类（category），具体数据（data-包含每个商品的累计销量情况）
var rankData = [
{
"date": "2020-03-14",
"category": "2020-03-14",
"data": [
{'name': 'A商品', 'value': 6509},
{'name': 'B商品', 'value': 4791},
{'name': 'C商品', 'value': 3447},
{'name': 'D商品', 'value': 2906},
{'name': 'E商品', 'value': 2611},
]
},
{
'date': '2020-03-13',
'category': '2020-03-13',
'data': [
{'name': 'A商品', 'value': 4874},
{'name': 'B商品', 'value': 3662},
{'name': 'D商品', 'value': 2431},
{'name': 'C商品', 'value': 2160},
{'name': 'E商品', 'value': 2101},
]
},
{
'date': '2020-03-12',
'category': '2020-03-12',
'data': [
{'name': 'A商品', 'value': 3751},
{'name': 'B商品', 'value': 3398},
{'name': 'D商品', 'value': 2129},
{'name': 'C商品', 'value': 2110},
{'name': 'E商品', 'value': 2088},
]
},
{
'date': '2020-03-11',
'category': '2020-03-11',
'data': [
{'name': 'A商品', 'value': 2642},
{'name': 'B商品', 'value': 2332},
{'name': 'D商品', 'value': 1095},
{'name': 'C商品', 'value': 1075},
{'name': 'E商品', 'value': 1063},
]
},
{
'date': '2020-03-10',
'category': '2020-03-10',
'data': [
{'name': 'B商品', 'value': 1345},
{'name': 'A商品', 'value': 1045},
{'name': 'D商品', 'value': 870},
{'name': 'C商品', 'value': 696},
{'name': 'E商品', 'value': 640},
]
},
]
// 第二部分
// 定义标题（title），以及播放时可视化动态变化的时间间隔（playInteval）。
// 由于每天销量数据已经按照降序排列，之后的两层for循环的目的是在每天排行榜上对应的位置使用对应的颜色
var title = "商品累计销量情况";
var playInterval = 1000; // 定义时间间隔
// 排行颜色
var colorListS1 = [];
var colors = [];
// 双重for循环，第一层遍历每段列表
for (var i = 0; i < rankData.length; i++) {
var colorListF1 = [];
// 第二层遍历每段列表中的字典
for (var n = 0; n < rankData[i].data.length; n++) {
// 每阶段内部循环，
var name = rankData[i].data[n].name; // 排行榜上项目的名称
colorListF1[name] = colors[n]; // 排行榜上项目名称和对应的颜色
// 其中每个排名位置的颜色不变
}
colorListS1[i] = colorListF1; // 每次排行榜的数据字典放入总体的列表中
}
// 第三部分
// 设置option的内容，这部分是设置option中固定的部分，也就是不需要随时间和数据内容变化的部分，
// 主要包括动画效果设置，时间轴设置（timeline），标题设置（title），网格设置（grid），x轴设置（xAxis），y轴设置（yAxis），数据设置（series）。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 基础设置
var option = {
baseOption: {
animationDurationUpdate: playInterval * 1.5, // 数据更新动画的时长
animationEasingUpdate: "quinticInOut", // 数据更新动画的缓动效果
timeline: { // 时间轴相关参数
show: false, // 隐藏时间轴
axisType: "category", // 轴的类型：类别型
orient: "vertical", // 摆放方式：竖直放置
autoPlay: true, // 自动播放
loop: true, // 循环播放
playInterval: playInterval, // 表示播放的速度（跳动的事件按间隔），单位毫秒（ms）
left: null, // timeline组件离容器左侧的距离
right: 30, // timeline组件离容器右侧的距离
top: 330, // timeline组件离容器上侧的距离
bottom: 100, // timeline组件离容器下侧的距离
height: null,
label: { // 标签样式
normal: {
show: true, // 显示轴线
color: "#ccc" // 时间线的颜色
}
},
checkpointStyle: { // 当前项的图形样式，时间轴上显示
symbol: "none", //标记的图形样式
color: "#bbb", // 颜色
borderColor: "#777", // 边框颜色
show: false, // 不显示
borderWidth: 1 // 边框宽度
},
controlStyle: { // “控制按钮”的样式。控制按钮包括：播放按钮，前进按钮和后退按钮
showNextBtn: false, // 不显示前进按钮
showPrevBtn: false, // 不显示后退按钮
normal: {
color: '#666',
show: false,
borderColor: "#666"
},
emphasis: { // 高亮状态相关设置
color: "#aaa",
borderColor: "#aaa"
}
},
data: rankData.map(function (ele) { // 获取列表中每个原色的data部分
return ele.data
})
},
title: [{ //标题
left: 'center',
top: '3%',
textStyle: {
fontSize: 25,
color: 'rgba(121,121,121, 0.9)'
}
}, {
left: 'center',
top: '5%'
}],
grid: [{ //网格
left: '20%',
right: '20%',
top: '12%',
height: 'auto',
bottom: '25%'
}],
xAxis: {},
yAxis: {},
series: [{
id: 'bar', // 设置id属性
type: 'bar', //柱状图
barWidth: '80',
tooltip: {
show: false
},
label: { // 文本标签
normal: {
show: true,
position: 'right' // 文本标签位于右侧
}
},
data: []
}]
},
options: []
};
// 第四部分
// 由于是动态的可视化，使用每次显示的内容除了以上固定不变的部分，还有变化的部分，主要是与数据相关的展示。
// 以下代码主要完成以循环的方式将数据加入可视化模板代码中，用到了option的push方法以加入数据相关内容
var xMaxInterval = 5;
// 数据索引第一位是14日，想日期从10日开始加载，逆向遍历输出
for (var i = rankData.length - 1; i >= 0; i--) {
var xMax = 20;
if (rankData[i].data[0].value > 20) { // 当此排行中第一个数据是否大于20
xMax = 'dataMax' //此时取数据在该轴上的最大值作为最大刻度
}
if (rankData[i].data[0].value / xMaxInterval >= 10) {
xMaxInterval = rankData[i].data[0].value / 5 //减小最大间隔
}
option.options.push({
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ //背景的径向渐变
offset: 0,
color: '#f7f8fa'
}, {
offset: 1,
color: '#cdd0d5'
}]),
title: {
text: title + ' ' + rankData[i].category, //构造标题
color: '#bfbfbf'
},
xAxis: [{ //x轴相关设置
show: true,
type: 'value',
interval: xMaxInterval, //强制设置坐标轴分割间隔
max: xMax,
axisTick: { // 坐标轴刻度样式
show: false //不显示坐标轴刻度
},
axisLabel: { //坐标轴刻度标签的相关设置
show: true,
color: 'rgba(121,121,121,0.9)',
textStyle: {
color: 'rgba(121,121,121,0.9)'
}
},
axisLine: { //坐标轴线相关设置
show: false,
lineStyle: {
color: 'rgba(121,121,121,0.3)'
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线
show: true,
lineStyle: {
color: ['rgba(121,121,121,0.3)', 'rgba(121,121,121,0)']
}
}
}],
yAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: { // 分割线样式
show: true,
lineStyle: {
color: 'rgba(121,121,121,0.3)'
}
},
axisLabel: { // 坐标轴标签样式
show: false,
textStyle: {}
},
data: rankData[i].data.map(function (ele) { //拿到每个项目元素的名称
return ele.name
})
}],
series: [{
id: 'bar', //组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件
itemStyle: {
normal: {
color: function (params) { //设置一个颜色数组，最好比序列内的数据点个数要大或者相等
//根据当前数据点在当前序列内所处的顺序序号去颜色数组内自动匹配颜色
var colorListr = [
'#0f4471',
'#00adb5',
'#ff5722',
'#5628b4',
'#20BF55',
'#f23557',
];
return colorListr[params.dataIndex]
},
label: {
show: true,
fontSize: 18,
position: 'top',
formatter: '{c}%'
},
shadowBlur: 20,
shadowColor: 'rgba(40, 40, 40, 0.5)',
}
},
label: { //条形图的标签
normal: {
position: 'right', //标签显示位置
formatter: function (p) {
return p.name + ": " + p.value; //标签显示元素名称和具体值
}
}
},
data: rankData[i].data.map(function (ele) {
return ele.value
}).sort(function (a, b) {
return a > b
})
}]
})
}
myChart.setOption(option)
</script>
</body>
</html>
4671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
