使用 auto-drawing 画一个鱼骨图

auto-drawing 官方文档

基于 vue 环境

安装

yarn add  auto-drawing

代码

fishbone.vue

<template><div class="container"><div ref="mainElementRef" class="main-element" /></div>
</template><script lang="ts" setup>// 鱼骨图import { ElMessage } from 'element-plus'import {onMounted,onBeforeUnmount,shallowReactive,ref,reactive} from 'vue'import type { ZRenderType, ZRenderGroup, ShapeCoreType } from 'auto-drawing'import { createCanvas, createGroup, renderCanvas } from 'auto-drawing'import type { Params } from './utils'import { getCircle, getLine, getText } from './utils'interface IState {zr: Nullable<ZRenderType>group: Nullable<ZRenderGroup>clickGroup: Nullable<ZRenderGroup>}type Direction = 'left' | 'right'const props = defineProps({/*** 画布宽*/width: {type: Number,default: 300},/*** 画布高*/height: {type: Number,default: 300}})const state = shallowReactive<IState>({zr: null,group: null,clickGroup: null})const mainElementRef = ref<any>(null)// 基本配置const baseOptions = { x: props.width / 2, y: props.height / 2 }onMounted(() => {state.zr = createCanvas(mainElementRef.value as HTMLDivElement) as ZRenderTypestate.group = createGroup(baseOptions) as ZRenderGroupstate.clickGroup = createGroup(baseOptions) as ZRenderGroupstate.zr.setBackgroundColor('#fff')// 原数据const originData: string[] = [...new Array(10)].map((_, index) =>String(index))// 画布两边留白const gutter = 40// 鱼刺往后斜的距离const angleLength = props.width / 20// 鱼刺方向const direction: Direction = 'left'// 鱼刺长度const fishboneLength = (props.height / 2 - gutter) / 2// 主轴的基本坐标const base = props.width / 2 - gutter// 主轴数据const main = originData.slice(0, 2)// 鱼刺数据const body = originData.slice(2)// 主轴上面鱼刺数据const bodyTop = body.slice(0, Math.ceil(body.length / 2))// 主轴下面鱼刺数据const bodyBottom = body.slice(Math.ceil(body.length / 2))// 主抽的点数量const pointCount = Math.max(bodyTop.length, bodyBottom.length)// 主抽每个点之间的间距const pointStep = (props.width - gutter * 2) / (pointCount + 1)// 生成主轴点数据const point = [...new Array(pointCount)].map((item, index) => {return [-base + (index + 1) * pointStep, 0]})// 生成鱼刺方法const getData = (item: string, index: number, type: string) => {const mark = type === 'top' ? -1 : 1const directionMark = direction === 'left' ? -1 : 1const [baseX, baseY] = point[index]const params: Params = {start: point[index],end: [baseX + angleLength * directionMark, fishboneLength * mark],title: item,pointType: 'basicPoint',tag: 'start'}// 生成主轴基点圆图形数据const baseCircle = getCircle(baseX, baseY, params)const [x1, y1] = baseCircle.params.start as number[]const [x2, y2] = baseCircle.params.end as number[]// 生成鱼刺圆点图形数据const bodyTop = getCircle(x2, y2, {...baseCircle.params,pointType: 'endpoint',tag: 'end'})// 生成鱼刺直线图形数据const line = getLine(x1, y1, x2, y2)// 生成鱼刺文字图形数据const offset = mark === -1 ? -24 : 14const text = getText(x2 - 10, y2 + offset, baseCircle.params.title)return { type: 'group', data: [baseCircle, bodyTop, line, text], params }}/** 上鱼刺数据处理 */const bodyTopData = bodyTop.map((item, index) =>getData(item, index, 'top'))/** 下鱼刺数据处理 */const bodyBottomData = bodyBottom.map((item, index) =>getData(item, index, 'bottom'))/** 主抽数据处理 */const mainCircleData = main.map((item, index) => {const cx = index === 0 ? -base : baseconst cy = 0const title = itemconst params: Params = {title: item,cx,cy,pointType: 'endpoint',point: [cx, cy]}// 主抽圆点图数据const circle = getCircle(cx, 0, params)// 主抽文字图数据const x = cx - 6const y = cy - 24const text = getText(x, y, title)return { type: 'group', data: [circle, text], params }})const mainLineMap = mainCircleData.map(item => item.params.point as number[])const [[x1, y1], [x2, y2]] = mainLineMap// 主抽直线图数据const mainLineData = getLine(x1, y1, x2, y2)// 主抽整体图数据const mainData = [...mainCircleData, mainLineData]// 所有数据const data = [...mainData,...bodyTopData,...bodyBottomData] as ShapeCoreType[]renderCanvas(state.zr, state.group, data, { scale: true, translate: true })renderCanvas(state.zr, state.clickGroup, [], {scale: true,translate: true})state.zr.on('click', (e: any) => {console.log(e?.target)const { shape, type } = e?.target || {}const params = (e?.target?.params as Params) || {}if (!shape || type !== 'circle' || params.pointType !== 'endpoint') returnconst data: ShapeCoreType = {type: 'circle',...shape,stroke: 'red',fill: 'red',zlevel: 2}// 移除之前的图形state.clickGroup?.removeAll()renderCanvas(state.zr as ZRenderType,state.clickGroup as ZRenderGroup,[data],{scale: true,translate: true})setTimeout(() => {ElMessage.success('点了我：' + params.title)})})})onBeforeUnmount(() => {// 销毁画布state.zr && state.zr.dispose()})const containerCSS = reactive({width: props.width + 'px',height: props.height + 'px'})
</script><style lang="scss" scoped>.container {height: v-bind('containerCSS.height');width: v-bind('containerCSS.width');overflow: hidden;padding: 0;.main-element {padding: 0;}}
</style>

utils.ts

export type Params = {/*** 开始坐标*/start?: number[]/*** 结束坐标*/end?: number[]/*** 点坐标*/point?: number[]/*** 标题*/title: string/*** 圆点的类型  basicPoint：基点 不可点击   endpoint：端点 可点击*/pointType: 'basicPoint' | 'endpoint' | ''/*** 圆的圆心x坐标*/cx?: number/*** 圆的圆心y坐标*/cy?: number/*** 当前图形标记*/tag?: string
}/*** 生成圆* @param cx* @param cy* @param params* @returns*/
export const getCircle = (cx: number,cy: number,params: Params = { title: '', pointType: '' }
) => ({type: 'circle',cx: cx,cy: cy,r: 8,fill: '#fa8423',stroke: '#fa8423',zlevel: 1,params: { ...params }
})/*** 生成直线* @param x1* @param y1* @param x2* @param y2* @returns*/
export const getLine = (x1: number, y1: number, x2: number, y2: number) => ({type: 'line',x1,y1,x2,y2,stroke: '#000',fill: '#000'
})/*** 生成文字* @param x* @param y* @param text* @returns*/
export const getText = (x: number, y: number, text: string) => ({type: 'text',x,y,text: text,fontSize: 14,fontWeight: 400,stroke: '#000',fill: '#000',zlevel: 10
})

效果

https://l-x-f.github.io/auto-drawing-doc/example/example.html#%E9%B1%BC%E9%AA%A8%E5%9B%BE

官方文档

官方文档 https://l-x-f.github.io/auto-drawing-doc/

使用 auto-drawing 画一个鱼骨图相关推荐

请问怎么用python画一个轮廓图，，例如中国地图这种，注意是轮廓图，求大佬指点
请问怎么用python画一个轮廓图,,例如中国地图这种,注意是轮廓图例如这个:
使用 auto-drawing 画一个户型图
使用 auto-drawing 画一个户型图 auto-drawing 官方文档基于 vue 环境安装 yarn add auto-drawing 代码 room.vue <template ...
如何用Apache POI操作Excel文件-----如何用Apache POI 画一个离散图
有的时候,我们需要Excel中的数据,通过一个图画,可视化的表现出来. 那么这个时候,应该如何做呢?现在就借花献佛,以Apache POI自己提供的一个例子为例,给大家演示一下POI的API 如何画图 ...
使用canvas和JavaScript画一个阴阳图
主要函数: 函数名用法说明 arc() Canvas.arc(0,0,20,0,2*Math.PI,false);arc参数:坐标点,半径,起始角度,结束角度,逆时针(默认). 画圆 stroke ...
linux画鱼骨图插件,鱼骨图绘制方法：超实用的鱼骨图制作软件
鱼骨图又叫石川图或因果图,它可以帮助你分析一个问题的所有可能原因.说到绘制鱼骨图的工具,有人用办公常用的Word,也有人用Visio.本文将为您推荐一款无需任何绘图功底,也可以轻松上手的鱼骨图绘制软件 ...
linux画鱼骨图插件,还在用word画鱼骨图？教你一款超实用的鱼骨图绘制软件
鱼骨图又叫石川图或因果图,它可以帮助你分析一个问题的所有可能原因.说到绘制鱼骨图的工具,有人用办公常用的Word,也有人用Visio.本文将为您推荐一款无需任何绘图功底,也可以轻松上手的鱼骨图绘制软件 ...
鱼骨图分析法实际案例_让你头脑更精明的十种思考法：鱼骨图
鱼骨图又名特性因素图是由日本管理大师石川馨先生所发展出来的,故又名石川图.鱼骨图是一种发现问题"根本原因"的方法,它也可以称之为"因果图".鱼骨图原本用于质量管 ...
python简单代码画曲线图教程-用Python画论文折线图、曲线图？几个代码模板轻松搞定！...
前言这几天在搞论文图,唉说实话抠图这种东西真能逼死人.坐在电脑前抠上一天越看越丑,最后把自己丑哭了-- 到了画折线图分析的时候,在想用哪些工具的时候.首先否决了excel,读书人的事,怎么能用exc ...
python画折线图代码-用Python画论文折线图、曲线图？几个代码模板轻松搞定！
前言这几天在搞论文图,唉说实话抠图这种东西真能逼死人.坐在电脑前抠上一天越看越丑,最后把自己丑哭了-- 到了画折线图分析的时候,在想用哪些工具的时候.首先否决了excel,读书人的事,怎么能用exc ...

使用 auto-drawing 画一个鱼骨图

使用 auto-drawing 画一个鱼骨图

安装

代码

效果

官方文档

使用 auto-drawing 画一个鱼骨图相关推荐

最新文章

热门文章