Echarts 实现两个图表联动

最新推荐文章于 2024-05-28 18:24:57 发布
最新推荐文章于 2024-05-28 18:24:57 发布
阅读量666 收藏 1
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49521721/article/details/131291765
版权

请添加图片描述

init(obj, pageSource) {
  var that = this
  console.log(obj, pageSource)
  this.chart = this.$echarts.init(document.getElementById(this.id))
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        animation: false
      },
      backgroundColor: "#5B596080",
      borderWidth: "0",
      textStyle: {
        color: "white" //设置文字颜色
      },
      formatter: function (params) {
        // console.log(params)
        let scatterList = [],
          lineList = [],
          allList = []
        params.forEach((item) => {
          if (item.seriesType == "line") {
            lineList.push(item)
          }
          if (item.seriesType == "scatter") {
            scatterList.push(item)
          }
        })
        if (
          scatterList.length > 0 &&
          (scatterList[0].data[2] > 0 ||
            scatterList[1].data[2] > 0 ||
            scatterList[2].data[2] > 0)
        ) {
          lineList = lineList.concat([
            { seriesType: "interval", name: "事件" }
          ])
        }
        allList = lineList.concat(scatterList)
        var result = ""
        result +=
          params[0].name +
          "<br/>" +
          '<div style="height:30px;line-height:30px;font-size:12px;font-weight:300">' +
          "数据" +
          "</div>"
        allList.forEach((item) => {
          if (item.seriesType == "line") {
            result +=
              '<div style="width:257px;display:flex;justify-content: space-between;padding-right:50px;font-size:12px;font-weight:300">' +
              "<span>" +
              item.marker +
              item.seriesName +
              "</span>" +
              '<p style="display:inline-block;text-align:right;">' +
              (item.value > 10000
                ? (item.value - (item.value % 1000)) / 10000 + "w"
                : item.value) +
              "</p></div>"
          }
          if (item.seriesType == "interval") {
            result +=
              '<div style="height:30px;line-height:30px;font-size:12px;font-weight:300">' +
              item.name +
              "</div>"
          }
          if (item.seriesType == "scatter" && item.data[3]) {
            result +=
              '<div style="width:257px;display:flex;align-item:center;font-size:12px;font-weight:300">' +
              '<span style="display:inline-block;">' +
              item.marker +
              item.seriesName +
              " ： </span>" +
              '<span style="display:inline-block;width:180px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;line-height:20px">' +
              item.data[3] +
              "</span></div>"
          }
          if (pageSource == "realTimeScreen") {
            if (item.seriesName == "讲解" && item.data[4]) {
              that.$emit("emitChanges", 0)
            } else if (item.seriesName == "福袋" && item.data[4]) {
              that.$emit("emitChanges", 1)
            }
          }
        })
        return result
      }
    },
    legend: {
      data: obj.legend,
      top: 20,
      left: 20,
      itemGap: 5,
      itemWidth: 5,
      itemGap: 20,
      textStyle: {
        color: "#E0E0E0",
        fontSize: "13"
      }
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: "all"
        }
      ]
    },
    grid: [
      {
        left: 60,
        right: 20,
        height: "60%",
        top: "15%"
      },
      {
        left: 60,
        right: 20,
        top: "80%",
        height: "20%"
      }
    ],
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: { onZero: true },
        data: obj.timeData,
        axisLabel: {
          textStyle: {
            color: "#ffffff"
          }
        }
      },
      {
        show: false,
        gridIndex: 1,
        type: "category",
        boundaryGap: false,
        axisLine: { onZero: true },
        data: obj.timeData,
        position: "top"
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "数量",
        nameTextStyle: {
          //y轴上方单位的颜色
          color: "#fff",
          padding: [0, 0, 5, -46]
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#3c3a44"
          }
        },
        axisLabel: {
          textStyle: {
            color: "#ffffff"
          }
        }
      },
      {
        gridIndex: 1,
        // name: 'Rainfall(mm)',
        // type: 'value',
        offset: 5,
        inverse: true,
        data: ["讲解", "福袋", "预警"],
        axisLine: {
          show: false //不显示坐标轴线
        },
        axisTick: {
          show: false //不显示坐标轴刻度线
        },
        splitLine: {
          lineStyle: {
            shadowBlur: 0,
            shadowOffsetX: 0,
            shadowOffsetY: 20,
            shadowColor: "#ffffff32", //默认透明
            color: "#2F2D36",
            type: "dashed" //虚线
          },
          show: true //隐藏
        },
        axisLabel: {
          textStyle: {
            color: "#ffffff"
          }
        }
      }
    ],
    series: [
      {
        name: "成交金额",
        type: "line",
        symbolSize: 3, //标记的大小
        symbol: "circle",
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(134, 83, 213,1)"
                },
                {
                  offset: 0.6,
                  color: "rgba(152, 122, 243,0.1)"
                }
              ],
              false
            )
          }
        },
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgb(134, 83, 213)",
            areaStyle: { type: "default" }
          }
        },
        data: obj.payAmtData
      },
      {
        name: "在线人数",
        type: "line",
        symbolSize: 3, //标记的大小
        symbol: "circle",
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(41, 161, 255,1)"
                },
                {
                  offset: 0.6,
                  color: "rgba(25, 104, 255,0.1)"
                }
              ],
              false
            )
          }
        },
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgb(41, 161, 255)",
            areaStyle: { type: "default" }
          }
        },
        data: obj.onlineUserCntData
      },
      {
        name: "进入人数",
        type: "line",
        symbolSize: 3, //标记的大小
        symbol: "circle",
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(134, 82, 213,1)"
                },
                {
                  offset: 0.6,
                  color: "rgba(152, 122, 243,0.1)"
                }
              ],
              false
            )
          }
        },
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgb(134, 82, 213)",
            areaStyle: { type: "default" }
          }
        },
        data: obj.watchUcntData
      },
      {
        name: "离开人数",
        type: "line",
        symbolSize: 3, //标记的大小
        symbol: "circle",
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(141, 141, 187,1)"
                },
                {
                  offset: 0.6,
                  color: "rgba(176, 176, 235,0.1)"
                }
              ],
              false
            )
          }
        },
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgb(141, 141, 187)",
            areaStyle: { type: "default" }
          }
        },
        data: obj.leaveUcntData
      },
      {
        name: "新增粉丝数",
        type: "line",
        symbolSize: 3, //标记的大小
        symbol: "circle",
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(203, 78, 105, 1)"
                },
                {
                  offset: 0.6,
                  color: "rgba(223, 112, 116, 0.1)"
                }
              ],
              false
            )
          }
        },
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgb(203, 78, 105)",
            areaStyle: { type: "default" }
          }
        },
        data: obj.incrFansCntData
      },
      {
        name: "讲解",
        type: "scatter",
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize: function (data) {
          return Math.sqrt(data[2]) * 1
        },
        itemStyle: {
          normal: {
            color: "#8A5BDA"
          }
        },
        data: obj.productData
      },
      {
        name: "福袋",
        type: "scatter",
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize: function (data) {
          return Math.sqrt(data[2]) * 1
        },
        itemStyle: {
          normal: {
            color: "#EA5766"
          }
        },
        data: obj.blessData
      },
      {
        name: "预警",
        type: "scatter",
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize: function (data) {
          return Math.sqrt(data[2]) * 1
        },
        itemStyle: {
          normal: {
            color: "#458FB7"
          }
        },
        data: obj.warnData
      }
    ]
  }
  this.chart.setOption(option)
}

数据格式：
请添加图片描述

乐语_miss
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts双向对比柱状图
weixin_49561225的博客
11-02 2902
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, title: { text: '各阶段人员分布情况', }, t...
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)
wqqstudy的博客
05-22 1976
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表) 利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表； 利用某大学各专业2016-2020年的招生情况绘制饼图与柱状图的联动图表；
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
实现echarts多图联动效果
最新发布
weixin_43637720的博客
05-28 498
里面还有单个移除等功能，有需要可以研究下。
echarts两个饼图关联
故乡的良宵风花的博客
10-13 6244
需求一开始显示两张饼图，第一张是各罪名数量的饼图，第二张是嫌疑人各文化数量的饼图； 显示之后，要求点击第一个饼图的某个罪名，第二张饼图显示该罪名嫌疑人各文化数量的饼图； 给第一张饼图绑定点击事件，默认传入params参数，会输出你点击的这个饼图的点击series的信息，根据params对象知道是那个罪名，然后出发第二张图的生成。
chart 中 legend标签 自定义事件 和 解绑事件
weixin_45725070的博客
11-19 2108
点击legend 标签触发事件 let chartObj = echarts.init(this.$refs["chartOpts"]); // 初始化 chart ... let opts = { legend: { inactiveColor:"#e93030", // 点击后 文字的颜色 默认 #999 selected:{ // 设置 标签是否显示 默认 true "first":true,
echarts中legend图例显示隐藏与多选框联动显示其个数
wj的博客
10-27 3865
参考《echarts的legend图例的显示与隐藏（legend图例进入页面显示的个数）》 和 《【echarts踩坑记录】2、复选框+动态隐藏、显示数据》 确认按钮： <div class="dg-dspv-form-foot"><button type="submit">确定</button></div> 多选框： 实现js函数： $(document).ready(function(){ $(".dg-dspv-form-foot").click(f
【每日积累】echarts饼图联动效果
、蹄码笑春风的博客
09-28 1033
效果体现： 解决方案： echarts.vue: <template> <div> <div :ref="isHighlight" :options="options" theme="custom" style="width: 100%; height: 200px"></div> </div> </template> <script> const getOption = ( da...
Echarts地图与图表联动
10-20
要实现这样的效果，我们首先需要准备两个关键组件：地图图表和饼图。ECharts提供了丰富的地图资源，包括世界地图、中国地图以及各个省份、城市的细分地图。我们可以选择对应的地图类型，然后通过配置项设置地图的...
echarts实现地图定时切换散点与多图表级联联动详解
10-18
在本文中，我们将深入探讨如何使用ECharts实现地图定时切换散点与多图表级联联动的功能。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互功能，适用于各种Web应用程序。我们将按照...
echarts各种图表
05-10
例如，可以实现多图联动，即多个图表通过数据关联进行同步更新；或者使用地图图表结合其他类型图表，展示地理位置上的数据分布。 ECharts还支持大数据量的优化处理，如数据层级渲染、虚拟坐标轴等，确保在大量数据...
Echarts-demo.zip
02-27
比如，如果有两个图表`chart1`和`chart2`，我们可以通过`chart1.setOption({connect: ['chart2']})`和`chart2.setOption({connect: ['chart1']})`来建立它们之间的联动关系。 此外，ECharts还提供了一些内置的联动...
Echarts实现地图点击与折线图联动
DanteLzp的博客
12-14 7043
显示效果：左边调用百度地图API，右边显示折线图。用户点击地图上的点，右边折线图响应点击事件展示不同的折线变化。具体展示效果如图所示： 　　第一步首先要进行界面初始化，引入Echarts的JS文件并初始化两个DOM <div id="container" style="width:700px;height:600px;float:left"></div> <div id="conta
echarts 饼图取消legend图例的点击事件，保留鼠标悬浮legend上显示tooltie提示信息的事件
热门推荐
扬帆前行
06-13 1万+
echarts 饼图 因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏，进行了数据的二次处理，所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件，会关闭一个块，此时就需要重新去计算数据并重新渲染echarts，需求并没有要求做点击关闭部分块在占比图中，网上大部分资源是说设置selectedMode:false，但是这个一旦设置为false，那么点击事件和鼠标悬浮显示tooltie事件就会都取消，显然不符合，经过查官方文档发现legendselectchang
echarts嵌套饼图点击legend内外联动
一位陌生人的博客
07-24 2049
嵌套饼图数据： pieData: { parent: [{ name: '省内仓', value: 900, id:'1' }, { name: '省外仓',
多图表共用legend
qq_42844063的博客
05-25 1960
​ 因此独立出来的图例实际上也是一个饼图，但是只显示legend，饼图给隐藏了，然后在操作legend的时候使用bus把操作的块传给了其他饼图，并执行函数同步操作，就形成了共用legend，并可操作其他饼图。​ 这四个饼图的legend都是一样的，数据格式也是一样的，只是具体数据内容不一样。多饼图共用一个legend，并且要求legend可以控制所有饼图。​ 2.鼠标放上 饼图强调，并显示tip，移走隐藏。​ 1.legend可以控制某一块饼显隐。一、lengend和 饼图盒子代码。
多个echarts联动处理
qq_35381576的博客
11-28 1601
是 ECharts 提供的方法之一，用于将多个图表实例连接在一起，实现它们的联动效果。通过连接，一个图表的操作（如缩放、平移）会影响到其他连接的图表，从而在多个图表之间保持一致性的视图状态。比如有两个echart图表，需求要求鼠标放在其中一个图的指标上，放在周一，浮窗显示周一的数据，其他的图表也同时浮窗显示周一的，都显示对应的X轴坐标。事件，然后通过获取点击的坐标信息，将这些信息传递给其他图表的 tooltip 进行显示。例如，如果您对一个图表进行了缩放，其他连接的图表也会相应地进行缩放。
vue3.0+echarts 嵌套数据的饼图并有联动效果
iphonepl的博客
03-13 604
监听浏览器的大小，动态的改变echarts。2、点击外层的饼图，里层的饼图实时变动。3、始终保持外层饼图有选中的状态。是使echarts不具有响应式。1、默认选中外层的第一个。
echarts两个饼图联动
04-24
好的，你想了解echarts中如何实现两个饼图之间的联动。具体实现方式可以通过绑定事件来进行。例如，为第一个饼图设置一个click事件，在事件中获取当前点击的数据，并把相应的数据传递给第二个饼图。第二个饼图根据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值