zb-admin/src/views/echarts/components/complex/sankey.vue

<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script lang="ts" setup>
  import * as echarts from 'echarts'
  import { EChartsType } from 'echarts/core'
  import { onMounted } from 'vue'

  let props = defineProps({
    className: {
      type: String,
      default: 'chart',
    },
    config: {
      type: Object,
      default: () => {},
    },
    id: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '200px',
    },
    height: {
      type: String,
      default: '200px',
    },
  })
  let datalist = [
    {
      name: '公共平台',
    },
    {
      name: '系统0000',
    },
    {
      name: '系统0011',
    },
    {
      name: '系统0022',
    },
    {
      name: '系统0033',
    },
    {
      name: '系统0044',
    },
    {
      name: '系统0055',
    },
    {
      name: '系统11',
    },
    {
      name: '系统22',
    },
    {
      name: '系统33',
    },
    {
      name: '系统44',
    },
    {
      name: '系统55',
    },
    {
      name: '系统66',
    },
    {
      name: '系统77',
    },
    {
      name: '系统88',
    },
    {
      name: '系统99',
    },
  ]
  let linksData = [
    {
      source: '公共平台',
      target: '系统0000',
      value: 1044305,
    },
    {
      source: '公共平台',
      target: '系统0011',
      value: 651527,
    },
    {
      source: '公共平台',
      target: '系统0022',
      value: 651527,
    },
    {
      source: '公共平台',
      target: '系统0033',
      value: 486710,
    },
    {
      source: '公共平台',
      target: '系统0044',
      value: 212670,
    },
    {
      source: '公共平台',
      target: '系统0055',
      value: 210400,
    },
    {
      source: '系统0011',
      target: '系统11',
      value: 645246,
    },
    {
      source: '系统0022',
      target: '系统22',
      value: 513275,
    },
    {
      source: '系统0011',
      target: '系统33',
      value: 282986,
    },
    {
      source: '系统0011',
      target: '系统44',
      value: 118655,
    },
    {
      source: '系统0022',
      target: '系统55',
      value: 105989,
    },
    {
      source: '系统0022',
      target: '系统66',
      value: 95100,
    },
    {
      source: '系统0033',
      target: '系统77',
      value: 87796,
    },
    {
      source: '系统0044',
      target: '系统88',
      value: 47658,
    },
    {
      source: '系统0055',
      target: '系统99',
      value: 243660,
    },
  ]
  let Color = [
    '#61FEFF',
    '#937FE6',
    '#2B56D3',
    '#87E7AA',
    '#937FE6',
    '#FF9B97',
    '#8f23f5',
    '#0576ea',
    '#2cb8cf',
    '#8A7EE0',
    '#2cb8cf',
    '#4e70f0',
    '#1fa3de',
    '#bbc951',
    '#FFC14B',
    '#b785a6',
  ]
  let Color1 = [
    '#04E0F3',
    '#682EFC',
    '#35A7FE',
    '#0DC09F',
    '#682EFC',
    '#ED6663',
    '#8f23f5',
    '#0576ea',
    '#2cb8cf',
    '#8A7EE0',
    '#2cb8cf',
    '#4e70f0',
    '#1fa3de',
    '#bbc951',
    '#FFC14B',
    '#b785a6',
  ]
  let sourceLabel = [
    'right',
    'left',
    'left',
    'left',
    'left',
    'left',
    'left',
    'left',
    'left',
    'left',
    'left',
    'left',
    'left',
    'left',
    'left',
    'left',
  ]
  let itemStyleColor = []
  let labelSource = []
  for (let i = 0; i < datalist.length; i++) {
    datalist[i].label = {
      normal: {
        position: sourceLabel[i],
      },
    }
    labelSource.push(sourceLabel[i])
  }
  for (let d = 0; d < datalist.length; d++) {
    datalist[d].itemStyle = {
      normal: {
        // color: Color[d]
        color: {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 1,
              color: Color[d], // 0% 处的颜色
            },
            {
              offset: 0,
              color: Color1[d], // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    }
    itemStyleColor.push(datalist[d])
  }

  const options = {
    backgroundColor: '#031d7a',
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      formatter: function (params) {
        if (params.name == '公共平台') {
          return ' 公共平台 '
        } else {
          let value = params.data.value
          if (!value && value !== 0) return 0
          let str = value.toString()
          let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
          if (params.data.source == '公共平台') {
            return params.data.target + ' : ' + str.replace(reg, '$1,')
          } else {
            return params.data.source + ' : ' + str.replace(reg, '$1,')
          }
        }
      },
    },
    series: [
      {
        type: 'sankey',
        layout: 'none',
        top: '4%',
        bottom: '12%',
        left: '20',
        right: '20',
        nodeGap: 15,
        nodeWidth: 25,
        focusNodeAdjacency: 'allEdges',
        data: itemStyleColor,
        links: linksData,
        label: {
          normal: {
            color: '#fff',
            fontSize: 14,
            formatter: function (params) {
              if (params.data.name == '公共平台') {
                let strs = params.data.name.split('') //字符串数组
                let str = ''
                for (let i = 0, s; (s = strs[i++]); ) {
                  //遍历字符串数组
                  str += s
                  if (!(i % 1)) str += '\n' //按需要求余
                }
                return '{white|' + str + '}'
              } else {
                return params.data.name
              }
            },
            rich: {
              white: {
                fontSize: 16,
                lineHeight: 30,
                padding: [0, 0, 0, -26],
              },
            },
          },
        },
        lineStyle: {
          normal: {
            opacity: 0.4,
            color: 'source',
            curveness: 0.5,
          },
        },
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: 'transparent',
          },
        },
      },
    ],
  }
  let chart: EChartsType
  const initChart = () => {
    let chart = echarts.init(document.getElementById(props.id))
    chart.setOption(options)
    return chart
  }
  onMounted(() => {
    chart = initChart()
    window.addEventListener('resize', function () {
      chart && chart.resize()
    })
  })
</script>