vue版本的timesheet图表

YorkChen 发布于2019-08-21 18:19 / 822人阅读

摘要：说明由于工作需要，将改为一个以两个时间段内所有周作为参考的组件，所以把它重写成了一个的组件，保留了原有的以年为参考的方式，另外引入来操作时间比原来作者的更简单了。安装与使用效果

Github

https://github.com/SamHz/vue-...

说明

由于工作需要，将 timesheet 改为一个以两个时间段内所有周作为参考的组件，所以把它重写成了一个Vue的组件，保留了原有的以年为参考的方式，另外引入moment.js来操作时间比原来作者的更简单了。

安装与使用

npm install vue-timesheet -s

Javascript Code:

// please make sure install moment.js this weeks table driver it, thanks.
import "vue-timesheet/dist/vue-timesheet.min.css"
import vueTimeSheet from "vue-timesheet";
export default {
    components: {
        vueTimeSheet
    },
    data() {
        return {
            // years table
            tsData: [
                      ["2002", "09/2002", "A freaking awesome time", "lorem"],
                      ["06/2002", "09/2003", "Some great memories", "ipsum"],
                      ["2003", "Had very bad luck"],
                      ["10/2003", "2006", "At least had fun", "dolor"],
                      ["02/2005", "05/2006", "Enjoyed those times as well", "ipsum"],
                      ["07/2005", "09/2005", "Bad luck again", "default"],
                      ["10/2005", "2008", "For a long time nothing happened", "dolor"],
                      ["01/2008", "05/2009", "LOST Season #4", "lorem"],
                      ["01/2009", "05/2009", "LOST Season #4", "lorem"],
                      ["02/2010", "05/2010", "LOST Season #5", "lorem"],
                      ["09/2008", "06/2010", "FRINGE #1 & #2", "ipsum"]
                    ],
            startYear: "2000",
            endYear: "2018",
            // weeks table, for the moment, the weeks data need to complete, it"s not like years table
            tsData1: [
                       ["2017-11-01", "2017-11-11", "A freaking awesome time", "lorem"],
                       ["2017-11-02", "2017-11-22", "Some great memories", "ipsum"],
                       ["2017-11-08", "2017-11-22", "Had very bad luck", "default"],
                       ["2017-11-01", "2017-11-01", "At least had fun", "dolor"],
                       ["2017-11-20", "2017-11-22", "Enjoyed those times as well", "ipsum"],
                       ["2017-11-09", "2017-11-09", "Bad luck again", "default"],
                       ["2017-11-05", "2017-11-08", "For a long time nothing happened", "dolor"],
                       ["2017-11-18", "2017-11-28", "LOST Season #4", "lorem"],
                       ["2017-11-25", "2017-11-30", "LOST Season #4", "lorem"],
                       ["2017-11-11", "2017-11-12", "LOST Season #5", "lorem"],
                       ["2017-11-15", "2017-11-30", "FRINGE #1 & #2", "ipsum"]
            ]
            startDate: new Date("2017-11-01"),
            endDate: new Date("2017-11-30")
        }
    }
}

Template

效果

云服务器 GPU云服务器 timesheet 数据的图表展示 js图表中的数据 vue的计算属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90354.html

很棒的时间轴插件：Timesheet.js

摘要：看到一个很棒的时间轴工具，分享一下地址主页地址项目介绍通过和，把数据和事件进行可视化处理，用创建事件轴，用美化样式，还有适合移动端的方法。创建简单的时间轴只需要一个保存事件的数组使用安装看到一个很棒的时间轴工具，分享一下： github地址 https://github.com/sbstjn/timesheet.js 主页地址：http://sbstjn.github.io/time...

BakerJ 2019-08-22 10:56 评论0 收藏0
Vue中引入TradingView制作K线图

摘要：图表库希望通过仅一次调用，接收所有的请求历史。更新后台返回线最新的数据网上比较少关于引入的文章小弟不才粗略的分享一下我的实现方法 **前言: 本文使用的是1.10版本 , 可通过TradingView.version()查看当前版本. 附上开发文档地址:https://zlq4863947.gitbooks.i...** 一、修改datafeed.js为export导出,并在vue文件...

codergarden 2019-08-23 12:39 评论0 收藏0
Iceworks 2.7.0 发布，海量图表供你选择

摘要：发布，海量图表供你选择，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求轻松操作页面管理，海量物料自由搭配，页面组合可视化操作更得心应手开发调试一体化，集成运行环境零配置运行，开箱即用。 Iceworks 2.7.0 发布，海量图表供你选择 Iceworks，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求；轻松操作页...

gitmilk 2019-08-23 11:37 评论0 收藏0
Iceworks 2.7.0 发布，海量图表供你选择

摘要：发布，海量图表供你选择，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求轻松操作页面管理，海量物料自由搭配，页面组合可视化操作更得心应手开发调试一体化，集成运行环境零配置运行，开箱即用。 Iceworks 2.7.0 发布，海量图表供你选择 Iceworks，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求；轻松操作页...

ymyang 2019-07-01 10:36 评论0 收藏0