ECHART思维导图插入图片

默认是思维导图的都是文字

myChart.showLoading();var data = {"name": "flare","children": [{"name": "data","children": [{"name": "converters","children": [{"name": "Converters", "value": 721},{"name": "DelimitedTextConverter", "value": 4294}]},{"name": "DataUtil","value": 3322}]},{"name": "display","children": [{"name": "DirtySprite", "value": 8833},{"name": "LineSprite", "value": 1732},{"name": "RectSprite", "value": 3623}]},{"name": "flex","children": [{"name": "FlareVis", "value": 4116}]},{"name": "query","children": [{"name": "AggregateExpression", "value": 1616},{"name": "And", "value": 1027},{"name": "Arithmetic", "value": 3891},{"name": "Average", "value": 891},{"name": "BinaryExpression", "value": 2893},{"name": "Comparison", "value": 5103},{"name": "CompositeExpression", "value": 3677},{"name": "Count", "value": 781},{"name": "DateUtil", "value": 4141},{"name": "Distinct", "value": 933},{"name": "Expression", "value": 5130},{"name": "ExpressionIterator", "value": 3617},{"name": "Fn", "value": 3240},{"name": "If", "value": 2732},{"name": "IsA", "value": 2039},{"name": "Literal", "value": 1214},{"name": "Match", "value": 3748},{"name": "Maximum", "value": 843},{"name": "methods","children": [{"name": "add", "value": 593},{"name": "and", "value": 330},{"name": "average", "value": 287},{"name": "count", "value": 277},{"name": "distinct", "value": 292},{"name": "div", "value": 595},{"name": "eq", "value": 594},{"name": "fn", "value": 460},{"name": "gt", "value": 603},{"name": "gte", "value": 625},{"name": "iff", "value": 748},{"name": "isa", "value": 461},{"name": "lt", "value": 597},{"name": "lte", "value": 619},{"name": "max", "value": 283},{"name": "min", "value": 283},{"name": "mod", "value": 591},{"name": "mul", "value": 603},{"name": "neq", "value": 599},{"name": "not", "value": 386},{"name": "or", "value": 323},{"name": "orderby", "value": 307},{"name": "range", "value": 772},{"name": "select", "value": 296},{"name": "stddev", "value": 363},{"name": "sub", "value": 600},{"name": "sum", "value": 280},{"name": "update", "value": 307},{"name": "variance", "value": 335},{"name": "where", "value": 299},{"name": "xor", "value": 354},{"name": "_", "value": 264}]},{"name": "Minimum", "value": 843},{"name": "Not", "value": 1554},{"name": "Or", "value": 970},{"name": "Query", "value": 13896},{"name": "Range", "value": 1594},{"name": "StringUtil", "value": 4130},{"name": "Sum", "value": 791},{"name": "Variable", "value": 1124},{"name": "Variance", "value": 1876},{"name": "Xor", "value": 1101}]},{"name": "scale","children": [{"name": "IScaleMap", "value": 2105},{"name": "LinearScale", "value": 1316},{"name": "LogScale", "value": 3151},{"name": "OrdinalScale", "value": 3770},{"name": "QuantileScale", "value": 2435},{"name": "QuantitativeScale", "value": 4839},{"name": "RootScale", "value": 1756},{"name": "Scale", "value": 4268},{"name": "ScaleType", "value": 1821},{"name": "TimeScale", "value": 5833}]}]
};var data2 = {"name": "flare","children": [{"name": "flex","children": [{"name": "FlareVis", "value": 4116}]},{"name": "scale","children": [{"name": "IScaleMap", "value": 2105},{"name": "LinearScale", "value": 1316},{"name": "LogScale", "value": 3151},{"name": "OrdinalScale", "value": 3770},{"name": "QuantileScale", "value": 2435},{"name": "QuantitativeScale", "value": 4839},{"name": "RootScale", "value": 1756},{"name": "Scale", "value": 4268},{"name": "ScaleType", "value": 1821},{"name": "TimeScale", "value": 5833}]},{"name": "display","children": [{"name": "DirtySprite", "value": 8833}]}]
};myChart.hideLoading();myChart.setOption(option = {tooltip: {trigger: 'item',triggerOn: 'mousemove'},legend: {top: '2%',left: '3%',orient: 'vertical',data: [{name: 'tree1',icon: 'rectangle'},{name: 'tree2',icon: 'rectangle'}],borderColor: '#c23531'},series:[{type: 'tree',name: 'tree1',data: [data],top: '5%',left: '7%',bottom: '2%',right: '60%',symbolSize: 7,label: {position: 'left',verticalAlign: 'middle',align: 'right'},leaves: {label: {position: 'right',verticalAlign: 'middle',align: 'left'}},expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750},{type: 'tree',name: 'tree2',data: [data2],top: '20%',left: '60%',bottom: '22%',right: '18%',symbolSize: 7,label: {position: 'left',verticalAlign: 'middle',align: 'right'},leaves: {label: {position: 'right',verticalAlign: 'middle',align: 'left'}},expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750}]
});

但有时候我们不想要这个小红圈或者其他默认的，要换别的图片，那我们可以用到 symbol这个属性，如果放在options就是所有的树状图都用，放在单个的话就会替换对应数据对应的图标，格式为 image:// + 图片格式 支持本地路径，base64图片和网络图片，也是svg图片格式为 path:// + 图片路劲

加在 series的symbol会把所有的图片都替换掉

加在data的就是在那个数据对应的图标改变，而其他的还是默认的，不会变化

myChart.showLoading();var data = {"name": "flare","children": [{"name": "data","children": [{"name": "converters","children": [{"name": "Converters", "value": 721},{"name": "DelimitedTextConverter", "value": 4294}]},{"name": "DataUtil","value": 3322}]},{"name": "display","children": [{"name": "DirtySprite", "value": 8833},{"name": "LineSprite", "value": 1732},{"name": "RectSprite", "value": 3623}]},{"name": "flex","children": [{"name": "FlareVis", "value": 4116}]},{"name": "query","children": [{"name": "AggregateExpression", "value": 1616},{"name": "And", "value": 1027},{"name": "Arithmetic", "value": 3891},{"name": "Average", "value": 891},{"name": "BinaryExpression", "value": 2893},{"name": "Comparison", "value": 5103},{"name": "CompositeExpression", "value": 3677},{"name": "Count", "value": 781},{"name": "DateUtil", "value": 4141},{"name": "Distinct", "value": 933},{"name": "Expression", "value": 5130},{"name": "ExpressionIterator", "value": 3617},{"name": "Fn", "value": 3240},{"name": "If", "value": 2732},{"name": "IsA", "value": 2039},{"name": "Literal", "value": 1214},{"name": "Match", "value": 3748},{"name": "Maximum", "value": 843},{"name": "methods","children": [{"name": "add", "value": 593},{"name": "and", "value": 330},{"name": "average", "value": 287},{"name": "count", "value": 277},{"name": "distinct", "value": 292},{"name": "div", "value": 595},{"name": "eq", "value": 594},{"name": "fn", "value": 460},{"name": "gt", "value": 603},{"name": "gte", "value": 625},{"name": "iff", "value": 748},{"name": "isa", "value": 461},{"name": "lt", "value": 597},{"name": "lte", "value": 619},{"name": "max", "value": 283},{"name": "min", "value": 283},{"name": "mod", "value": 591},{"name": "mul", "value": 603},{"name": "neq", "value": 599},{"name": "not", "value": 386},{"name": "or", "value": 323},{"name": "orderby", "value": 307},{"name": "range", "value": 772},{"name": "select", "value": 296},{"name": "stddev", "value": 363},{"name": "sub", "value": 600},{"name": "sum", "value": 280},{"name": "update", "value": 307},{"name": "variance", "value": 335},{"name": "where", "value": 299},{"name": "xor", "value": 354},{"name": "_", "value": 264}]},{"name": "Minimum", "value": 843},{"name": "Not", "value": 1554},{"name": "Or", "value": 970},{"name": "Query", "value": 13896},{"name": "Range", "value": 1594},{"name": "StringUtil", "value": 4130},{"name": "Sum", "value": 791},{"name": "Variable", "value": 1124},{"name": "Variance", "value": 1876},{"name": "Xor", "value": 1101}]},{"name": "scale","children": [{"name": "IScaleMap", "value": 2105},{"name": "LinearScale", "value": 1316},{"name": "LogScale", "value": 3151},{"name": "OrdinalScale", "value": 3770},{"name": "QuantileScale", "value": 2435},{"name": "QuantitativeScale", "value": 4839},{"name": "RootScale", "value": 1756},{"name": "Scale", "value": 4268},{"name": "ScaleType", "value": 1821},{"name": "TimeScale", "value": 5833}]}]
};var data2 = {"name": "flare","children": [{"name": "flex","children": [{"name": "FlareVis", "value": 4116,symbol:"image://https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg", }]},{"name": "scale","children": [{"name": "IScaleMap", "value": 2105},{"name": "LinearScale", "value": 1316},{"name": "LogScale", "value": 3151},{"name": "OrdinalScale", "value": 3770},{"name": "QuantileScale", "value": 2435},{"name": "QuantitativeScale", "value": 4839},{"name": "RootScale", "value": 1756},{"name": "Scale", "value": 4268},{"name": "ScaleType", "value": 1821},{"name": "TimeScale", "value": 5833}]},{"name": "display","children": [{"name": "DirtySprite", "value": 8833}]}]
};myChart.hideLoading();myChart.setOption(option = {tooltip: {trigger: 'item',triggerOn: 'mousemove'},legend: {top: '2%',left: '3%',orient: 'vertical',data: [{name: 'tree1',icon: 'rectangle'},{name: 'tree2',icon: 'rectangle'}],borderColor: '#c23531'},series:[{type: 'tree',name: 'tree1',data: [data],top: '5%',left: '7%',bottom: '2%',right: '60%',symbolSize: 10,symbol:"image://https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg", label: {position: 'left',verticalAlign: 'middle',align: 'right'},leaves: {label: {position: 'right',verticalAlign: 'middle',align: 'left'}},expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750},{type: 'tree',name: 'tree2',data: [data2],top: '20%',left: '60%',bottom: '22%',right: '18%',symbolSize: 7,label: {position: 'left',verticalAlign: 'middle',align: 'right'},leaves: {label: {position: 'right',verticalAlign: 'middle',align: 'left'}},expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750}]
});

ECHART思维导图插入图片相关推荐

电脑常用工具(阅读代码、文件搜索、思维导图、图片处理、文件比较、流程图、桌面效率工具)
目录 1.阅读代码--Notepad++ 2.编写代码--Source Insight 3.代码便捷器--sublime text3 4.本地搜索文件--Everything 5.思维导图软件--Xm ...
ProcessOn思维导图插入LaTeX数学公式初体验
上周ProcessOn上线的新功能深得我心,思维导图和思维笔记终于支持插入LaTeX数学公式了,看到官网推送更新手册的第一时间我就去体验了,插入效果和使用体验还是很强的,个人感觉算是所有支持数学公式里 ...
实用技能篇---思维导图和图片格式转换
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.如何转换图片格式? 1.在属性中修改 2.在浏览器中转换 3.在Word中转换二.如何制作思维导图 1.推荐网址 ...
思维导图iMindMap可以插入哪些附件？
iMindMap(Windows系统)不仅拥有灵活的排版功能,而且还允许用户插入多种附件,丰富思维导图的内容.用户可以为思维导图添加图片.网址.录音等文件,让导图更显生动性.实用性. 将图片.录音等文 ...
电子计算机的思维导图,电脑上最好用的6款，思维导图软件测评
我经常会把自己绘制的思维导图发在一些媒体网站上,于是不断有人会私信如何创作思维导图?哪一款思维导图好用?想系统学习下思维导图,有推荐的书或者课程吗?如何利用思维导图记忆文科?有什么好用又免费的思维导图 ...
如何用模板制作思维导图
怎么用模板制作思维导图?我们都知道思维导图的优点有很多,不过大部分人都是为了提高工作和学习的效率而去使用思维导图的.所以制作思维导图的方法和速度也成了重中之重,而用模板来制作思维导图会比手绘要快的多, ...
工具类 - 思维导图
<> 思维导图简介: 百度百科思维导入的定义思维导图. 在我们的工作和生活中可以经常使用思维导图, 有时候会有一些意想不到的成果. 思维导图的分类: 全文思维导图 : 只有文字 ...
element tab如何居中_如何用思维导图提高工作效率
如何用思维导图提高工作效率 Hello, 大家好,我是Jack,今天给大家分享一篇如何用思维导图提高工作效率的文章.上次在微信群里讨论了关于思维导图的事情,当时气氛还是蛮热烈的,当时我说写下思维导图使 ...
跟我一起用思维导图复习中小学课本名著
语文是中小阶段必考的重点科目,由于知识点庞杂,很多同学在语文成绩上始终提不上来.今天小编给大家科普一下如何高效的利用思维导图工具来复习课文中的名著.并汇总了常考的名著知识点,节省大家的复习时间. 用思 ...

ECHART思维导图插入图片

ECHART思维导图插入图片相关推荐

最新文章

热门文章