小程序建网络组图拓扑Topo
js
import * as echarts from '../../../../components/ec-canvas/echarts.js';
let chart = null;
const app = getApp();
Page({
data: {
tabs: [
{
key: 'tab1',
title: '合同关系',
},
{
key: 'tab2',
title: '从众关系',
},
],
type: '0',
customer:{},//客户信息
treeData:{}
},
//tab切换
onTabsChange(e) {
const { key } = e.detail
const index = this.data.tabs.map((n) => n.key).indexOf(key)
this.setData({
key,
type: index,
});
var customerNo=this.data.customer.customerNo;
this.getTreeDate(this.data.type,customerNo);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if(options.customer){
this.setData({
customer:JSON.parse(options.customer)
})
}
var type =0;
var customerNo = this.data.customer.customerNo;
console.log("customerNo",customerNo);
this.getTreeDate(type,customerNo);
console.log("tree data:begin ",this.data.treeData);
this.initChart();
},
getTreeDate:function(type,customerNo){
const that = this;
wx.request({
url: app.myGlobal.httpUrl+'crmTreeView/queryData.do?customerNo='+customerNo+'&type='+type,
data:{customerNo:customerNo,type:type},
success:function(res){
console.log(res);
if(res.statusCode==200 && res.data.code=='200' && res.data.value!=null){
that.setData({
treeData:res.data.value
});
console.log("that.data.treeData",that.data.treeData);
that.initChart()
}
},fail:function(res){
wx.showToast({
title: '查询无'+(type==0?'合同':'从众')+'关系',
})
},complete:function(res){
console.log("");
}
})
},
initChart() {
const that = this;
console.log("tree data:after", that.data.treeData);
let data = that.data.treeData;
if(!data){
console.error("没有树的数据",data);
wx.showToast({
title: '没有查询到树的数据',
})
return ;
}
this.ecComponent = this.selectComponent('#mychart-dom-bar')
this.ecComponent.init((canvas, width, height) => {
let data = that.data.treeData;
let id = data.id
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
let option = {
tooltip: {
show: true,
trigger: 'item',
triggerOn: 'click',
formatter: function (params) {
// console.log(params)
return params.data.intro
},
position: function (pos, params, dom, rect, size) {
// console.log(pos)
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
var obj = { top: pos[1] + 3, right: size.viewSize[0] - pos[0] + 8 };
if (params.data.id == id) {
obj = { top: pos[1] + 3, left: pos[0] + 8 };
}
return obj;
}
},
series: [
{
type: 'tree',
data: [data],
top: '5%',
left: '5%',
bottom: '5%',
right: '5%',
symbolSize: 12,
edgeShape: 'polyline', // 直线
orient: 'vertical', //竖着
label: {
position: 'right',
verticalAlign: 'bottom',
align: 'left',
fontSize: 12
},
leaves: {
label: {
position: 'left',
verticalAlign: 'bottom',
align: 'right',
fontSize: 12
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
};
chart.setOption(option);
chart.on('click', function (params) {
console.log(params)
});
return chart;
})
},
})
xml：
<view class="page">
<view class="page_bd">
<wux-tabs wux-class="bordered" controlled current="{{ key }}" bindchange="onTabsChange">
<block wx:for="{{ tabs }}" wx:key="key">
<wux-tab key="{{ item.key }}" title="{{ item.title }}"></wux-tab>
</block>
</wux-tabs>
<view class="hetong" wx:if="{{type==0}}">
<view class="box" style="height: 1000rpx;border:none">
<echart id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ treeData }}"></echart>
</view>
</view>
<view class="conghzong" wx:if="{{type==1}}">
<view class="box" style="height: 1000rpx;border:0">
<echart id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ treeData }}"></echart>
</view>
</view>
</view>
</view>
josn：
{
"navigationBarTitleText": "客户关系图",
"usingComponents": {
"echart": "/components/ec-canvas/ec-canvas",
"wux-tabs": "/components/wux/tabs/index",
"wux-tab": "/components/wux/tab/index"
}
}
---
wcss
/* pages/admin/client/treeView/treeView.wxss */
/* .page_bd .wux-tabs {
position: fixed;
bottom: 10rpx;
left: 0;
} */
