Two-way Sankey

by kelvinau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js"></script>
<body>
  <div id="main" style="width: 800px;height: 600px;"></div>
</body>

JavaScript

var DEFAULT_APP_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAD7ElEQVR4Xu2cz2oUQRDGZ3dISFAUJOAxeBcWAh7dmwd9glzUgx49BUTxAURRPHnUg4qQNxAPIpijEFjwAczJSxAikYSE2UjBjozrzHRXT3XXpPvz6HRX73y/quo/1ZNBhn+qCgxUR8fgGQAoOwEAAICyAsrDIwIAQFkB5eERAQCgrIDy8IgAAFBWQHl4REBMAIZPJifK79M6/MXPn8Y/Pm5s9ek3ikZA3wGQ8H2DkByAvkHwBmD6cCRqu0vauHTj+erO+Nr3qo18kN09fjB63cWuRF9RkaopqE8ASKj59HhhsTjcO87vaUNIFgBB6QOEpAGUKUQzHSUJ4Oy02Nof5ldLAJqRkCQAmp/OPd7+UoVAMDQiIVkAJHgfICQNoA8QkgegDQEAZjOxVjoCgMp2VgMCAMydJzRBWB9ONt/dv/Vb4vihagMAahQNGQlJAnD1YtonSEcCADBpSG/WAIAJgJpLnvQmA8BB579dbj57e+Z9Mdov/wMAuqjp2NdXrQMRYAkEACyF8tUMABjKUs7enI7Wl4vi9uJSduXnUb5EZ/5Hh9nXgzx/47KUBABLAAtPJ3fOLxQvSfSmLi4FGAAwACi9vjjJXlmyYhVgAMCgKnk+R3xuPRgADABWXmwftKWdtnR0vfi2YjpoA4AWAK7ez4kCAGgBUHd6aTsPUDu6JfHr0dq4rQ8AtKjjmn5Kk7Qq2t1YWwYAjttW2nYFYHPAhghABJjd05eXmEbGHDBTSAsAVkHKAGgX/CG/vIt9QOUbMcmihSkFdYkA2xKjr+g+9fWAEOKTAwBATRg0nXzSuh6noZ6/EWvy/PLqCOoBHgE0eb5tPjfNKXXPkYJmqtR5vkuBhQsBALIs0/D8ElTyANpyfohPTZMGoOn5UUeAze0FWs3MlxpD5Pz5OSK6CLC9vUBCzK/pfa52mibnaAC43F6oiqIhflQ74VBHB9xlpql9NBHgWr2ivG9ze8EkpOvzKAB08X4STiv9RJOCQlSuXD3c1C+KCHBNP5zbCyYhXZ8DwEy5kIWeKiwAmP2BJdP9HVcPN/WLAgDmgP8xBy1JYhWkDCDE7QVTKnF9HkUKopd3jQLNPUA0+4DS+7gQtMWPDkB5IOfjWy7XFGPqF00Kqr6oTT3A9OWKSTip51ECkBInhB0ACKFyyxgAAABmBXx5iXlk/y18vVvQnbB/mfyNAAD+tLWyDABWMvlrdOoA+JNC37JkTcLbHKAvk79fAAD+tLWy3FsAVr8ejf5RQDQFQVu+AgDA10y0BwCIysk3BgB8zUR7AIConHxjAMDXTLQHAIjKyTcGAHzNRHsAgKicfGMAwNdMtAcAiMrJN/YHsqoLncXh9OoAAAAASUVORK5CYII=";

var myChart = echarts.init(document.getElementById('main'));

var option = {
  "series": [{
    "type": "sankey",
    "left": "100",
    "right": "20%",
    "bottom": "8%",
    label: {
      normal: {
        formatter: '{icon|}{b}',
        rich: {
          icon: {}
        }
      }
    },
    "data": [{
        "name": "FG1K2D3L100"
      }, {
        "name": "FG3K2C3Z1207"
      }, {
        "name": "Cheerios",
        label: {
          normal: {
            position: 'left',
            rich: {
              icon: {
 ...