vue使用echarts畫(huà)組織結(jié)構(gòu)圖的案例-創(chuàng)新互聯(lián)
小編給大家分享一下vue使用echarts畫(huà)組織結(jié)構(gòu)圖的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
vue使用echarts畫(huà)組織結(jié)構(gòu)圖的案例
用div+css是可以實(shí)現(xiàn)的，但是沒(méi)有什么動(dòng)畫(huà)效果，我的css3又很差勁，而且項(xiàng)目中已經(jīng)使用到了折線圖、餅狀圖、柱狀圖之類的圖表，用的還是百度的echarts，所以這個(gè)組織結(jié)構(gòu)圖之類的需求也就用了百度的echarts來(lái)實(shí)現(xiàn)了。
以前用echarts寫(xiě)折線圖、柱狀圖、餅狀圖的較多，它的API還算比較熟悉，但是畫(huà)組織結(jié)構(gòu)這樣的樹(shù)狀圖就很苦逼了，沒(méi)用過(guò)啊，而且設(shè)計(jì)給的樹(shù)狀圖的展示效果跟echarts樹(shù)狀圖的展示效果相去甚遠(yuǎn)，我滴孩，又得一通費(fèi)時(shí)費(fèi)力的研究，設(shè)計(jì)圖如下：
如圖所示，一個(gè)樹(shù)節(jié)點(diǎn)中可能會(huì)有兩種不同的背景色，還有兩種不同的文字顏色，每個(gè)節(jié)點(diǎn)展示的還是圓角矩形。有同學(xué)說(shuō)了，echarts有設(shè)置圓角的API啊，直接設(shè)置不就完事了。我想說(shuō)的是，它是提供的有這樣的API，但是按照正常的套路實(shí)現(xiàn)不了啊。
從圖上還可以看到一個(gè)幾乎實(shí)現(xiàn)不了的效果，就是連接每個(gè)節(jié)點(diǎn)之間的線的拐角處都是直角而不是平滑的，而且echarts沒(méi)有給出可以設(shè)置拐角處是直角的API，只是給了一個(gè)curveness（API的描述是樹(shù)圖邊的曲度），這玩意兒使用了之后，也還是實(shí)現(xiàn)不了的。
從網(wǎng)上查了資料，有人說(shuō)可以修改echarts的源碼，這種解決辦法我不推薦，是因?yàn)樵趘ue或react項(xiàng)目中，echarts是需要通過(guò)安裝在package.json中的，如果是多人并行開(kāi)發(fā)，那么別人安裝的echarts就不是你修改后的echarts，這就是問(wèn)題所在。
最后用echarts畫(huà)出來(lái)的效果還是很不錯(cuò)的，沒(méi)有實(shí)現(xiàn)的就是連接每個(gè)節(jié)點(diǎn)的線的拐角處不是直角，有好的解決辦法的，還望不吝賜教，謝謝！展示一下最終的成果：
說(shuō)了那么多，還是上代碼吧，該代碼是基于vue的，如果要使用在react中，稍微修改一下就可以了。
組件tree.vue：
<template>
<div :class="className" : />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons");
import { debounce } from "@/utils";
export default {
props: {
className: {
type: String,
default: "chart"
},
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: "500px"
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
}
}
},
mounted() {
this.initChart();
//是否需要自適應(yīng)-加了防抖函數(shù)
this.__resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize();
}
}, 100);
window.addEventListener("resize", this.__resizeHandler);
// 監(jiān)聽(tīng)側(cè)邊欄的變化以實(shí)現(xiàn)自適應(yīng)縮放
const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
sidebarElm.addEventListener("transitionend", this.sidebarResizeHandler);
},
beforeDestroy() {
if (!this.chart) {
return;
}
window.removeEventListener("resize", this.__resizeHandler);
this.chart.dispose();
this.chart = null;
const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
sidebarElm.removeEventListener("transitionend", this.sidebarResizeHandler);
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions(this.chartData);
const nodes = this.chart._chartsViews[0]._data._graphicEls;
let allNode = 0;
for(let index = 0; index < nodes.length; index++) {
const node = nodes[index];
if (node === undefined) {
continue
}
allNode++;
}
const height = window.innerHeight;
const width = window.innerWidth - 1000;
const currentHeight = 85 * allNode;
const currentWidth = 220 * allNode;
const newHeight = Math.max(currentHeight, height);
const newWidth = Math.max(currentWidth, width);
const tree_ele = this.$el;
// tree_ele.style.height = newHeight + 'px'; //設(shè)置高度自適應(yīng)
tree_ele.style.width = newWidth + 'px'; //設(shè)置寬度自適應(yīng)
this.chart.resize();
this.chart.on('click', this.chartData.clickCallback); //節(jié)點(diǎn)點(diǎn)擊事件
},
setOptions(data) {
this.chart.setOption({
//提供數(shù)據(jù)視圖、還原、下載的工具
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// dataView : {show: true, readOnly: false},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series: [
{
name: "統(tǒng)一授信視圖",
type: "tree",
orient: "TB", //豎向或水平 TB代表豎向 LR代表水平
top: '10%',
initialTreeDepth: 10, //樹(shù)圖初始展開(kāi)的層級(jí)（深度）
expandAndCollapse: false, //點(diǎn)擊節(jié)點(diǎn)時(shí)不收起子節(jié)點(diǎn)，default: true
symbolSize: [135, 65],
itemStyle: {
color: 'transparent',
borderWidth: 0,
},
lineStyle: {
color: '#D5D5D5',
width: 1,
curveness: 1,
},
data: [data]
}
]
});
},
sidebarResizeHandler(e) {
if (e.propertyName === "width") {
this.__resizeHandler();
}
}
}
};
</script>使用tree.vue的方法：
<template>
<tree :chartData="treeData" />
</template>
<script>
import tree from './tree';
export default {
data() {
return {
treeData: {
label: {
backgroundColor: '#F4F4F4',
borderRadius: [0, 0, 5, 5],
formatter: [
'{first|綜合授信額度}',
'{second|(CR20190912000013)\n獲批金額：100\n幣種：人民幣}',
].join('\n'),
rich: {
first: {
backgroundColor: '#078E34',
color: '#fff',
align: 'center',
width: 135,
height: 30,
borderRadius: [5, 5, 0, 0],
},
second: {
color: '#888',
align: 'center',
lineHeight: 17,
},
}
},
children: [
{
label: {
formatter: [
'{first|渠道額度}',
].join('\n'),
rich: {
first: {
backgroundColor: '#3AC082',
color: '#fff',
align: 'center',
width: 135,
height: 65,
borderRadius: 5,
},
}
},
children: [{
label: {
formatter: [
'{first|保理額度}',
].join('\n'),
rich: {
first: {
backgroundColor: '#3AC082',
color: '#fff',
align: 'center',
width: 135,
height: 65,
borderRadius: 5,
},
}
},
children: [{
label: {
backgroundColor: '#F4F4F4',
borderRadius: [0, 0, 5, 5],
formatter: [
'{first|反向保理}',
'{second|(CR20190912000013)\n獲批金額：100\n幣種：人民幣}',
].join('\n'),
rich: {
first: {
backgroundColor: '#078E34',
color: '#fff',
align: 'center',
width: 135,
height: 30,
borderRadius: [5, 5, 0, 0],
},
second: {
color: '#888',
align: 'center',
lineHeight: 17,
},
}
},
}]
}]
},
{
label: {
formatter: [
'{first|擔(dān)保/(樂(lè))集團(tuán)/其他額度}',
].join('\n'),
rich: {
first: {
backgroundColor: '#3AC082',
color: '#fff',
align: 'center',
width: 135,
height: 65,
borderRadius: 5,
},
}
},
children: [{
label: {
formatter: [
'{first|保理額度}',
].join('\n'),
rich: {
first: {
backgroundColor: '#3AC082',
color: '#fff',
align: 'center',
width: 135,
height: 65,
borderRadius: 5,
},
}
},
children: [{
label: {
backgroundColor: '#F4F4F4',
borderRadius: [0, 0, 5, 5],
formatter: [
'{first|正向保理}',
'{second|(CR20190912000013)\n獲批金額：100\n幣種：人民幣}',
].join('\n'),
rich: {
first: {
backgroundColor: '#B8D87E',
color: '#fff',
align: 'center',
width: 135,
height: 30,
borderRadius: [5, 5, 0, 0],
},
second: {
color: '#888',
align: 'center',
lineHeight: 17,
},
}
},
}]
},
{
label: {
formatter: [
'{first|租賃額度}',
].join('\n'),
rich: {
first: {
backgroundColor: '#3AC082',
color: '#fff',
align: 'center',
width: 135,
height: 65,
borderRadius: 5,
},
}
},
children: [
{
label: {
backgroundColor: '#F4F4F4',
borderRadius: [0, 0, 5, 5],
formatter: [
'{first|車輛租賃}',
'{second|(CR20190912000013)\n獲批金額：100\n幣種：人民幣}',
].join('\n'),
rich: {
first: {
backgroundColor: '#FF6C6A',
color: '#fff',
align: 'center',
width: 135,
height: 30,
borderRadius: [5, 5, 0, 0],
},
second: {
color: '#888',
align: 'center',
lineHeight: 17,
},
}
},
},
]
}]
}
]
}
}
},
components: {
tree,
}
};
</script>看著代碼不多，但是實(shí)現(xiàn)起來(lái)，各種查echarts的API和網(wǎng)上的資料，而且，由于效果圖中一個(gè)節(jié)點(diǎn)處的文字可能會(huì)換行，文字的顏色也不同，同時(shí)有些節(jié)點(diǎn)處的背景色還會(huì)有兩種，以及每個(gè)節(jié)點(diǎn)處顯示的樣式和文字都是不固定的，所以我們可能還要面臨著將接口返回的數(shù)據(jù)再改造處理成我們想要的數(shù)據(jù)的繁瑣問(wèn)題，就如同傳遞給樹(shù)節(jié)點(diǎn)的treeData的格式一樣，相當(dāng)麻煩，如果每個(gè)節(jié)點(diǎn)的樣式都是一樣的，那就好辦多了，如官網(wǎng)的一個(gè)樹(shù)狀圖的例子：https://www.echartsjs.com/examples/zh/editor.html?c=tree-vertical
從echarts的v4.7.0版本開(kāi)始，給配置項(xiàng)series中加入一個(gè)API：edgeShape:'polyline'可實(shí)現(xiàn)樹(shù)形圖表連接每個(gè)節(jié)點(diǎn)的線的拐角處呈直角。
以上是“vue使用echarts畫(huà)組織結(jié)構(gòu)圖的案例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)頁(yè)標(biāo)題：vue使用echarts畫(huà)組織結(jié)構(gòu)圖的案例-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源：http://chinadenli.net/article4/dgpgoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、外貿(mào)建站、品牌網(wǎng)站制作、ChatGPT、搜索引擎優(yōu)化、軟件開(kāi)發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- Python如何批量生成指定尺寸縮略圖-創(chuàng)新互聯(lián)
- Python3網(wǎng)絡(luò)爬蟲(chóng)實(shí)戰(zhàn)-18、Session和Cookies-創(chuàng)新互聯(lián)
- 使用IDEA如何快速完成格式化-創(chuàng)新互聯(lián)
- ssl證書(shū)如何添加-創(chuàng)新互聯(lián)
- rsa算法的python實(shí)現(xiàn)示例-創(chuàng)新互聯(lián)
- 徹底關(guān)閉金山毒霸"輕桌面"-創(chuàng)新互聯(lián)
- 大數(shù)據(jù)培訓(xùn)課程MapReduce編程規(guī)范-創(chuàng)新互聯(lián)
- 網(wǎng)站排名好流量少的原因及解法 2023-02-05
- 影響網(wǎng)站排名穩(wěn)定性的幾個(gè)因素 2021-09-20
- 對(duì)網(wǎng)站排名有影響的因素都有哪些? 2014-10-27
- 新?tīng)I(yíng)銷型企業(yè)網(wǎng)站排名不穩(wěn)定的原因是什么？ 2015-10-17
- 網(wǎng)站排名優(yōu)化需要注意的細(xì)節(jié)! 2013-06-08
- 論文章相關(guān)性對(duì)于網(wǎng)站排名的重要性 2022-07-19
- 什么因素導(dǎo)致網(wǎng)站排名不穩(wěn)定? 2015-05-18
- 網(wǎng)站排名優(yōu)化不僅僅是搜索引擎優(yōu)化，應(yīng)堅(jiān)持用戶導(dǎo)向而不是搜索引擎導(dǎo)向 2022-05-29
- 網(wǎng)站優(yōu)化中影響網(wǎng)站排名的因素有哪些? 2023-04-18
- 提升網(wǎng)站排名和權(quán)重需要從哪些方面進(jìn)行? 2020-09-19
- 導(dǎo)致網(wǎng)站排名上不來(lái)的三大因素 2022-05-31
- 快排對(duì)于網(wǎng)站排名會(huì)沒(méi)有影響嗎？快排的實(shí)現(xiàn)方式有哪幾種吶？ 2016-12-27