real3d-portalsite/src/components/echartsTemplate/sankey.vue

<template>
  <div id="sankey_echart" ref="echart"></div>
</template>

<script>
// #5BB57A
let option = {
  grid: {
    left: "20%",
    top: "20%",
    right: "40%",
    bottom: "20%",
  },
  tooltip: {
    trigger: "item",
    triggerOn: "mousemove",
  },
  // animation: false,
  series: {
    type: "sankey",
    layout: "none",
    left: "5%",
    bottom: "10%",
    // top: "50%",
    emphasis: {
      focus: "adjacency",
    },
    draggable: false, // 禁止拖动
    label: {
      position: "right",
      color: "#ECF6FF",
      formatter: function (params) {
        let name = params.name;
        return name.length > 5 ? name.substr(0, 5) + "..." : name;
      },
    },
    data: [],
    links: [],
    lineStyle: {
      color: "source",
      curveness: 0.5,
    },
    nodeWidth: 10,
    nodeAlign: "left",
  },
};
export default {
  name: "sankey_echart",
  components: {},
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    setOptions(data = [], links = []) {
      if (!this.myChart) {
        // var dom = document.getElementById("sankey_echart");
        this.myChart = echarts.init(this.$refs.echart);
      }
      option.series.data = data;
      option.series.links = links;
      this.myChart.setOption(option);
    },
  },
  mounted() {
    // this.setOptions();
  },
};
</script>
<style lang="scss" scoped>
.sankey_echart {
  width: 100%;
  height: 100%;
}
</style>