echarts实现双柱图数据联动

最新推荐文章于 2024-05-22 10:05:28 发布
最新推荐文章于 2024-05-22 10:05:28 发布
阅读量2.6k 收藏 8
点赞数 3
分类专栏： echarts 文章标签： echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44700978/article/details/120084821
版权

一、效果

实现如下的双柱图联动
在这里插入图片描述

二、需求分析

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="powerMonitoringContentEcharts"
          id="powerMonitoringContentEcharts"
          style="width: auto; height: 300px"
        ></div> -->
        <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>

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

这是提莫大人
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Echarts 实现两个图表联动
leyu_miss的博客
06-19 648
【代码】Echarts 实现两个图表联动。
echarts双向对比柱状图
weixin_49561225的博客
11-02 2877
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, title: { text: '各阶段人员分布情况', }, t...
Echarts地图与图表联动
10-20
使用Echarts实现地图与图表的联动。这里的效果为点击美国的某个州，下面就会对应的刷新该州与其他州人口的对比饼图。全网首发，独此一家。
echarts双柱_双向柱状图
weixin_39907658的博客
12-20 4388
介绍双向柱状图多用于展示包含相反含义的数据的对比。其中图表的一个轴显示正在比较的类别，而另一轴代表对应的刻度值。双向柱状图一般用于正负两份相反数据的对比。例如一周内个人收入和支出的统计，其中收入为正数，支出为负数。使用双向柱状图可以很明确的对收入和支出做出对比，并能从单个系列中分析收入和支出的数值及波动。双向柱状图可分为垂直方向的双向柱状图(如上图)和水平方向的双向柱状图(又叫正负条形图，如下图)...
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)
最新发布
wqqstudy的博客
05-22 1778
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表) 利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表； 利用某大学各专业2016-2020年的招生情况绘制饼图与柱状图的联动图表；
echarts双向柱状图
webtext的博客
12-22 1589
echarts双向柱状图
Echarts 双向柱图封装，含双值数据及名称位置修改
m0_49017085的博客
07-28 2188
实现如下图所示双向柱状图，难点名称位置的调整，双值展现，以及双值最大值设置。关键属性grid第一个对象中设置的为名称的位置（left），第二个第三个分别对应左右两边柱状图的位置及宽度，为实现自适应最好宽度以及上下左右属性都用百分比设置y轴的gridIndex为0时为名字显示的数据，为1时为左侧外侧显示的数据，为2时为右侧外侧显示的数据，具体样式和需求对应即可series中的label定义柱体中的数值百分比位置https。...
Echart - 双柱状图（bar）
jianghaha2011的博客
04-27 6212
let option = { backgroundColor: "transparent", tooltip: { trigger: "axis", axisPointer: { type: "shadow" } }, legend: { ...
echarts数据地图实现省市联动点击
09-21
在本文中，我们将深入探讨如何使用ECharts库来实现数据地图的省市联动点击效果。ECharts是一款基于JavaScript的开源可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及地图等，且支持在各种浏览器上...
echarts全国省市三级地图联动
12-14
综上所述，“echarts全国省市三级地图联动”涉及到ECharts的多级地图数据处理、事件监听、数据绑定、用户体验优化等多个方面。通过掌握这些知识点，我们可以构建出一个交互性强、视觉效果出色的全国地图应用。在实际...
echarts地图省市区三级下钻联动
04-06
在本文中，我们将深入探讨如何在Vue.js项目中实现基于ECharts的地图省市区三级下钻联动功能。ECharts是一款由百度开发的开源JavaScript可视化库，它提供了丰富的图表类型和强大的交互性，支持自定义地图，非常适合...
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
echarts柱状图 双柱状图基本用法
m0_62285976的博客
06-27 8552
echarts柱状图 双柱状图基本用法
echarts数据可视化图表（二）：双柱状图
前端互助会
10-31 6659
echarts数据可视化图表（二）：双柱状图 效果图： html <script src="js/4.2.1/echarts.min.js"></script> <div class="box-echarts" id="Echarts09"></div> js var loadEcharts09 = function () { var myChartss = echarts.init(document.getEle.
echarts 双向柱状图 共用y轴
zhufan2333的博客
10-20 682
【代码】echarts 双向柱状图 共用y轴。
echarts双向柱状图效果实现
weixin_43123984的博客
05-27 929
效果图展示 注意部分 背景圆角效果实现（当前使用echarts4.9.0版本，如部分效果失效，可能版本原因所致） 完整代码展示 <template> <div ref="chartItem" style="width: 520px; height: 190px"></div> </template> <script> import echarts from 'echarts' import { getVisualToolData } fr
echarts 双立体柱状图
qq_40279395的博客
06-15 1131
const xData = ['南京', '苏州', '连云港', '扬州', '无锡'];//data1存放背景条的数值，for循环使其数量与value一致。data: ['市政管道', '庭院管道', '立管'],show: true, // 是否显示坐标轴轴线。name: '单位（公里）',name: '市政管道',name: '庭院管道',name: '市政管道',name: '庭院管道',name: '立管',name: '立管',
echarts之折线图
MR_SNAIL的博客
09-08 335
option = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: '3%', right:.
ECharts实现同轴双向柱状图（点击bar高亮）
xiaomou_的博客
08-20 2064
echarts实现点击高亮的同轴双向柱状图
Echarts世界地图和网页表格数据交互联动.pdf
11-27
Echarts世界地图和网页表格数据交互联动

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值