桑基图的修改方法
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>
分类:
echarts图表的建设
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
2020-07-07 vue的生命周期详解