echarts实现双柱图数据联动

超、凢脫俗 2022-09-10 02:25 279阅读 0赞

## 一、效果 ##

实现如下的双柱图联动  
![在这里插入图片描述][e1f39c3ed3a844db99f3f5ef35757f62.gif]

## 二、需求分析 ##

### 1. 两个echarts实现联动 ###

用到echarts中的 echarts.connect（\[图表名称1，图表名称2\]）

let stackingBar1 = this.$echarts.init(document.getElementById("myCharts1"));
     let stackingBar2 = this.$echarts.init(document.getElementById("myCharts2"));
     stackingBar1.setOption(option1);
     stackingBar2.setOption(option2);
     echarts.connect([stackingBar1, stackingBar2]);

> 这里有一个坑，legend必须一样，不然联动不了

### 2. legend点击只显示当前legend的数据 ###

首先配置legend，第一个为默认显示，其他项隐藏

selected: {
        
                "220kV": true,
                "110kV": false,
                "500kV": false,
                "35kV": false,
              },
    data: ["500kV", "35kV", "220kV", "110kV"],

写legend的点击事件(legendselectchanged)，点击的时候设置为true，没有点击的时候设置为false

stackingBar2.on("legendselectchanged", function (params) {
        
            for (var index = 0; index < option2.legend.data.length; index++) {
        
              if (params.name == option2.legend.data[index]) {
        
                option2.legend.selected[params.name] = true;
                stackingBar2.setOption(option2);
                stackingBar1.setOption(option1);
              } else {
        
                console.log(option2.legend.data[index]);
                option2.legend.selected[option2.legend.data[index]] = false;
                stackingBar2.setOption(option2);
              }
            }
            // do something
          });

### 3.因需要联动，所以只能legend的data只能写4个，并没有找到隐藏其中的legend，实际需要两个，只能移动出图表 ###

legend: {
        
              show: true,
              left: "-55%",
              right: "2%",
              x: "center",
              y: "bottom",
              padding: [10, 10, 0, 50],
              width: "100%",
              textStyle: {
        
                color: "#fff",
              },
              selected: {
        
                "220kV": true,
                "110kV": false,
                "500kV": false,
                "35kV": false,
              },
              data: ["500kV", "35kV", "220kV", "110kV"],
            },

## 三、源码 ##

<template>
      <div class="transmit-electricity">
        
        <div class="power-monitoring-content">
          <div class="power-monitoring-content_top"></div>
          <div class="power-monitoring-content_bottom">
            
            <div
              class="my-charts1"
              id="myCharts1"
              style="width: 300px; height: 400px"
            ></div>
            <div
              class="my-charts2"
              id="myCharts2"
              style="width: 300px; height: 400px"
            ></div>
          </div>
        </div>
        <div class="power-monitoring-bottom"></div>
      </div>
    </template>
    <script>
    import echarts from "echarts";
    export default {
        
      data() {
        
        return {
        };
      },
      created() {
        },
      watch: {
        },
      mounted() {
        
        let that = this;
        that.drawDoubleEcharts();
      },
      methods: {
        
        drawDoubleEcharts() {
        
          let that = this;
    
          let option1 = {
        
            title: {
        
              text: "线路长度(km)",
              padding: [20, 0, 0, 35],
              textStyle: {
        
                color: "#B8D7E9",
              },
            },
            barWidth: "30%",
            legend: {
        
              show: true,
              left: "60%",
              right: "2%",
              x: "center", //可设定图例在左、右、居中
              y: "bottom", //可设定图例在上、下、居中
              padding: [0, 100, 0, 0],
              width: "100%",
              selected: {
        
                "220kV": true,
                "110kV": false,
                "500kV": false,
                "35kV": false,
              },
              data: ["500kV", "35kV", "220kV", "110kV"],
            },
            xAxis: {
        
              type: "value",
              splitLine: {
        
                show: true,
                lineStyle: {
        
                  color: ["#315070"],
                  width: 1,
                  type: "solid",
                },
              },
            },
            yAxis: {
        
              type: "category",
              inverse: true,
              axisTick: {
        
                show: false,
              },
              axisLine: {
        
                show: false,
              },
              splitLine: {
        
                show: false,
              },
              axisLabel: {
        
                formatter: (value, index) => {
        
                  return "{d|" + value + "}";
                },
                rich: {
        
                  d: {
        
                    color: "white",
                  },
                },
              },
            },
            series: [
              {
        
                name: "220kV",
                type: "bar",
                barWidth: "30%",
                label: {
        
                  show: true,
                  position: "right",
                  textStyle: {
        
                    color: function (params) {
        
                      var colorList = ["#0679e3", "#07b8d9"];
                      return colorList[params.dataIndex];
                    },
                    fontSize: 18,
                  },
                },
                data: [12202, 12202, 12202, 12202],
                itemStyle: {
        
                  normal: {
        
                    color: function (params) {
        
                      var colorList = [
                        ["#40B034", "#063518"],
                        ["#1F77BF", "#0F2634"],
                        ["#5AC0D6", "#12393E"],
                        ["#CCAA2C", "#3A331C"],
                      ];
                      var colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
        
                            offset: 0,
                            color: colorItem[0],
                          },
                          {
        
                            offset: 1,
                            color: colorItem[1],
                          },
                        ],
                        false
                      );
                    },
                  },
                },
              },
              {
        
                name: "110kV",
                type: "bar",
                barWidth: "30%",
                label: {
        
                  show: true,
                  position: "right",
                  textStyle: {
        
                    color: function (params) {
        
                      var colorList = ["#0679e3", "#07b8d9"];
                      return colorList[params.dataIndex];
                    },
                    fontSize: 18,
                  },
                },
                data: [110110, 110110, 110110, 110110],
                itemStyle: {
        
                  normal: {
        
                    color: function (params) {
        
                      var colorList = [
                        ["#40B034", "#063518"],
                        ["#1F77BF", "#0F2634"],
                        ["#5AC0D6", "#12393E"],
                        ["#CCAA2C", "#3A331C"],
                      ];
                      var colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
        
                            offset: 0,
                            color: colorItem[0],
                          },
                          {
        
                            offset: 1,
                            color: colorItem[1],
                          },
                        ],
                        false
                      );
                    },
                  },
                },
              },
              {
        
                name: "500kV",
                type: "bar",
                barWidth: "30%",
                label: {
        
                  show: true,
                  position: "right",
                  textStyle: {
        
                    color: function (params) {
        
                      var colorList = ["#0679e3", "#07b8d9"];
                      return colorList[params.dataIndex];
                    },
                    fontSize: 18,
                  },
                },
                data: [500500, 500500, 500500, 500500],
                itemStyle: {
        
                  normal: {
        
                    color: function (params) {
        
                      var colorList = [
                        ["#40B034", "#063518"],
                        ["#1F77BF", "#0F2634"],
                        ["#5AC0D6", "#12393E"],
                        ["#CCAA2C", "#3A331C"],
                      ];
                      var colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
        
                            offset: 0,
                            color: colorItem[0],
                          },
                          {
        
                            offset: 1,
                            color: colorItem[1],
                          },
                        ],
                        false
                      );
                    },
                  },
                },
              },
              {
        
                name: "35kV",
                type: "bar",
                barWidth: "30%",
                label: {
        
                  show: true,
                  position: "right",
                  textStyle: {
        
                    color: function (params) {
        
                      var colorList = ["#0679e3", "#07b8d9"];
                      return colorList[params.dataIndex];
                    },
                    fontSize: 18,
                  },
                },
                data: [353535, 353535, 353535, 353535],
                itemStyle: {
        
                  normal: {
        
                    color: function (params) {
        
                      var colorList = [
                        ["#40B034", "#063518"],
                        ["#1F77BF", "#0F2634"],
                        ["#5AC0D6", "#12393E"],
                        ["#CCAA2C", "#3A331C"],
                      ];
                      var colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
        
                            offset: 0,
                            color: colorItem[0],
                          },
                          {
        
                            offset: 1,
                            color: colorItem[1],
                          },
                        ],
                        false
                      );
                    },
                  },
                },
              },
            ],
          };
    
          let option2 = {
        
            title: {
        
              text: "杆塔数量(基)",
              padding: [20, 0, 0, 35],
              textStyle: {
        
                color: "#B8D7E9",
              },
            },
            legend: {
        
              show: true,
              left: "-55%",
              right: "2%",
              x: "center",
              y: "bottom",
              padding: [10, 10, 0, 50],
              width: "100%",
              textStyle: {
        
                color: "#fff",
              },
              selected: {
        
                "220kV": true,
                "110kV": false,
                "500kV": false,
                "35kV": false,
              },
              data: ["500kV", "35kV", "220kV", "110kV"],
            },
            xAxis: {
        
              type: "value",
              splitLine: {
        
                show: true,
                lineStyle: {
        
                  color: ["#315070"],
                  width: 1,
                  type: "solid",
                },
              },
            },
            yAxis: {
        
              type: "category",
              inverse: true,
              axisTick: {
        
                show: false,
              },
              axisLine: {
        
                show: false,
              },
              splitLine: {
        
                show: false,
              },
              axisLabel: {
        
                formatter: (value, index) => {
        
                  return "{d|" + value + "}";
                },
                rich: {
        
                  d: {
        
                    color: "white",
                  },
                },
              },
            },
            series: [
              {
        
                name: "110kV",
                type: "bar",
                barWidth: "30%",
                label: {
        
                  show: true,
                  position: "right",
                  textStyle: {
        
                    color: function (params) {
        
                      var colorList = ["#0679e3", "#07b8d9"];
                      return colorList[params.dataIndex];
                    },
                    fontSize: 18,
                  },
                },
                data: [2110211, 2110211, 2110211, 2110211],
                itemStyle: {
        
                  normal: {
        
                    color: function (params) {
        
                      var colorList = [
                        ["#40B034", "#063518"],
                        ["#1F77BF", "#0F2634"],
                        ["#5AC0D6", "#12393E"],
                        ["#CCAA2C", "#3A331C"],
                      ];
                      var colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
        
                            offset: 0,
                            color: colorItem[0],
                          },
                          {
        
                            offset: 1,
                            color: colorItem[1],
                          },
                        ],
                        false
                      );
                    },
                  },
                },
              },
              {
        
                name: "220kV",
                type: "bar",
                barWidth: "30%",
                label: {
        
                  show: true,
                  position: "right",
                  textStyle: {
        
                    color: function (params) {
        
                      var colorList = ["#0679e3", "#07b8d9"];
                      return colorList[params.dataIndex];
                    },
                    fontSize: 18,
                  },
                },
                data: [500500, 500500, 500500, 500500],
                itemStyle: {
        
                  normal: {
        
                    color: function (params) {
        
                      var colorList = [
                        ["#40B034", "#063518"],
                        ["#1F77BF", "#0F2634"],
                        ["#5AC0D6", "#12393E"],
                        ["#CCAA2C", "#3A331C"],
                      ];
                      var colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
        
                            offset: 0,
                            color: colorItem[0],
                          },
                          {
        
                            offset: 1,
                            color: colorItem[1],
                          },
                        ],
                        false
                      );
                    },
                  },
                },
              },
              {
        
                name: "500kV",
                type: "bar",
                barWidth: "30%",
                label: {
        
                  show: true,
                  position: "right",
                  textStyle: {
        
                    color: function (params) {
        
                      var colorList = ["#0679e3", "#07b8d9"];
                      return colorList[params.dataIndex];
                    },
                    fontSize: 18,
                  },
                },
                data: [500500, 500500, 500500, 500500],
                itemStyle: {
        
                  normal: {
        
                    color: function (params) {
        
                      var colorList = [
                        ["#40B034", "#063518"],
                        ["#1F77BF", "#0F2634"],
                        ["#5AC0D6", "#12393E"],
                        ["#CCAA2C", "#3A331C"],
                      ];
                      var colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
        
                            offset: 0,
                            color: colorItem[0],
                          },
                          {
        
                            offset: 1,
                            color: colorItem[1],
                          },
                        ],
                        false
                      );
                    },
                  },
                },
              },
              {
        
                name: "35kV",
                type: "bar",
                barWidth: "30%",
                label: {
        
                  show: true,
                  position: "right",
                  textStyle: {
        
                    color: function (params) {
        
                      var colorList = ["#0679e3", "#07b8d9"];
                      return colorList[params.dataIndex];
                    },
                    fontSize: 18,
                  },
                },
                data: [353535, 353535, 353535, 353535],
                itemStyle: {
        
                  normal: {
        
                    color: function (params) {
        
                      var colorList = [
                        ["#40B034", "#063518"],
                        ["#1F77BF", "#0F2634"],
                        ["#5AC0D6", "#12393E"],
                        ["#CCAA2C", "#3A331C"],
                      ];
                      var colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
        
                            offset: 0,
                            color: colorItem[0],
                          },
                          {
        
                            offset: 1,
                            color: colorItem[1],
                          },
                        ],
                        false
                      );
                    },
                  },
                },
              },
            ],
          };
    
          let stackingBar1 = this.$echarts.init(
            document.getElementById("myCharts1")
          );
    
          let stackingBar2 = this.$echarts.init(
            document.getElementById("myCharts2")
          );
    
          stackingBar2.on("legendselectchanged", function (params) {
        
            for (var index = 0; index < option2.legend.data.length; index++) {
        
              if (params.name == option2.legend.data[index]) {
        
                option2.legend.selected[params.name] = true;
                stackingBar2.setOption(option2);
                stackingBar1.setOption(option1);
              } else {
        
                console.log(option2.legend.data[index]);
                option2.legend.selected[option2.legend.data[index]] = false;
                stackingBar2.setOption(option2);
              }
            }
            // do something
          });
          stackingBar1.on("legendselectchanged", function (params) {
        
            for (var index = 0; index < option1.legend.data.length; index++) {
        
              if (params.name == option1.legend.data[index]) {
        
                option1.legend.selected[params.name] = true;
                stackingBar2.setOption(option2);
                stackingBar1.setOption(option1);
              } else {
        
                option1.legend.selected[option1.legend.data[index]] = false;
                stackingBar1.setOption(option1);
              }
            }
            // do something
          });
    
          stackingBar1.setOption(option1);
          stackingBar2.setOption(option2);
          echarts.connect([stackingBar1, stackingBar2]);
        },
      },
    };
    </script>
    
    <style scoped lang='scss'>
    @import "@/styles/fullView/common.scss";
    .power-monitoring-content_bottom {
        
      display: flex;
      width: 100%;
      height: 400px;
      .my-charts1 {
        
        flex: 1;
        width: 100%;
        height: 400px;
        margin-right: 50px;
      }
      .my-charts2 {
        
        flex: 1;
        width: 100%;
        height: 400px;
      }
    }
    </style>

如果有更好的办法，还请指教。

[e1f39c3ed3a844db99f3f5ef35757f62.gif]: /images/20220829/dc4e8cf17c144d188e76963e840416fd.png