在开发中，有时候会遇到展示一些人物关系，上下级关系等相关需求，使用树状图可以清晰的表达出来

首先看下目录结构

- component- echarts- ec-canvas.js- ec-canvas.json- ec-canvas.wxml- ec-canvas.wxss- echarts.min.js- wx-canvas.js
- pages- treeView- treeView.js- treeView.json- treeView.wxml- treeView.wxss
- app.js
- app.json………………

首先，将echarts 以组件的形式放到项目里来，大家可以去ECharts 的微信小程序版本去下载资源，然后放到项目中来

下面看下页面

treeView.wxml

<view class="box" style="height: 1000rpx;"><echart id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></echart>
</view>

treeView.js


import * as echarts from '../../component/graph/echarts.min.js';
let chart = null;
Page({/*** 页面的初始数据*/data: {data: {id: 1,name: 'A',intro: '这是A',children: [{id: 2,name: 'B',intro: '这是B',},{id: 3,name: 'C',intro: '这是C',children: [{id: 5,name: 'E',intro: '这是E',},{id: 6,name: 'F',intro: '这是F',children: [{id: 7,name: 'G',intro: '这是G',},{id: 8,name: 'H',intro: '这是H',}]}]},{id: 4,name: 'D',intro: '这是D',children: [{id: 9,name: 'K',intro: '这是K',},{id: 10,name: 'L',intro: '这是L',children: [{id: 11,name: 'm',intro: '这是m',},{id: 12,name: 'n',intro: '这是n',}]}]}]}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.initChart()},initChart() {this.ecComponent = this.selectComponent('#mychart-dom-bar')this.ecComponent.init((canvas, width, height) => {let data = this.data.data;let id = data.idchart = 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;})},
})

treeView.json

{"usingComponents": {"echart": "../../component/graph/ec-canvas"},"navigationBarTitleText": "treeView"
}

最终实现效果：

END ！

微信小程序 ———— 使用ECharts实现树状关系图相关推荐

微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...
微信小程序使用Echarts真机调试报错，Echarts占内存过大解决方法
Echarts真机调试报错解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts 1. 前言最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案. 先说下图表选型的问题,如果你 ...
微信小程序使用echarts不显示的问题
前几天在微信小程序中用echarts发现不显示,主要有一下几个可能一.没配置好json,应配置如下 {"usingComponents": {"ec-canvas&qu ...
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题 1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减 ...

微信小程序 ———— 使用ECharts实现树状关系图

treeView.wxml

treeView.js

treeView.json

微信小程序 ———— 使用ECharts实现树状关系图相关推荐

最新文章

热门文章