newcpms/ui/src/views/dashboard/BalanceChart.vue

<template>
  <div class="app-container-Balance">
    <div id="BalanceChart" :style="{height:height,width:width}"></div>
  </div>
</template>

<script>
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '7.3rem'
    },
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      /*this.queryParams.year = this.searchFormField.year;*/
      this.getList()
    })
  },
  methods: {
    getList() {
      this.initChart()
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('BalanceChart'))

      this.chart.setOption({
        series: {
          type: 'sankey',
          layout: 'none',
          emphasis: {
            focus: 'adjacency'
          },
          data: [{
            name: 'wison Ethane',
            itemStyle: {
              'color': '#0078D7'
            }
          }, {
            name: 'LPG to furnace'
          }, {
            name: 'Raff1 fr BD'
          }, {
            name: 'Raff2 fr IB'
          }, {
            name: 'Raff3 fr BD'
          }, {
            name: 'Raffinate II P fr 2PH'
          }, {
            name: 'C2 fr LDPE'
          }, {
            name: 'C3 fr OXO'
          }, {
            name: 'MIXED C3/C4'
          }, {
            name: 'Hy C9'
          }, {
            name: 'PGU Offgas'
          }, {
            name: 'Wash Oil'
          }, {
            name: 'Toluene'
          }, {
            name: 'Hy C4 fr R800'
          }, {
            name: 'CRACKER'
          }, {
            name: 'H2'
          }, {
            name: 'ETHYLEN'
          }, {
            name: 'Propylene'
          }, {
            name: 'LPG'
          }],
          links: [{
            source: 'wison Ethane',
            target: 'CRACKER',
            value: 8
          }, {
            source: 'LPG to furnace',
            target: 'CRACKER',
            value: 0
          }, {
            source: 'Raff1 fr BD',
            target: 'CRACKER',
            value: 0
          }, {
            source: 'Raff2 fr IB',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'Raff3 fr BD',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'Raffinate II P fr 2PH',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'C2 fr LDPE',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'C3 fr OXO',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'MIXED C3/C4',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'Hy C9',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'PGU Offgas',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'Wash Oil',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'Toluene',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'Hy C4 fr R800',
            target: 'CRACKER',
            value: 3
          }, {
            source: 'CRACKER',
            target: 'a1',
            value: 1
          }, {
            source: 'CRACKER',
            target: 'H2',
            value: 2
          }, {
            source: 'CRACKER',
            target: 'ETHYLEN',
            value: 3
          }, {
            source: 'CRACKER',
            target: 'Propylene',
            value: 4
          }, {
            source: 'CRACKER',
            target: 'LPG',
            value: 5
          }]
        }
      })
    }
  }
}
</script>