vue-cli echarts 在tab切换时图标的宽度为默认的100px的bug解决方案

前沿

---

最近在用echarts开发大数据可视化时，发现在tab切换时echarts图标默认隐藏的时候，图表是不渲染的，等再次有数据的时候就会渲染，但这时候渲染的默认是100px,这就很坑了，今天折腾了一下午，非常爽，简直不知道从那下手，看了一遍有一边的代码。老以为是样式写错了，扎心了，现在记录下来，以方便以后学习和解决问题。行了，不说了，上解决方案。

解决方法，就是每次绘图之前动态在给eharts赋一次width就好了

       

            

          
       setTimeout(() => {
          let pieCharts = document.getElementById(
            "AssetAllocationProductStructurePieChart"
          );
       ******** 先动态设置一遍width然后再初始化      重点就是这两句*********
          pieCharts.style.width = this.$refs.pieEcharts.offsetWidth + "px";
          let myChart = this.$echarts.init(pieCharts);

          myChart.clear();
       myChart.setOption(
            {
              tooltip: {
                trigger: "item",
                formatter: "{a} 
{b} : {d}%"
              },

              legend: {
                //图例组件
                orient: "vertical", //图例列表的布局朝向
                top: "31.3%", //图例组件距离容器顶部的距离
                right: "0%", //图例组件距离容器右侧的距离
                itemGap: 22,
                textStyle: {
                  color: this.echartsXYcolor
                }
                // data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
              },
              series: [
                {
                  name: AAllocation.acc_time,
                  type: "pie",
                  radius: "45%", // 饼图的半径
                  center: ["35%", "50%"], //饼图的中心坐标
                  data: PieLists,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)"
                    },
                    normal: {
                      label: {
                        show: false //隐藏标示文字
                      },
                      labelLine: {
                        show: false //隐藏标示线
                      }
                    }
                  }
                }
              ]
            },
            true
          );
        }, 10);