【Echarts】渐变色桑基图

echarts 渐变色桑基图

let dataList8 = {total: "123",list: [[{target:'数据源-WAF'},{target:'数据源-IPS 1'},{target:'数据源-IPS 2'},{target:'数据源-天眼'},{target:'数据源-睿眼'},{target:'数据源-APT'},{target:'数据源-DLP'},{target:'数据源-科莱分析仪'},{target:'数据源-DDoS'},],[{source:'数据源-WAF', target: '事件类型01', info: '浙江公司电力市场技术支撑平台外网应用1号虚拟机', value: 1},{source:'数据源-IPS 1', target: '事件类型02', info: '电力生产环境应用服务器2号虚拟机', value: 1},{source:'数据源-IPS 2', target: '事件类型03', info: '全国统一电力市场技术支撑2.0应用服务器1号虚拟机', value: 1},{source:'数据源-天眼', target: '事件类型04', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},{source:'数据源-睿眼', target: '事件类型05', info: '浙江公司电力市场技术支撑平台外网应用1号虚拟机', value: 1},{source:'数据源-APT', target: '事件类型06', info: '电力生产环境应用服务器2号虚拟机', value: 1},{source:'数据源-DLP', target: '事件类型07', info: '全国统一电力市场技术支撑2.0应用服务器1号虚拟机', value: 1},{source:'数据源-科莱分析仪', target: '事件类型08', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},{source:'数据源-DDoS', target: '事件类型09', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},{source:'数据源-科莱分析仪', target: '事件类型10', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},{source:'数据源-DDoS', target: '事件类型11', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},{source:'数据源-科莱分析仪', target: '事件类型12', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},],[{target:'处置完成', source: '事件类型01', info: '浙江公司电力市场技术支撑平台外网应用1号虚拟机', value: 1},{target:'处置完成', source: '事件类型02', info: '电力生产环境应用服务器2号虚拟机', value: 1},{target:'处置中', source: '事件类型03', info: '全国统一电力市场技术支撑2.0应用服务器1号虚拟机', value: 1},{target:'处置中', source: '事件类型04', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},{target:'待处置', source: '事件类型05', info: '浙江公司电力市场技术支撑平台外网应用1号虚拟机', value: 1},{target:'待处置', source: '事件类型06', info: '电力生产环境应用服务器2号虚拟机', value: 1},{target:'待处置', source: '事件类型07', info: '全国统一电力市场技术支撑2.0应用服务器1号虚拟机', value: 1},{target:'待处置', source: '事件类型08', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},{target:'处置中', source: '事件类型09', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},{target:'处置中', source: '事件类型10', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},{target:'处置完成', source: '事件类型11', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},{target:'待处置', source: '事件类型12', info: '全国统一电力市场技术支撑2.0应用服务器2号虚拟机', value: 1},],],};const nameList = []const List = []// nameList第三级const List1 = [{name: '处置完成', depth: 2, itemStyle: {color: '#098B3D'}, label: {position: "inside", formatter: function(value) {return value.name.split('').join('\n')}}},{name: '处置中', depth: 2, itemStyle: {color: '#0085FF'}, label: {position: "inside", formatter: function(value) {return value.name.split('').join('\n')}}},{name: '待处置', depth: 2, itemStyle: {color: '#FF5C00'}, label: {position: "inside", formatter: function(value) {return value.name.split('').join('\n')}}}]List1.forEach(item => {nameList.push(item)})const color_chart = {label: ['#CBA3FF', '#BBE7FF', '#07D2FF', '#00FFFF', '#00FFD1', '#00FF57'],color_1: ['#0AFFE2'],color_2: ['#0085FF', '#2094FF', '#00D1FF', '#6DF2FB', '#2AB2FF', '#0076E2', '#0047FF', '#00D1FF', '#6DF2FB', '#2AB2FF', '#0076E2', '#0047FF'],text_color:['#D5FFF0', '#BCE1F5', '#F3FFFE'],}dataList8.list.forEach((item, index) => {console.log(item, 'item')item.forEach((it, i) => {// it.itemStyle = {//   color: color_chart.color_1[index]// }if (i === 0 || (i > 0 && it.target !== item[i - 1].target)) {let color = color_chart.color_1[index]let textColor = color_chart.text_color[index]index < 2 && nameList.push({name: it.target,depth: index,itemStyle: {color: index == 0 ? color_chart.color_1[0] : color_chart.color_2[i]},label: {color: textColor,}})// label: {//   formatter(e) {//     if (item.level == "1") {//       return `{a|${e.data.name}}{b|${e.data.count}}`;//     } else {//       return `{c|${e.data.name}}\n{d|${e.data.count}}`;//     }//   }// }}let data = {source: it.source,target: it.target,value: it.value,itemStyle: it.itemStyle}index !== 0 && List.push(data)})})dataList8.list = Listconsole.log(List, 'List')console.log(nameList, 'nameList')option = {tooltip: {trigger: 'item',triggerOn: 'mousemove'},animation: false,series: [{type: 'sankey',top: '5%',// left: '5%',bottom: '3%',right: '10%',nodeWidth: 20,// nodeGap: 0,nodeAlign: "right",layoutIterations: 0,// emphasis: {//   focus: 'adjacency'// },data: nameList,links: dataList8.list,// orient: 'vertical',label: {position: 'right',distance: 20,fontSize: 15,lineHeight: 20,color: "rgba(255, 255, 255, 1)"},lineStyle: {color: 'gradient',curveness: 0.5}}]};

【Echarts】渐变色桑基图相关推荐

echarts 桑基图
使用echarts的桑基图时发现一个问题: 当一个流转状态的值比较大时且覆盖了其它的流转状态,那么这时鼠标移到这些值小的流转状态,tooltip提示出来的仍是那个大的流转状态,也就是选不中这些小的状态 ...
桑基图（Echarts）——自定义风格
桑基图绘制--使用Echarts 桑基图(Sankey diagram),即桑基能量分流图,也叫桑基能量平衡图.它是一种特定类型的流程图,图中延伸的分支的宽度对应数据流量的大小,通常应用于能源.材料成 ...
echarts 桑基图添加标志线问题
最近做一个项目,要求在桑基演化图的基础上添加"时间线",由于echart桑基图中没有该参数,所以需要两种图形叠加实现. 1.绘制基础桑基图 product.json {" ...
Echarts桑基图sankey点击高亮显示
Echarts桑基图sankey点击高亮显示 2022-02-21更新: 点击某一项将与其有关联的所有父项目和子项目全部高亮显示,并降低其他无关项目透明度,再次点击则恢复原有状态: 在线DEMO查看 ...
Echarts桑基图的排列顺序
首先我们来说几个关于echarts的参数配置项 layoutIterations,布局的迭代次数.官方的解释如下: 这个不配合图来看,还真有点懵. 意思就是,如果 layoutIterations=0 ...
Echarts 里的桑基图
/*输出桑基图*/renderSankey: function (profileIdentity, canvasId) {if (!document.body.contains(document.ge ...
python桑基图教程_桑基图实例(Echarts版）
以前有看过桑基图的实例,但是一直没有实践过,最近在搞用户行为分析,想看看用户访问路径,一直没有一个很好的工具来展现.之前手工在思维导图的搞过,但是太费事了,这次想起了这个桑基图,想看看能不能实现想要的 ...
js实现echarts桑基图缩放与拖动
需求:解决节点数据较小时,桑基图文字重叠问题. 由于echarts的dataZoom工具仅适用于直角坐标系,考虑通过改变画布大小与位置实现效果: 1.缩放 this.chartBox:画布外层容器, ...
python怎么画函数图_可视化｜Python绘制桑基图
桑基图(Sankey diagram),即桑基能量分流图,也叫桑基能量平衡图.它是一种特定类型的流程图,图中延伸的分支的宽度对应数据流量的大小,通常应用于电商.材料成分.金融等数据的可视化分析.因18 ...

【Echarts】渐变色桑基图

【Echarts】渐变色桑基图相关推荐

最新文章

热门文章