【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 = List
      console.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
            }
          }
        ]
      };