关于timeline的详细解析

关于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>