js时间轴插件

时间插件demo

该插件使用canvas绘制
html代码

<template>
    <div class="timeLine" >
        <div id="timeLine"></div>
    </div>
</template>


<script>
    import { timeAxis } from './timeAxis.js'
    export default{
        name: 'time-line',
        data () {
            return {
                list:[
                    {title:'犯罪日期',time:'2019-01-01',
                        titleStyle:{
                            color:'#ffffff',
                            font:'24px STheiti, SimHei',
                        },
                        timeStyle:{
                            color:'#6ce1f5',
                            font:'12px STheiti, SimHei',
                        }
                    },
                    {title:'犯罪日期',time:'2019-02-01'},
                    {title:'犯罪日期',time:'2019-03-01'},
                    {title:'犯罪日期',time:'2019-04-01',
                        color:'#ff1d2c'
                    },
                    {title:'犯罪日期',time:'2019-05-01'},
                    {title:'犯罪日期',time:'2019-06-01'},
                    {title:'犯罪日期',time:'2019-07-01'},
                    {title:'犯罪日期',time:'2019-08-01',isEnd:true,
                        titleStyle:{
                            color:'red',
                            font:'24px STheiti, SimHei',
                        },
                    },
                    {title:'犯罪日期',time:'2019-09-01'},
                    {title:'犯罪日期',time:'2019-10-01'},
                    {title:'犯罪日期',time:'2019-11-01'},
                    {title:'犯罪日期',time:'2019-12-01'},
                    {title:'犯罪日期',time:'2020-01-01'},
                    {title:'犯罪日期',time:'2020-02-01'},
                    {title:'犯罪日期',time:'2020-03-01',isEnd:true},
                    {title:'犯罪日期',time:'2020-04-01'},
                    {title:'犯罪日期',time:'2020-05-01'},
                    {title:'犯罪日期',time:'2020-06-01'},
                    {title:'犯罪日期',time:'2020-07-01'},
                    {title:'犯罪日期',time:'2020-08-01'},
                    {title:'犯罪日期',time:'2020-09-01'},
                    {title:'犯罪日期',time:'2020-10-01'},
                    {title:'犯罪日期',time:'2020-11-01'},
                    {title:'犯罪日期',time:'2020-12-01'},
                ],
            }
        },
        methods: {
            initCanvas(){
                let c = document.querySelector("#timeLine");
                var timeLine = new timeAxis(c);
                let option = {
                    list:this.list,
                    lineType:'line',
                    hover:function (point,index) {
//                        timeLine.showTip({position:[point.x,point.y],content:point.title});
                    },
                    click:function (point,index) {
                        console.log(point.x,point.y)
                    }
                };
                timeLine.setOption(option)
            }
        },
        mounted(){
            this.initCanvas();
        }
    }
</script>

<style lang="less" scoped>
    .timeLine{
        width: 100%;
        height: 100%;
        >div{
            width: 100%;
            height: 100%;
        }
    }

</style>

timeAxis.js

/**
 * Created by zhang on 2020/10/13.
 */
export class  timeAxis {
    option = {
        doitR : 2,//虚点半径
        doitInterval : 5,//虚点间隔
        marginLeft : 50,
        marginTop : 5,
        marginRight : 50,
        pointR :6,//时间点半径