所有图表父级添加zoom时操作点击位置偏移

[tylerrrkd]

One-line summary [问题简述]

所有图表父级添加zoom时操作点击位置偏移

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 4.0.4
• Browser version [浏览器类型和版本]: Chrome 66.0.3359.181
• OS Version [操作系统类型和版本]: Windows 10

Expected behaviour [期望结果]

鼠标点击时所有tooltip不偏移

ECharts option [ECharts配置项]

initChart(lastHalfYearRank) {
        // this.rankChart && this.rankChart.dispose();
        this.rankChart = echarts.init(this.$refs["chartOfHalfYearRank"]);
        // this.rankChart.resize();
        let option = {
          baseOption: {
            color: ["#80f990", "#23a6fe"],
            grid: {
              x: 55,
              y: 70,
              x2: 48,
              y2: 45
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              itemWidth: 20,
              itemHeight: 10,
              itemGap: 10,
              data: ["基础版", "行业版"],
              textStyle: {
                color: "#fff",
                fontSize: 14
              }
            },
            // calculable: true,
            xAxis: [{
              type: "category",
              name: "(月份)",
              nameTextStyle: {
                color: "#fff"
              },
              data: lastHalfYearRank.barChartxAxisMonthList,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#657181",
                  width: 2
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }],
            yAxis: [{
              type: "value",
              show: true,
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#657181",
                  width: 2
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              }
            }],
            series: [{
                name: "基础版",
                type: "bar",
                data: lastHalfYearRank.barCharyAxisBusBaseList,
                smooth: false,
                itemStyle: {
                  //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                  emphasis: {
                    barBorderRadius: [30, 30, 0, 0]
                  },
                  normal: {
                    //柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "#87fd8d"
                      },
                      {
                        offset: 1,
                        color: "#13c0c5"
                      }
                    ])
                  }
                }
              },
              {
                name: "行业版",
                type: "bar",
                barGap: 0,
                data: lastHalfYearRank.barCharyAxisBusIndustryList,
                itemStyle: {
                  //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                  emphasis: {
                    barBorderRadius: [30, 30, 0, 0]
                  },
                  normal: {
                    //柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "#29b2fe"
                      },
                      {
                        offset: 1,
                        color: "#0260fd"
                      }
                    ])
                  }
                }
              }
            ]
          }
        };
        this.rankChart.setOption(option);
      }

html 和 css

<div class="row chartOfHalfYearRankBg">
    <h5 class="chartTitle col-lg-1">
      <div class="block"></div>最近半年业务发展趋势图</h5>
    <div class="chartOfHalfYearRank" ref="chartOfHalfYearRank"></div>
  </div>

@media only screen and (min-width: 1281px) and (max-width: 1366px) {
    .chartOfHalfYearRankBg {
      zoom: 0.7;
    }
    .chartTitle {
      line-height: 1rem;
    }
  }

Other comments [其他信息]

参考 issue #6674 #6083 和 #3635 均无法解决！
same problem in issue #6674 and #6083 and #3635

[tylerrrkd]

@pissang Thank you baby.

[cn-xufei]

希望能尽快解决，有没有临时的解决方案

[582324763]

也是遇到这个问题，请问如何解决呢？

[cn-xufei]

得看看
@100pah
有没有排期了

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!