ht-universal-line v1.1.8

npm地址

https://www.npmjs.com/package/ht-universal-line

使用：

1、下载插件
npm i ht-universal-line 


2、在vue 的min.js中导入并注册
import htUniversalLine from 'ht-universal-line'
import 'ht-universal-line/ht-universal-line.css'
Vue.use(htUniversalLine)

3、在页面中使用
<htUniversalLine :configObject="option" @lineChange="lineChange"></htUniversalLine>

参数

configObject：轴配置对象

type：Object

样例

{
	timeCfgs: [
        {
            prescription: 12, // 终止点
            startTime: 0, // 开始时间
            step: 4 // 步长
        },
        {
            prescription: 48,
            startTime: 12,
            step: 6
        }
    ],
    
    "type": "monAvg"
}

// timeCfgs：轴节点配置，会根据type类型来读取timeCfgs数组
/*
	type：轴类型配置
	值：
        1、monAvgSumYears：累年月平均，不读取timeCfgs配置，轴展示1-12月节点
        
        2、monAvg：月平均，不读取timeCfgs配置，展示年选择器，轴展示1-12月节点
        
        3、dayAvg：日平均，不读取timeCfgs配置，展示月选择器，轴展示已选月的各天节点
        
        4、fixedStep：固定步长，读取timeCfgs配置，展示天选择器，
			   timeCfgs中每个对象代表一个轴，
			   会根据轴的startTime生成选择器，通过选择器进行轴切换，
			   起始节点为0，代表当前时间，后续节点由对象中的prescription、step字段动态生成
			   
		5、variableStep：可变步长，固定步长，读取timeCfgs配置，展示天选择器
				  timeCfgs中每个对象代表一个轴的不同步长段落
				  节点由各个段落由timeCfgs中的对象，自上而下动态生成拼接而成
				  
		6、customAxis：自定义轴,读取timeCfgs配置
				·timeCfgs中每个对象代表一个轴
				·会根据配置的轴信息，展示轴选择器；
				·轴对象中的customName配置选择器中显示的轴名称
				·点从轴信息的customAxis数组读取
				·customAxis中label为展示在轴底端的点名称，value为值 既触发lineChange事件传出的node
*/

// 类型为customAxis自定义轴配置对象样例
{
    // 轴列表
	timeCfgs: [
        {
            // 轴节点列表
            customAxis: [
                {
                    label: "上旬",
                    value: "A"
                },
                {
                    label: "中旬",
                    value: "B"
                },
                {
                    label: "下旬",
                    value: "C"
                }
            ],
            // 轴名称
            customName: "旬轴1"
        }
    ],
    // 轴类型
    "type": "monAvg"
}

defaultDate：默认时间（累年月平均不生效）

type：String

默认：当前时间

样例：

<htUniversalLine  defaultDate = '2022-10-3' />

interval：自动播放时间间隔

type：Number

默认：3 【3秒】

样例：

<htUniversalLine :interval='2'  />

isShowAutoPlay：是否展示自动播放

type：Boolean

默认：true

maxTime：最大可选时间

type：Boolean

默认：'' 【无限制】

样例：

<htUniversalLine  maxTime='2022-10-3' />

minTime：最小可选时间

type：Boolean

默认：'' 【无限制】

样例：

<htUniversalLine minTime='2022-10-3'  />

tooltip：提示展示方式

type：String

可选值：

​ * none： Tooltip 始终不显示；

​ * always：Tooltip 会始终显示；

​ * hover：Tooltip 会在鼠标悬停在滑块上时显示；

​ * focus：仅当滑块获得焦点时，Tooltip 才会显示;

​ * active：同时具有 hover 和 focus 功能

默认：active

注：当轴类型为自定义（customAxis）时，tooltip的值为none，若想一直展示需配合forceTooltip，设置强制展示

duration：滑块滑动过度时间

type：Number

默认：0.5 【0.5秒】

样例：

<htUniversalLine  :duration='1' />

clickable：是否允许点击更改值

type：Boolean

默认：true 【允许】

事件

lineChange：轴发生变化 【初始化执行】

触发时机：当轴选中节点、所选时间、select所选轴发生变化时触发

所带参数：节点数据、自定义轴类型|轴开始时间、轴配置对象、当前所选时间（自定义轴customAxis类型无该项），起始时间 startTime

样例：

<template>
    <div >
        <htUniversalLine :configObject="option" @lineChange="lineChange" ref="htUniversalLine"></htUniversalLine>
    </div>
</template>

<script>
    export default {
        methods: {
            lineChange(node,selectVal,config,selectDate,startTime){
                console.log(node,selectVal,config,selectDate,startTime);
            }
        },
    }
</script>

selectChange：轴选择器发生改变【初始化不执行】

触发时机：select所选轴发生变化时触发

所带参数：

• 当为自定义类型customAxis时，参数为轴配置中的customName字段值

• 其他轴类型时，参数为轴配置中的 startTime 开始时间字段值

  <template>
      <div >
          <htUniversalLine 
          :configObject="option" 
          @selectChange="selectChange"
          ref="htUniversalLine">
      	</htUniversalLine>
      </div>
  </template>
  
  <script>
      export default {
          methods: {
              selectChange(value) {
                  console.log(value);
              },
          },
      }
  </script>

方法

getLineValue：获取轴值【支持自定义，传出value】

setLineValue：设置轴值【支持自定义，传入value】

getLineIndex：获取轴索引

setLineIndex：设置轴索引

getLineDate：获取轴时间

setLineData：设置轴时间

openAutoPlay：开启自动播放

closeAutoPlay：关闭自动播放

getStartTime：获取轴起始时间 startTime

<template>
    <div >
        <htUniversalLine 
        	:configObject="option" 
        	ref="htUniversalLine">
    	</htUniversalLine>
    </div>
</template>
<script>
    export default {
         mounted() {
             // 获取轴索引
        	console.log(this.$refs.htUniversalLine.getLineIndex());
    	}
    }
</script>