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;
} */