line

📈 折线图组件，包括折线和曲线、单条、多条、背景、渐变等常见的折线图。

如何使用？

首先，需要安装npm包（目前我们仅支持npm方式管理）：

npm install --save clunch @clunch/line

然后注册组件：

import Clunch from 'clunch';
import line from '@clunch/line';

Clunch.series('ui-line',line);

然后，你就可以使用这个组件了：

<ui-line data='Array' ruler='Array<String>'/>

• data:数据，应该是一个数组（比如：[[19,22,32],[1,22,3],[1,2,63],...]或[51,23,3,...]）
• ruler:刻度尺显示的内容（比如：["一月","二月","三月",...]）

除了上面的必输项外，还有下列可选项：

|属性|类型|描述|默认值|可选值| |----|----|----|----|----| |x|number|图形左上角位置横坐标|0|| |y|number|图形左上角位置纵坐标|0|| |width|number|图形宽|画布的宽|| |height|number|图形高|画布的高|| |colors|Array<string>|线条的颜色|内置循环色|| |size|number|线条的宽度|1|| |max-value|number|最大值|动态计算得出|| |min-value|number|最小值|动态计算得出|| |is-interpolation|boolean|是否插值|false|| |ruler-color|string|刻度尺颜色|black||

由于此组件是基于Clunch开发的，我们默认你已经掌握了相关知识。

<< 你可以点击此处学习Clunch.js如何使用

交互事件

图形绘制完成以后，我们可能还需要图形是可交互的，比如鼠标点击某个条目，可以提示对应的信息。

那么，我们可以对.clunch改造一下：

<ui-line data='Array' ruler='Array<String>' c-on:click='doit'/>

然后，在new Clunch的时候添加doit方法：

new Clunch({
    ......
    methods:{
        doit(target){
            console.log(target);
        }
    }
});

打印的结果如下：

target = {
    attr:当前组件的属性值
    data:你点击区域的信息
    left:点击位置的横坐标
    top:点击位置的纵坐标
    region:点击区域名称
    subRegion:点击子区域名称
    ......
}

其中，target.subRegion的格式举例子：'2'，表示你点击的是第三个条目。

这样子，你就可以添加弹框或者悬浮提示来实现和绘制图形的交互了！

开源协议

MIT

Copyright (c) 2021-2022 hai2007 走一步，再走一步。