关于timeline的详细解析
初始化画布
在echarts中有一个组件叫timeline他与echart中的其他图表结合起来 能很好的展现一段时间内各种数据的变化趋势
接下来我将用官网案例去逐步展示一下关于timeline中的各种详细配置
首先我们创建好vue的组件结构先尝试一些简单的小demo看看能不能渲染
<template>
<div class="TimeLineWrapper" id="TIMELINECHARTS"></div>
</template>
<script setup >
import { onMounted } from 'vue'
import * as echarts from "echarts"
// 创建渲染函数
const isSHowTimeLine = () => {
// 获取dom
const BOX = document.getElementById("TIMELINECHARTS")
// 初始化画布
const EchartsBox = echarts.init(BOX, null, 'dark')
// 创建配置项
const option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 渲染配置项
EchartsBox.setOption(option)
}
onMounted(() => {
// 调用渲染函数
isSHowTimeLine()
})
</script>
<style scoped lang="scss">
.TimeLineWrapper {
background-color: rgb(124, 121, 121);
width: 100%;
height: 100%;
}
</style>
开始解析
我们在写timeline的时候一般都会用到baseopstion和opstion的写法,这哥俩是怎么配合的呢,首先我们先在baseopstion中创建我们基本的图像 比如饼图 折线图等等 然后我们需要将opstion写成一个数组 opstion这个数组中的每一个元素对应这当前timeline的一个节点
假设这就是timeline
< 2001— 2002 — 2003 — 2004 — 2005 — 2006 — 2007 — 2008 — 2009 — 2010 >
opstion怎么写
opstion=[
{2001数据},.......,{2010数据}
]
先看一下如何用baseopstion去实现一个timeline
<<template>
<div class="TimeLineWrapper" id="TIMELINECHARTS"></div>
</template>
<script setup >
import { onMounted } from 'vue'
import * as echarts from "echarts"
// 创建渲染函数
const isSHowTimeLine = () => {
// 获取dom
const BOX = document.getElementById("TIMELINECHARTS")
// 初始化画布
const EchartsBox = echarts.init(BOX, null, 'dark')
// 创建配置项
const option = {
baseOption: {
// 配置timeline
timeline: {
axisType: 'category', // 坐标轴类型 ---https://echarts.apache.org/zh/option.html#timeline.axisType
realtime: true, // 拖动时是否实时渲染视图---https://echarts.apache.org/zh/option.html#timeline.realtime
rewind: false, // 是否启动反向播放,需要将loop置为true
loop: false, // 是否循环播放
autoPlay: false, // 是否自动播放
inverse: false, // 反向置放timeline
currentIndex: 0, // 起始位置
playInterval: 1000, // 播放间隔
controlStyle: {
position: 'left'
}, // 播放控制器位置
data: [
'2002-01-01', '2003-01-01', '2004-01-01',
// 关于data的定义我们有这两种方式 你应该可以看懂
// https://echarts.apache.org/zh/option.html#timeline.data
/*
type1:string
type2:object
*/
{
value: '2005-01-01',
symbol: 'diamond',
symbolSize: 16
},
'2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',
{
value: '2011-01-01',
symbol: 'diamond',
symbolSize: 18
}
], // timeline数据源
// https://echarts.apache.org/zh/option.html#timeline.label
label: {
// 这里是底部展示的内容
formatter: function (s) {
// s is data
return (new Date(s)).getFullYear()//之保存年份
}
} // timeline坐标值
}
},
opstions: [{}],
};
// 渲染配置项
EchartsBox.setOption(option)
}
onMounted(() => {
// 调用渲染函数
isSHowTimeLine()
})
</script>
<style scoped lang="scss">
.TimeLineWrapper {
background-color: rgb(124, 121, 121);
width: 100%;
height: 100%;
}
</style>
小demo
基本使用方法就是这样 尝试实现一个小demo
需求 : 拖动timeline 实现数据的实时渲染
ok fine开始 我这里直接放出全部代码加上详细的注释 肯定能看懂!
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
const ALLdata = {
revenue: {
"2002": [20, 55, 87, 11, 33, 74, 32, 46, 99],
"2003": [41, 25, 39, 62, 78, 81, 94, 66, 53],
"2004": [81, 21, 33, 47, 55, 39, 72, 88, 91],
"2005": [63, 22, 93, 59, 47, 74, 11, 74, 83],
"2006": [36, 94, 79, 25, 17, 88, 37, 91, 54],
"2007": [48, 74, 92, 15, 54, 26, 66, 39, 47],
"2008": [71, 74, 63, 45, 95, 41, 77, 99, 31],
"2009": [57, 38, 24, 81, 68, 52, 13, 83, 17],
"2010": [92, 89, 59, 12, 47, 93, 27, 74, 61]
},
expenditures: {
"2002": [29, 68, 99, 42, 11, 74, 53, 83, 27],
"2003": [83, 21, 49, 17, 18, 66, 38, 28, 79],
"2004": [75, 23, 42, 45, 98, 27, 54, 73, 15],
"2005": [21, 52, 91, 62, 34, 54, 77, 36, 45],
"2006": [69, 34, 18, 81, 62, 99, 25, 13, 24],
"2007": [38, 61, 79, 11, 72, 22, 88, 68, 29],
"2008": [52, 19, 95, 77, 82, 39, 86, 11, 44],
"2009": [22, 74, 37, 95, 61, 49, 31, 82, 16],
"2010": [86, 57, 43, 75, 29, 92, 13, 64, 98]
}
}//创建数据源
var Opstion = {
baseOption: {
timeline: {
axisType: 'category', // 坐标轴类型
realtime: true, // 拖动时是否实时渲染视图
rewind: false, // 是否启动反向播放,需要将loop置为true
loop: true, // 是否循环播放
autoPlay: true, // 是否自动播放
inverse: false, // 反向置放timeline
currentIndex: 0, // 起始位置
playInterval: 1000, // 播放间隔
symbolSize: [20, 20],
symbolKeepAspect: true,
padding: [
0, // 上
0, // 右
35, // 下
0, // 左
],
controlStyle: {
position: 'left'
}, // 播放控制器位置
data: [
'2002-01-01', '2003-01-01', '2004-01-01', "2005", '2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',
], // timeline数据源
label: {
formatter: function (s) {
return (new Date(s)).getFullYear()
},
textStyle: {
color: 'black', fontSize: 12,
offset: [-10, -120]
}
}
},
tooltip: {},
title: {
text: "title",
textStyle: {
color: "black",
fontSize: 30,
fontWeight: 800
},
subtext: '数据来自国家统计局',
subtextStyle: {
color: "#909090",
fontSize: 20,
fontWeight: 500
}
},
grid: {
top: 130,
bottom: 140
},
xAxis: {
type: 'category',
axisLabel: { interval: 0 },
splitLine: { show: false },
data: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', "2009", "2010"]
},
yAxis: {
type: 'value',
name: '个人收入统计',
},
series: [
// 绘制两个柱状图
{ name: '收入', type: 'bar' },
{ name: '支出', type: 'bar' },
]
},
options: [
{
title: { text: '2002个人收入支出情况分析' },
series: [
{ data: ALLdata.revenue['2002'] },
{ data: ALLdata.expenditures['2002'] },
]
},
{
title: { text: '2003个人收入支出情况分析' },
series: [
{ data: ALLdata.revenue['2003'] },
{ data: ALLdata.expenditures['2003'] },
]
},
{
title: { text: '2004个人收入支出情况分析' },
series: [
{ data: ALLdata.revenue['2004'] },
{ data: ALLdata.expenditures['2004'] },
]
},
{
title: { text: '2005个人收入支出情况分析' },
series: [
{ data: ALLdata.revenue['2005'] },
{ data: ALLdata.expenditures['2005'] },
]
},
{
title: { text: '2006个人收入支出情况分析' },
series: [
{ data: ALLdata.revenue['2006'] },
{ data: ALLdata.expenditures['2006'] },
]
},
{
title: { text: '2007个人收入支出情况分析' },
series: [
{ data: ALLdata.revenue['2007'] },
{ data: ALLdata.expenditures['2007'] },
]
},
{
title: { text: '2008个人收入支出情况分析' },
series: [
{ data: ALLdata.revenue['2008'] },
{ data: ALLdata.expenditures['2008'] },
]
},
{
title: { text: '2009个人收入支出情况分析' },
series: [
{ data: ALLdata.revenue['2009'] },
{ data: ALLdata.expenditures['2009'] },
]
},
{
title: { text: '2010个人收入支出情况分析' },
series: [
{ data: ALLdata.revenue['2010'] },
{ data: ALLdata.expenditures['2010'] },
]
},
]
}
if (Opstion && typeof Opstion === 'object') {
myChart.setOption(Opstion);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>