Fish-vue-simple NPM

fish-vue-simple

项目描述

一个可以用于vue,原生js的鱼骨图库

项目

前置相关知识

node.js：node.js
npm：npm
vue：vue

在父项目中我们应该如何安装和使用他们呢？

如何安装

使用  npm install fish-vue-simple
or    yarn add fish-vue-simple

页面中如何引用组件

<!-- 第一种方法 -->
<template>
  <div id="asdpp">
  <div class="fishMaps">
    <fish-vue-simple></fish-vue-simple>
  </div>

</template>

<script>
import fishVueSimple from 'fish-simple'

export default {
  components:{
    fishVueSimple
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.fishMaps{
  width: 1000px;
  height: 600px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #666;
border-radius: 4px;
}
</style>

<!-- 第二种方法 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/fish-simple/public/fish.js"></script>
    <style>
      #fish {
        width: 800px;
        height: 300px;
        box-sizing: border-box;
        border: 1px solid #666;
        border-radius: 4px;
      }
    </style>
  </head>

  <body>
    <div id="fish"></div>
    <script>
      new simpleFish({
        id: "fish",
        eachLen:'10',
        click:e=>{
          console.log(e)
        }
      });
    </script>
  </body>
</html>

特殊参数*****

如果该组件只作为vue子组件传入时不需要传入id值，使用第二种方法引入时请传入需要挂载的dom对应的id值

组件传参介绍

鱼骨图点击事件

FishData 推荐

let fishData = [
  {
    id: 1,
    name: "1",
    state: 0,
    children: [
      {
        id: 1 - 1,
        name: "1-1",
        state: 0,
        children: [
          { id: 1 - 1 - 1, name: "1-1-1", state: 0 },
          { id: 1 - 1 - 2, name: "1-1-2", state: 0 },
          { id: 1 - 1 - 3, name: "1-1-3", state: 0 },
        ],
      },
    ],
  },
];