# les-vue-chan

> les vue2.0 chan for the traffice industry

Latest version **0.0.4** (published 2021-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install les-vue-chan
pnpm add les-vue-chan
yarn add les-vue-chan
bun add les-vue-chan
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2021-03-08 |
| First published | 2021-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 985.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | silver |
| Maintainers | scau_xiaoyou |

## Links

- npm: https://www.npmjs.com/package/les-vue-chan
- npm.io page: https://npm.io/package/les-vue-chan

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^2.6.5

## Recent versions

- 0.0.4 (latest) — 2021-03-08
- 0.0.3 — 2021-03-08
- 0.0.2 — 2021-03-08
- 0.0.1 — 2021-03-08

## README

## 项目名称
les-vue-chan
## 简述
use vue2.0,draw the intersection (chan) for the traffic industry
## 如何使用

>安装依赖包
```$xslt
npm install --save les-vue-chan
```
>全局引入(后续更新模板加载)
```$xslt
import chan from "les-vue-chan"
Vue.use(chan)
```
>模板引入
```$xslt
<template>
    <div>
      <les-chan :options="options" @on-chan="getChan"></les-chan>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                options: {
                    bgColor:'rgba(2,2,2,0)',//画布颜色
                    width: 400,
                    height: 400,
                    mode: 3,
                    fontScale: 0.25,
                    data: [
                        {
                            name:"彩虹路",
                            direction: 1,
                            angle:  -1.5707963267948966,
                            separationWidth: 2,
                            separationType: 3,
                            outLaneNum:3,
                        },
                        {
                            direction: 1,
                            separationWidth: 4,
                            separationType: 3,
                            angle: 0,
                            name:"紫霞路",
                            outLaneWidth: 3.5,
                            outLaneNum:3
                        },
                        {
                            name:"广州路",
                            direction: 2,
                            angle:  1.3089969389957472,
                            site: "200,0"
                        },
                        {
                            name:"一路向西",
                            direction: 2,
                            angle:  -3.141592653589793,
                            site: "200,0"
                        }
                    ]
                },
                chan: ""
            };
        },
        components:{
        },
        methods: {
            getChan(chan) {
                this.chan = chan;
                this.chan.init();
            }
        }
    };
</script>

```
>效果图

![渲染图](https://upload-images.jianshu.io/upload_images/1318449-f8ceef7278f83433.png?imageMogr2/auto-orient/strip|imageView2/2/w/520/format/webp "效果图")

---
_Source: https://npm.io/package/les-vue-chan · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._