supercat1995 opened a new issue #9374: 如何让sankey图的边的层级低于节点的层级 URL: https://github.com/apache/incubator-echarts/issues/9374 <!-- 为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。 --> ### One-line summary [问题简述]  如何让sankey图的边的层级低于节点的层级，现在边会罩住节点导致没法选中节点 ### Version & Environment [版本及环境] + ECharts version [ECharts 版本]: 4.2.0 + Browser version [浏览器类型和版本]:Google Chrome 版本 67.0.3396.79（正式版本） （32 位） + OS Version [操作系统类型和版本]:windows7 sp1 ### Expected behaviour [期望结果] 边和节点的层级可调整 ### ECharts option [ECharts配置项] <!-- Copy and paste your 'echarts option' here. --> <!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] --> ```javascript <template> <div class="index"> <div id="path1"> </div> </div> </template> <script> export default { name: 'index', data() { return { sankeyData: { sankeyParams: {}, opdata: [{ name: 'a', value: [27, 2, false] }, { name: 'b1', value: [10, 2, false] }, { name: 'b2', value: [8, 1, false] }, { name: 'b3', value: [7, 1, false] }, { name: 'c1', value: [12, 1, false] }, { name: 'c2', value: [4, 1, false] }, { name: 'c3', value: [5, 1, false] }, { name: 'd1', value: [8, 0, false] }, { name: 'd2', value: [4, 0, false] }, { name: 'd3', value: [4, 0, false] }, { name: 'alost', itemStyle: { color: 'transparent', borderColor: 'transparent' }, label: { show: false } }, { name: 'dlost', itemStyle: { color: 'transparent', borderColor: 'transparent' }, label: { show: false } }], opctionLinks: [{ source: 'a', target: 'b1', value: [10, 27] }, { source: 'a', target: 'alost', value: 2, lineStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) }, emphasis: { lineStyle: { opacity: '0.2' } } }, { source: 'a', target: 'b2', value: [8, 27] }, { source: 'a', target: 'b3', value: [7, 27] }, { source: 'b1', target: 'c1', value: [6, 10] }, { source: 'b1', target: 'alost', value: 2, lineStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) }, emphasis: { lineStyle: { opacity: '0.2' } } }, { source: 'b2', target: 'alost', value: 1, lineStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) }, emphasis: { lineStyle: { opacity: '0.2' } } }, { source: 'b3', target: 'alost', value: 1, lineStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) }, emphasis: { lineStyle: { opacity: '0.2' } } }, { source: 'b1', target: 'c2', value: [1, 10] }, { source: 'b1', target: 'c3', value: [1, 10] }, { source: 'b2', target: 'c1', value: [4, 7] }, { source: 'b2', target: 'c2', value: [2, 7] }, { source: 'b2', target: 'c3', value: [1, 7] }, { source: 'b3', target: 'c1', value: [2, 6] }, { source: 'b3', target: 'c2', value: [1, 6] }, { source: 'b3', target: 'c3', value: [3, 6] }, { source: 'c1', target: 'd1', value: [5, 12] }, { source: 'c1', target: 'alost', value: 1, lineStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) }, emphasis: { lineStyle: { opacity: '0.2' } } }, { source: 'c2', target: 'alost', value: 1, lineStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) }, emphasis: { lineStyle: { opacity: '0.2' } } }, { source: 'c3', target: 'alost', value: 1, lineStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) }, emphasis: { lineStyle: { opacity: '0.2' } } }, { source: 'c2', target: 'alost', value: 1, lineStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) }, emphasis: { lineStyle: { opacity: '0.2' } } }, { source: 'c1', target: 'd2', value: [3, 12] }, { source: 'c1', target: 'd3', value: [3, 12] }, { source: 'c2', target: 'd1', value: [1, 4] }, { source: 'c2', target: 'd2', value: [1, 4] }, { source: 'c2', target: 'd3', value: [1, 4] }, { source: 'c3', target: 'd1', value: [2, 5] }, { source: 'c3', target: 'd2', value: [1, 5] }, { source: 'c3', target: 'd3', value: [1, 5] }] }, sankeyDataByGet: { nodes: [ [{ "id": "0_CRMOperation", "event_name": "CRMOperation", "times": 20556 }, { "id": "0_documentOperation", "event_name": "documentOperation", "times": 20542 }, { "id": "0_taskOperation", "event_name": "taskOperation", "times": 15997 }, { "id": "0_programOperation", "event_name": "programOperation", "times": 14757 }, { "id": "0_programAddTeam", "event_name": "programAddTeam", "times": 13969 }, { "id": "0_collectProgram", "event_name": "collectProgram", "times": 13728 }, { "id": "0_more", "event_name": "more", "times": 31851, "is_aggregate": true }], [{ "id": "1_programOperation", "event_name": "programOperation", "times": 988 }, { "id": "1_CRMOperation", "event_name": "CRMOperation", "times": 945 }, { "id": "1_programAddTeam", "event_name": "programAddTeam", "times": 924 }, { "id": "1_taskOperation", "event_name": "taskOperation", "times": 639 }, { "id": "1_programAddCustom", "event_name": "programAddCustom", "times": 526 }, { "id": "1_documentOperation", "event_name": "documentOperation", "times": 481 }, { "id": "1_more", "event_name": "more", "times": 547, "is_aggregate": true }], [{ "id": "2_programOperation", "event_name": "programOperation", "times": 31 }, { "id": "2_taskOperation", "event_name": "taskOperation", "times": 27 }, { "id": "2_programAddTeam", "event_name": "programAddTeam", "times": 22 }, { "id": "2_collectProgram", "event_name": "collectProgram", "times": 15 }, { "id": "2_programSelectModel", "event_name": "programSelectModel", "times": 2 }], [{ "id": "3_taskOperation", "event_name": "taskOperation", "times": 4 }, { "id": "3_collectProgram", "event_name": "collectProgram", "times": 1 }] ], "links": [ [{ "source": "0_CRMOperation", "target": "1_wastage", "is_wastage": true, "times": 20076 }, { "source": "0_CRMOperation", "target": "1_documentOperation", "times": 480 }, { "source": "0_documentOperation", "target": "1_wastage", "is_wastage": true, "times": 19597 }, { "source": "0_documentOperation", "target": "1_CRMOperation", "times": 945 }, { "source": "0_taskOperation", "target": "1_wastage", "is_wastage": true, "times": 15642 }, { "source": "0_taskOperation", "target": "1_programOperation", "times": 354 }, { "source": "0_taskOperation", "target": "1_programAddTeam", "times": 1 }, { "source": "0_programOperation", "target": "1_wastage", "is_wastage": true, "times": 13810 }, { "source": "0_programOperation", "target": "1_taskOperation", "times": 637 }, { "source": "0_programOperation", "target": "1_programAddTeam", "times": 309 }, { "source": "0_programOperation", "target": "1_more", "times": 1 }, { "source": "0_programAddTeam", "target": "1_wastage", "is_wastage": true, "times": 13051 }, { "source": "0_programAddTeam", "target": "1_programOperation", "times": 633 }, { "source": "0_programAddTeam", "target": "1_taskOperation", "times": 2 }, { "source": "0_programAddTeam", "target": "1_more", "times": 283 }, { "source": "0_collectProgram", "target": "1_wastage", "is_wastage": true, "times": 13101 }, { "source": "0_collectProgram", "target": "1_programAddTeam", "times": 613 }, { "source": "0_collectProgram", "target": "1_programAddCustom", "times": 13 }, { "source": "0_collectProgram", "target": "1_programOperation", "times": 1 }, { "source": "0_more", "target": "1_wastage", "is_wastage": true, "times": 31073 }, { "source": "0_more", "target": "1_programAddTeam", "times": 1 }, { "source": "0_more", "target": "1_programAddCustom", "times": 513 }, { "source": "0_more", "target": "1_documentOperation", "times": 1 }, { "source": "0_more", "target": "1_more", "times": 263 }], [{ "source": "1_programOperation", "target": "2_wastage", "is_wastage": true, "times": 943 }, { "source": "1_programOperation", "target": "2_taskOperation", "times": 26 }, { "source": "1_programOperation", "target": "2_programAddTeam", "times": 19 }, { "source": "1_CRMOperation", "target": "2_wastage", "is_wastage": true, "times": 945 }, { "source": "1_programAddTeam", "target": "2_wastage", "is_wastage": true, "times": 879 }, { "source": "1_programAddTeam", "target": "2_programOperation", "times": 29 }, { "source": "1_programAddTeam", "target": "2_collectProgram", "times": 15 }, { "source": "1_programAddTeam", "target": "2_taskOperation", "times": 1 }, { "source": "1_taskOperation", "target": "2_wastage", "is_wastage": true, "times": 637 }, { "source": "1_taskOperation", "target": "2_programOperation", "times": 2 }, { "source": "1_programAddCustom", "target": "2_wastage", "is_wastage": true, "times": 524 }, { "source": "1_programAddCustom", "target": "2_programSelectModel", "times": 2 }, { "source": "1_documentOperation", "target": "2_wastage", "is_wastage": true, "times": 481 }, { "source": "1_more", "target": "2_wastage", "is_wastage": true, "times": 544 }, { "source": "1_more", "target": "2_programAddTeam", "times": 3 }], [{ "source": "2_programOperation", "target": "3_wastage", "is_wastage": true, "times": 27 }, { "source": "2_programOperation", "target": "3_taskOperation", "times": 4 }, { "source": "2_taskOperation", "target": "3_wastage", "is_wastage": true, "times": 27 }, { "source": "2_programAddTeam", "target": "3_wastage", "is_wastage": true, "times": 21 }, { "source": "2_programAddTeam", "target": "3_collectProgram", "times": 1 }, { "source": "2_collectProgram", "target": "3_wastage", "is_wastage": true, "times": 15 }, { "source": "2_programSelectModel", "target": "3_wastage", "is_wastage": true, "times": 2 }], [{ "source": "3_taskOperation", "target": "4_wastage", "is_wastage": true, "times": 4 }, { "source": "3_collectProgram", "target": "4_wastage", "is_wastage": true, "times": 1 }] ], "truncate_row": [], "truncate_col": false, "report_update_time": "2018-11-08 09:31:59.047", "data_update_time": "2018-11-08 09:31:45.000", "data_sufficient_update_time": "2018-11-08 09:31:45.000", "truncated": false, "sampling_factor": 64 } } }, mounted() { this.sankeyDataNode() this.sankeyDataLink() this.sankey() }, methods: { toThousand(str) { return str.toString().replace(/(\d{1,3})(?=(\d{3})+$)/g, '$1,') }, barCreated(star, data) { for (var i = 0; i < data.length; i++) { var c = 'bar' + (star + i) this.barChart(c, data[i]) } }, pathRadio(index) { for (var i = 0; i < this.path.radio.length; i++) { this.path.radio[i].active = false } this.path.nowActive = index this.path.radio[index].active = true }, barChart(el, num) { let myChart = this.$echarts.init(document.getElementById(el)) myChart.setOption({ grid: { left: 0, right: 0, top: 40, containLabel: true }, xAxis: { type: 'value', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false }, max: 100 }, yAxis: { type: 'category', axisLine: { show: false }, axisTick: { show: false }, position: 'left' }, series: [{ name: '2011年', type: 'bar', barWidth: '100%', itemStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#ffe346' }, { offset: 1, color: '#de181a' }]) }, barCateGoryGap: 20, label: { normal: { show: false } }, data: num }] }) }, sankeyDataNode() { var a = [] var c = [] this.sankeyDataByGet.nodes.forEach(function (item) { item.forEach(function (item) { a.push(item) }) }) a.forEach(function (item, index) { c.push({}) c[index].name = item.id c[index].value = [item.times, 1, false] }) c.push({ name: 'alost', itemStyle: { color: 'transparent', borderColor: 'transparent' }, label: { show: false } }, { name: 'dlost', itemStyle: { color: 'transparent', borderColor: 'transparent' }, label: { show: false } }) this.sankeyData.opdata = c }, sankeyDataLink() { var _this = this var a = [] var c = [] this.sankeyDataByGet.links.forEach(function (item) { item.forEach(function (item) { a.push(item) }) }) a.forEach(function (item, index) { c.push({}) c[index].source = item.source if (item.target.split('_')[1] === 'wastage') { c[index].target = 'alost' c[index].lineStyle = { color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) } c[index].lineStyle.emphasis = { lineStyle: { opacity: '0.2' } } } else { c[index].target = item.target } c[index].value = item.times }) this.sankeyData.opctionLinks = c }, sankey(data) { console.log(this.sankeyData) let _this = this let myChart = this.$echarts.init(document.getElementById('path1')) let op = { tooltip: { trigger: 'item', axisPointer: { type: 'shadow' }, dataZoom: [{ type: 'slider', start: 0, end: 30 }], formatter: function (params) { var pointtext = 'err' if (params.data.target === 'alost' || params.name === 'alost' || params.name === 'dlost') { pointtext = '123' return '' } if (params.dataType === 'edge') { pointtext = '<p style="text-align: center;">' + params.name + '</p>' + '<p style="text-align:center;color:#5ca37b;">(' + params.value[0] + '会话数)</p><p style="width:100%;height:1px;background:#e3e3e3;margin:5px 0;"></p><p style="padding:0 0 0 15px;"><b style="width:10px;height:10px;background:#bcc4cf;position: absolute;left:5px;top:auto;margin-top:5px;border-radius:50%;"></b>' + params.data.value[0] + '转化量( ' + (params.data.value[0] / params.data.value[1] * 100).toFixed(2) + '% )</p>' } else { pointtext = '<p style="text-align: center;">' + params.data.name + '</p>' + '<p style="text-align:center;color:#5ca37b;">(' + params.data.value[0] + '会话数)</p><p style="width:100%;height:1px;background:#e3e3e3;margin:5px 0;"></p><p style="padding:0 0 0 15px;"><b style="width:10px;height:10px;background:#bcc4cf;position: absolute;left:5px;top:auto;margin-top:5px;border-radius:50%;"></b>' + (params.data.value[0] - params.data.value[1]) + '存留量( ' + ((params.data.value[0] - params.data.value[1]) / params.data.value[0] * 100).toFixed(2) + '% )</p><p style="padding:0 0 0 15px;"><b style="width:10px;height:10px;background:#f47e7e;position: absolute;left:5px;top:auto;margin-top:5px;border-radius:50%;"></b>' + (params.data.value[1]) + '流失量( ' + (params.data.value[1] / params.data.value[0] * 100).toFixed(2) + '% )</p>' } return pointtext }, textStyle: { color: '#666666' }, extraCssText: 'background-color:rgba(256,256,256,.8);border:1px solid #cccccc;' }, series: { type: 'sankey', layout: 'none', left: '5%', top: '5%', right: '5%', bottom: '5%', nodeGap: 30, layoutIterations: 10, label: { show: true, position: 'insideTopLeft', formatter: function (params) { return params.name + '\n' + params.value[0] } }, draggable: false, itemStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#d5dce6' }, { offset: 1, color: '#b6bec9' }]), borderColor: '#bdbec0' }, nodeWidth: 150, data: this.sankeyData.opdata, links: this.sankeyData.opctionLinks } } myChart.setOption(op) myChart.off() myChart.on('click', function (params) { if (params.dataType === 'node' && params.name !== 'alost' && params.name !== 'dlost') { if (params.value[2] === true) { _this.cheakbox.light = true _this.cheakbox.show = true _this.cheakbox.x = params.event.offsetX _this.cheakbox.y = params.event.offsetY } else { _this.cheakbox.light = false _this.cheakbox.show = true _this.cheakbox.x = params.event.offsetX _this.cheakbox.y = params.event.offsetY _this.sankeyData.sankeyParams = params } } else { _this.cheakbox.show = false } }) }, trunOff() { var _this = this this.sankeyData.opdata.forEach(function (value) { if (value.name === 'alost' || value.name === 'dlost') {} else { value.value[2] = false value.itemStyle = { color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#d5dce6' }, { offset: 1, color: '#b6bec9' }]), borderColor: '#bdbec0', opacity: 1 } } }) this.sankeyData.opctionLinks.forEach(function (value) { if (value.target !== 'alost') { value.lineStyle = { color: '#314656' } } else { value.lineStyle = { color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) } } }) this.sankey() }, trunOn(params) { var _this = this var name = [params.name] let opctionLinks = this.sankeyData.opctionLinks let opdata = this.sankeyData.opdata var arr3 = [] var arr4 = [] var arr5 = [] getPointer(name) function dedupe(array) { return Array.from(new Set(array)) } function getPointer(name) { opdata.forEach(function (value, index, arr) { if (value.name === 'alost' || value.name === 'dlost') {} else if (value.name === params.name) { value.value[2] = true value.itemStyle = { color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#d5dce6' }, { offset: 1, color: '#b6bec9' }]), borderColor: '#bdbec0', opacity: 1 } } else { value.value[2] = false value.itemStyle = { color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#d5dce6' }, { offset: 1, color: '#b6bec9' }]), borderColor: '#bdbec0', opacity: 0.2 } } }) for (var d = 0; d < opctionLinks.length; d++) { if (opctionLinks[d].target !== 'alost') { opctionLinks[d].lineStyle = { color: '#ccc' } } else { opctionLinks[d].lineStyle = { opacity: 0, color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) } } } for (var b = 0; b < name.length; b++) { for (var a = 0; a < opctionLinks.length; a++) { if (opctionLinks[a].source === name[b] || opctionLinks[a].target === name[b]) { arr3.push(opctionLinks[a]) arr4.push(opctionLinks[a].source) arr5.push(opctionLinks[a].target) } } } for (var c = 0; c < arr3.length; c++) { if (arr3[c].target !== 'alost') { arr3[c].lineStyle = { color: '#314656' } } else { arr3[c].lineStyle = { opacity: 0.2, color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#de181a' }, { offset: 0.03, color: 'transparent' }]) } } } let a2 = new Set(arr4) let a3 = new Set(arr5) a2.delete(params.name) a3.delete(params.name) arr4 = Array.from(a2) arr5 = Array.from(a3) cheak(arr4) cheak(arr5) function cheak(arr) { if (arr.length === 0) { return false } else { for (var i = 0; i < opdata.length; i++) { for (var j = 0; j < arr.length; j++) { if (opdata[i].name === arr[j]) { opdata[i].itemStyle.opacity = 1 } else {} } } } } var arr6 = [] var arr7 = [] p(arr4) n(arr5) function p(arr) { var arr9 = [] if (arr.length === 0) { return false } else { for (var g = 0; g < arr.length; g++) { for (var h = 0; h < opctionLinks.length; h++) { if (opctionLinks[h].target === arr[g]) { arr6.push(opctionLinks[h]) arr9.push(opctionLinks[h].source) } } } for (var n = 0; n < arr6.length; n++) { if (arr6[n].target !== 'alost') { arr6[n].lineStyle.color = '#314656' } else {} } _this.sankey() cheak(dedupe(arr9)) p(dedupe(arr9)) } } function n(arr) { var arr8 = [] if (arr.length === 0) { return false } else { for (var k = 0; k < arr.length; k++) { for (var l = 0; l < opctionLinks.length; l++) { if (opctionLinks[l].source === arr[k]) { arr7.push(opctionLinks[l]) arr8.push(opctionLinks[l].target) } } } for (var m = 0; m < arr7.length; m++) { if (arr7[m].target !== 'alost') { arr7[m].lineStyle.color = '#314656' } else {} } _this.sankey() cheak(dedupe(arr8)) n(dedupe(arr8)) } } } } } } </script> <style type="text/css"> #path1 { width: 100%; height: 600px; } </style> ``` ### Other comments [其他信息] <!-- For example: Screenshot or Online demo --> <!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
