html树状图怎么搜索节点,echarts2.* tree树形图节点点击事件和节点点击图标更改...
做项目用到echarts2.2.7版本做树图,遇到点击树图节点“更改样式”(并不能更改样式,只能换图标/图片),百度、谷歌搜索后均没找到解决方案。后来苦苦探索,终于找到解决入口,特地分享给大家以供参考,吐槽一下echarts的api真的没有highcharts人性化和易找。//贴出关键点!
function clickFun(param) {
console.log(param);
param.data.symbol = 'p_w_picpath://http://www.viastreaming.com/p_w_picpaths/apple_logo2.png';
//远程加载图片最好先预加载过来,避免下载图标延迟。 /**var oImg = new Image();oImg.src = img;**/
console.log(param.data.cusField);
chart.refresh(); //一定要refresh,否则不起作用
}
以下是完整代码,里面有备注:html>
echarts demo
var chart;
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(['echarts', 'echarts/chart/tree'], function(ec) {
chart = ec.init($("#main")[0]);
chart.setOption(option);
var ecConfig = require('echarts/config');
chart.on(ecConfig.EVENT.CLICK, clickFun); //也可以注册其他时间 hover 、mouseout等
})
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}:{c}',
hideDelay: 0 // chart.refresh();刷新时会维持当时图表的所有状态,所以设置隐藏延迟为0,否则在快速选择另一个节点时(尤其是数据比较多时)导致无法显示选择中的tooltip
//无法完全避免但是很大减轻了副作用
},
series: [{
name: '树图',
type: 'tree',
orient: 'horizontal', // vertical horizontal
rootLocation: { x: '10%', y: '60%' }, // 根节点位置 {x: 'center',y: 10}
nodePadding: 20, //智能定义全局最小节点间距,不能定义层级节点间距,有点搓。
symbol: 'circle',
symbolSize: 40,
roam: true,
data: [{
name: '手机',
value: 6,
symbolSize: [90, 70],
cusField: 'category',
symbol: 'p_w_picpath://http://www.iconpng.com/png/ecommerce-business/iphone.png',
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
formatter: '{b}'
}
}
},
children: [{
name: '小\n米', //由于label的formatter存在bug,所以无法通过html进行格式化,如果要换行要用\n
value: 4,
symbol: 'p_w_picpath://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg',
symbolSize: [60, 60],
cusField: 'product',
children: [{
name: '小米11',
symbol: 'circle',
cusField: 'product', //自定义属性,演示用,实际开发中可以在后台建模产生series整个data时增加而外属性以供使用
itemStyle: {
normal: {
label: {
show: true,
position: 'bottom',
formatter: '{b}--->>>'
}
}
}
}],
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
formatter: '{b}--->>>' //有bug,formatter不起作用,这个bug看网友求助已经很久了,但是后面更新的版本一直没有解决
}
}
}
},
{
name: '苹果',
symbol: 'p_w_picpath://http://www.viastreaming.com/p_w_picpaths/apple_logo2.png',
symbolSize: [60, 60],
cusField: 'product',
itemStyle: {
normal: {
label: {
show: false
}
}
},
value: 4
}
]
}]
}]
};
//关键点!
function clickFun(param) {
console.log(param);
param.data.symbol = 'p_w_picpath://http://www.viastreaming.com/p_w_picpaths/apple_logo2.png';
//远程加载图片最好先预加载过来,避免下载图标延迟。 var oImg = new Image();oImg.src = img;
console.log(param.data.cusField);
chart.refresh(); //一定要refresh,否则不起作用
}
上面是我项目实现截图,截图软件有点搓,部分线条没了。上面实现的是hover 和click时换成苹果图标。(目前已经去掉hover事件了,原因见下方)
注意:对于chart.refresh()操作尽量不要在hover和mouseout事件里用!否则会导致不停的刷新(只要鼠标在图标上稍微动一下会不断的触发hover),会有一种卡顿的感觉,而且会导致tooltip不能及时出现或被卡在一个节点不消失。(本想设置在同一节点hover没有mouseout之前只触发一次,但是很奇怪第一次hover时鼠标没有离开节点也会触发mouseout一次,比较难控制)。
html树状图怎么搜索节点,echarts2.* tree树形图节点点击事件和节点点击图标更改...相关推荐
- python生成环形树状图-networkx
一,项目简介: 利用networkx官方中的CircularTree案例,修改节点的名称,利用唐代诗人姓名与其诗作中的关键字生成的边,形成以诗人关键字为代表的三层环形树状图. 附上原官方的Circul ...
- MatLab中画树状图方法treeplot(nodes)中描述树结构的矢量nodes的构造
按要求需要用matlab画树状图,在网络上找到两句代码: nodes = [0 1 2 2 4 4 4 1 8 8 10 10]; treeplot(nodes); 画出了如下图: 其中矢量nodes ...
- bzoj 4871: [Shoi2017]摧毁“树状图”
4871: [Shoi2017]摧毁"树状图" Time Limit: 25 Sec Memory Limit: 512 MB Submit: 53 Solved: 9 [Su ...
- 一款很好用的JQuery dtree树状图插件(一)
一款很好用的JQuery dtree树状图插件 树状图 -dtree 由于他的节点设置思想不错,使连接数据库的数据库设计比较方便. 下载dtree资源包,引用一下dtree.css和dtree.js ...
- 计算机硬件结构中负责识别,计算机硬件基本结构树状图
<计算机硬件基本结构树状图>由会员分享,可在线阅读,更多相关<计算机硬件基本结构树状图(2页珍藏版)>请在人人文库网上搜索. 1.计算机硬件基本结构计算机的5个基本组成部分:运 ...
- html树状图右侧_树状图及制作方法(Excel 2016/Excel 2013)
↑↑↑关注ExcelEasy,让Excel更简单 树状图是一种展示层次结构数据的图表,可以很好的揭示各类别数据的比例关系及类别内数据的组成结构.今天为大家详细介绍一下树状图的制作方法 树状图在Exce ...
- Linux 命令之 tree -- 以树状图列出目录的内容/查看目录内容
文章目录 一.命令介绍 二.常用选项 三.命令示例 (一)按树形结构显示当前目录下的内容 (二)按树状图显示当前目录下的所有目录名称而非文件 (三)列出指定目录下的第一层级的文件和目录名称 (四)不显 ...
- 数据可视化【十一】树状图
Constructing a node-link tree visualization 首先将节点之间的连线画出来. 使用json函数读取文件以后,使用hierarchy等函数得到连线的数组,然后绑定 ...
- d3.js(v5.7)树状图
一.新建画布 二.数据处理 三.绘制连接线 图示: 四.绘制节点.文字 图示: 五.总结 path元素:其实就是定义了绘图的坐标点,从哪开始,移动到哪,怎样移动(命令) 具体可百度(或许以后我会总结一 ...
- 如何在 LaTeX 中画一个树状图(使用tikz和tikz-qtree包中的宏绘制树、森林、二叉树)
简单介绍 在计算机相关的文章中,树状图是最常见的几种图之一.树状图经常被用来用来演示结构.层次.算法等内容.而二叉树是最基础的树状图之一,掌握二叉树的画法就可以用图像展示一些算法或者数据结构了. 在 ...
最新文章
- 初始化组合框CComboBox
- 实验室机器OracleXE客户端连接远程Oracle服务器
- php fastcgi,配置apache以fastcgi运行php
- turtle fillcolor_使Python中的turtle模块画图两只小羊
- linux info文件夹,详解Linux系统中查询文档的man和info命令
- oracle能不能改外键属性,CSS_小议Oracle外键约束修改行为(五), Oracle的外键用来限制子表 - phpStudy...
- ScrollView和listview的冲突问题,关于宽度,和滑动
- 【信号处理】Python实现BPSK、QPSK、8PSK、8QAM、16QAM、64QAM的调制和解调
- 英语中与数字有关的表达方式
- win7低版本升级到win7旗舰版的方法
- java容器doc_java容器组件
- Word自动序号转化为文本格式
- LMG3422R030RQZR 600V GaN晶体管LMG3425R030RQZR电路图
- Microsoft Dynamics AX2012 R2吐槽系列(4)
- Python+Django+Mysql实现在线电影推荐系统 基于用户、项目的协同过滤推荐在线电影系统 代码实现 源代码下载
- c语言题查询答案,C语言习题级答案.docx
- springboot启动源码分析3-环境配置
- 谷歌计算机围棋程序,阿尔法狗教你下棋 谷歌上线AlphaGo围棋教学工具
- R-forestplot包| HR结果绘制森林图
- 介绍一个视频互动直播后台的开源项目