桑基图的修改方法
1. 按照图表中的方式创建 echarts 这种方式是 根据 computed 计算属性的方式来监听数据 渲染echarts 图表
<template>
<div class="hello2">
<div class="hello2-top">
<router-link to="/flowto2">pv流向图</router-link>
</div>
<div class="hello2-top2">
<vechart class="hello2-vechart" :options="pvflow" />
</div>
</div>
</template>
<script>
import vechart from "../../components/Vechart";
export default {
data() {
return {
option: {
tooltip: {
trigger: "item",
triggerOn: "mousemove",
},
color: [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
],
series: {
type: "sankey",
type: "sankey",
top: "4%",
left: "4%",
right: "14%",
bottom: "4%",
nodeWidth: 15,
focusNodeAdjacency: "allEdges",
emphasis: {
focus: "adjacency",
},
data: [
{
name: "FABL10",
},
{
name: "FABL30",
},
{
name: "MODL10",
},
{
name: "MODL20",
},
{
name: "MODL30",
},
{
name: "MODL40",
},
//FL10
{
name: "FAB栋L10层流量",
},
//FL30
{
name: "FAB栋L30层流量1",
},
{
name: "FAB栋L30层流量2",
},
{
name: "FAB栋L30层流量3",
},
//ML10
{
name: "MOD栋L10层流量1",
},
{
name: "MOD栋L10层流量2",
},
{
name: "MOD栋L10层流量3",
},
{
name: "MOD栋L10层流量5",
},
{
name: "MOD栋L10层流量6",
},
{
name: "MOD栋L10层流量7",
},
//ML20
{
name: "MOD栋L20层PV压力值1",
},
{
name: "MOD栋L20层PV压力值2",
},
//ML30
{
name: "MOD栋L30层PV压力值1",
},
{
name: "MOD栋L30层PV压力值2",
},
//ML40
{
name: "MOD栋L40层PV压力值1",
},
],
links: [
//FL10
{
source: "FABL10",
target: "FAB栋L10层流量",
value: 15,
},
//FL30
{
source: "FABL30",
target: "FAB栋L30层流量1",
value: 13,
},
{
source: "FABL30",
target: "FAB栋L30层流量2",
value: 12,
},
{
source: "FABL30",
target: "FAB栋L30层流量3",
value: 13,
},
//M10
{
source: "MODL10",
target: "MOD栋L10层流量1",
value: 13,
},
{
source: "MODL10",
target: "MOD栋L10层流量2",
value: 12,
},
{
source: "MODL10",
target: "MOD栋L10层流量3",
value: 12,
},
{
source: "MODL10",
target: "MOD栋L10层流量5",
value: 12,
},
{
source: "MODL10",
target: "MOD栋L10层流量6",
value: 12,
},
{
source: "MODL10",
target: "MOD栋L10层流量7",
value: 12,
},
//M20
{
source: "MODL20",
target: "MOD栋L20层PV压力值1",
value: 12,
},
{
source: "MODL20",
target: "MOD栋L10层流量2",
value: 12,
},
//M30
{
source: "MODL30",
target: "MOD栋L10层流量1",
value: 12,
},
{
source: "MODL30",
target: "MOD栋L10层流量2",
value: 12,
},
//M40
{
source: "MODL40",
target: "MOD栋L40层PV压力值1",
value: 12,
},
],
label: {
color: "#FEFFFF",
fontSize: 12,
},
lineStyle: {
color: "source",
curveness: 0.5,
},
},
},
};
},
components: { vechart },
mounted() {
// this.$store.dispatch("mqttMsg1", "csot-pv");
},
computed: {
pvflow() {
return {
...this.option,
series: {
...this.option.series,
data: [
{
name: "FABL10",
},
{
name: "FABL30",
},
{
name: "MODL10",
},
{
name: "MODL20",
},
{
name: "MODL30",
},
{
name: "MODL40",
},
//FL10
{
name: "FAB栋L10层流量",
value: this.$store.state.FL10FIT1.v,
},
//FL30
{
name: "FAB栋L30层流量1",
value: this.$store.state.FL30FIT1.v,
},
{
name: "FAB栋L30层流量2",
value: this.$store.state.FL30FIT2.v,
},
{
name: "FAB栋L30层流量3",
value: this.$store.state.FL30FIT3.v,
},
//ML10
{
name: "MOD栋L10层流量1",
value: this.$store.state.ML10FIT1.v,
},
{
name: "MOD栋L10层流量2",
value: this.$store.state.ML10FIT2.v,
},
{
name: "MOD栋L10层流量3",
value: this.$store.state.ML10FIT3.v,
},
{
name: "MOD栋L10层流量5",
value: this.$store.state.ML10FIT5.v,
},
{
name: "MOD栋L10层流量6",
value: this.$store.state.ML10FIT6.v,
},
{
name: "MOD栋L10层流量7",
value: this.$store.state.ML10FIT7.v,
},
//ML20
{
name: "MOD栋L20层PV压力值1",
value: this.$store.state.ML20FIT1.v,
},
{
name: "MOD栋L20层PV压力值2",
value: this.$store.state.ML20FIT2.v,
},
//ML30
{
name: "MOD栋L30层PV压力值1",
value: this.$store.state.ML30FIT1.v,
},
{
name: "MOD栋L30层PV压力值2",
value: this.$store.state.ML30FIT2.v,
},
//ML40
{
name: "MOD栋L40层PV压力值1",
value: this.$store.state.ML40FIT1.v,
},
],
links: [
//FL10
{
source: "FABL10",
target: "FAB栋L10层流量",
value: this.$store.state.FL10FIT1.v,
},
//FL30
{
source: "FABL30",
target: "FAB栋L30层流量1",
value: this.$store.state.FL30FIT1.v,
},
{
source: "FABL30",
target: "FAB栋L30层流量2",
value: this.$store.state.FL30FIT2.v,
},
{
source: "FABL30",
target: "FAB栋L30层流量3",
value: this.$store.state.FL30FIT3.v,
},
//M10
{
source: "MODL10",
target: "MOD栋L10层流量1",
value: this.$store.state.ML10FIT1.v,
},
{
source: "MODL10",
target: "MOD栋L10层流量2",
value: this.$store.state.ML10FIT2.v,
},
{
source: "MODL10",
target: "MOD栋L10层流量3",
value: this.$store.state.ML10FIT3.v,
},
{
source: "MODL10",
target: "MOD栋L10层流量5",
value: this.$store.state.ML10FIT5.v,
},
{
source: "MODL10",
target: "MOD栋L10层流量6",
value: this.$store.state.ML10FIT6.v,
},
{
source: "MODL10",
target: "MOD栋L10层流量7",
value: this.$store.state.ML10FIT7.v,
},
//M20
{
source: "MODL20",
target: "MOD栋L20层PV压力值1",
value: this.$store.state.ML20FIT1.v,
},
{
source: "MODL20",
target: "MOD栋L10层流量2",
value: this.$store.state.ML20FIT2.v,
},
//M30
{
source: "MODL30",
target: "MOD栋L10层流量1",
value: this.$store.state.ML30FIT1.v,
},
{
source: "MODL30",
target: "MOD栋L10层流量2",
value: this.$store.state.ML30FIT2.v,
},
//M40
{
source: "MODL40",
target: "MOD栋L40层PV压力值1",
value: this.$store.state.ML40FIT1.v,
},
],
label: {
color: "#FEFFFF",
fontSize: 16,
lineHeight: 20,
formatter: (params) => {
if (
params.data.name === "FABL10" ||
params.data.name === "FABL30" ||
params.data.name === "MODL10" ||
params.data.name === "MODL20" ||
params.data.name === "MODL30" ||
params.data.name === "MODL40"
) {
return params.data.name;
} else {
// console.log(params.data.name);
return params.data.name + params.data.value;
}
},
},
},
};
},
},
methods: {},
};
</script>
<style scoped lang="scss">
* {
padding: 0;
margin: 0;
}
.hello2 {
height: 100vh;
background: url("../../assets/img/daping.jpg") no-repeat center center;
background-size: 100% 100%;
position: relative;
overflow: hidden;
.hello2-top {
position: absolute;
top: 15px;
left: 50%;
font-size: 24px;
font-weight: 600;
color: #00f4ff;
transform: translateX(-50%);
height: 50px;
}
.hello2-top2 {
margin-top: 50px;
height: 90%;
.hello2-vechart {
height: 90%;
// height: 400px;
// background: #fff;
text-align: center;
}
}
}
</style>
