You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2018/11/09 08:58:25 UTC

[GitHub] supercat1995 opened a new issue #9374: 如何让sankey图的边的层级低于节点的层级

supercat1995 opened a new issue #9374: 如何让sankey图的边的层级低于节点的层级
URL: https://github.com/apache/incubator-echarts/issues/9374
 
 
   <!--
   为了方便我们能够复现和修复 bug,请遵从下面的规范描述您的问题。
   -->
   
   
   ### One-line summary [问题简述]
   
   ![image](https://user-images.githubusercontent.com/20430045/48251899-1ec2fa80-e43e-11e8-897c-f6da7e931675.png)
   如何让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:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org