fish-simple
v0.0.21
Published
一个可以用于vue,原生js的鱼骨图库
Readme
fish-simple
项目描述
一个可以用于vue,原生js的鱼骨图库项目
前置相关知识
在父项目中我们应该如何安装和使用他们呢？
如何安装
使用 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 },
],
},
],
},
];联系地址
朋友们如果有问什么问题或者需求可以到好地方这里来和我联系
更新日志
- 0.0.1 初次完成一个 vue 鱼骨图库
- 0.0.4 完成文档的初级编写
- 0.0.12 解决使用以及引用 bug
- 0.0.14 增加鱼骨图的 click 和 hover 事件，增加可以改变鱼骨图的颜色
- 0.0.15 支持背景颜色的透传，改写鱼骨头的鱼头和鱼尾
- 0.0.16 增加联系方式
- 0.0.17 完成原生 js 的组件的扩展,并且原生 js 文件的暴露
- 0.0.21 丰富readme,改名字