echarts 桑基图

说明见代码注释

ar myChart = echarts.init(document.getElementById("tableEcharts2"));

  if (data.nodes.length > 0) {
    data.nodes.unshift({ name: "补贴资金" });//在数组起始插入 起始节点名称
  }
  //修改数组内容  用于后续formatter格式化2为数字 用于显示桑基图 因为value为0时桑基图不显示
  $.each(data.links,function(item,obj){
    if(parsefloat(obj.value)==0.00)
    data.links[item].value='0.001'//用于解决数据库值为0 节点不显示问题
});
  var option = {
    // title: {
    //     text: '资金分配图',
    //     left: '40%',
    // },
    tooltip: {
      trigger: "item",
      triggerOn: "mousemove",
    },
    color: ["#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4"],
    series: [
      {
        type: "sankey",
        data: data.nodes,//节点 数据
        links: data.links,//流向数据
        focusNodeAdjacency: true, //划上高亮
        layoutIterations: 0, //布局迭代次数

        emphasis: {
          focus: "adjacency",
        },
        label: {
          show: true,

          width: 100,

          overflow: "truncate",
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: "#fff",
        },
        lineStyle: {
          curveness: 0.5,
          opacity: 0.5,
        },
         //配置节点颜色 等
        levels: [
          {
            depth: 0,
            itemStyle: {
              color: "#fbb4ae",
            },
            lineStyle: {
              color: "source",
              opacity: 0.6,
            },
           /自定义层级 label隐藏
            label: {
              show: false,
            },
          },
          {
            depth: 1,
            itemStyle: {
              color: "#b3cde3",
            },
            lineStyle: {
              color: "source",
              opacity: 0.3,
            },
          },
          {
            depth: 2,
            itemStyle: {
              color: "#ccebc5",
            },
            lineStyle: {
              color: "source",
              opacity: 0.6,
            },
          },
          {
            depth: 3,
            itemStyle: {
              color: "#decbe4",
            },
            lineStyle: {
              color: "source",
              opacity: 0.6,
            },
          },
          {
            depth: 4,
            itemStyle: {
              color: "#fbb4ae",
            },
            lineStyle: {
              color: "source",
              opacity: 0.6,
            },
          },
          {
            depth: 5,
            itemStyle: {
              color: "#b3cde3",
            },
            lineStyle: {
              color: "source",
              opacity: 0.3,
            },
          },
        ],

        lineStyle: {
          curveness: 0.5,
        },
      },
    ],
  };