美文网首页
echarts tab切换默认宽度100px的问题

echarts tab切换默认宽度100px的问题

作者: d_Coder | 来源:发表于2019-07-30 15:31 被阅读0次

最近在vue中使用echarts时,碰到的一个echarts bug,tab切换时,echarts图表默认隐藏的时候,是不渲染的,等再次有数据的时候就会渲染,但这时候渲染的默认宽度是100px。

查询了许多方法终于解决了问题,现在讲解决方法记录一下,希望都其他人能有所帮助。

解决办法:

就是每次绘图之前动态在重新给eharts赋一次width

<template>

    <div id="staticWidth">

      <div style="width: 100%; position:relative">

        <el-button type="primary" style="position:absolute;right:10%;top:10px;z-index: 999" @click="changeTable()">切换展示方式</el-button>

      <div v-show="whichOne" >

          <div id='pieCharts' style="height:500px;"></div>

        </div>



        <div v-show="!whichOne" >

          <div id="compositeLine" :option="optionLine" ></div>

        </div>

          </div>

    </div>

</template>

<script>

  import echarts from 'echarts';

  import {

    optionLine

  } from '@/components/js/chartjs/hydLine.js';

//hydLine 封装echarts line  export default {

    name: 'aaa',

    data() {

      return {

        whichOne: true,

        loading: true,

        optionLine: {},

        dataListArr: [{

            'number': 10,

            'percentNum': 0

          },

          {

            'number': -80,

            'percentNum': 0

          },

          {

            'number': 30,

            'percentNum': 0

          },

          {

            'number': -50,

            'percentNum': 0

          }

        ]

      }

    },

    components: {},

    created() {

      let maxIndex = 0,

        maxNegative = 0,

        maxPositive = 0;

      this.dataListArr.forEach(function (v, i) {

        if (Math.abs(v.number) <= Math.abs(v.number)) {

          maxIndex = i;

        }

        if ((v.number > 0) && (v.number > maxPositive)) {

          maxPositive = v.number;

        }

        if ((v.number < 0) && (v.number < maxNegative)) {

          maxNegative = v.number;

        }

      });

      this.$nextTick(function () {

        document.querySelector('.line-chart').style.marginTop = -(maxPositive - maxNegative) / 20 + 'rem';

      })

      let maxnumber = Math.abs(this.dataListArr[maxIndex].number);

      setTimeout(function () {

        this.dataListArr.forEach(function (value, index) {

          value.percentNum = Math.abs(value.number) / maxnumber;

        });

        console.log(this.dataListArr);

      }.bind(this), 0)

    },

    activated() {

      this.handleListener();

    },

    computed: {

    },

    methods: {

        changeTable(){

          let _this = this;

          _this.whichOne=!_this.whichOne;

          if(!_this.whichOne) {

            _this.drawLine()

          } else {

            _this.drawPie()

          }

        },

      // 饼图

      drawPie() {



        var myPie = echarts.init(document.getElementById('pieCharts'), 'infographic');

        var option = {

          title: {

            text: '统计分析柱状图 ',

            x: 'center'

          },

          tooltip: {

            trigger: 'item',

            formatter: "{a} <br/>{b} : {c} ({d}%)"

          },

          legend: {

            orient: 'horizontal',

            left: '46%',

            bottom:"0",

            data: ['2018','2019']

          },

          series: [{

            name: '绝缘电阻分析',

            type: 'pie',

            radius: '55%',

            center: ['50%', '60%'],

            data: [{

                value: 335,

                name: '2014'

              },

              {

                value: 310,

                name: '2019'

              },





            ],

            itemStyle: {

              emphasis: {

                shadowBlur: 10,

                shadowOffsetX: 0,

                shadowColor: 'rgba(0, 0, 0, 0.5)'

              }

            }

          }]

        }; 
        myPie.setOption(option);
            //重新渲染图表的时候,resize 图表的宽度width
           let resize = {
            width: this.initWidth,
            height: 300
          };
          myPie.resize(resize);

      },

      //线图
      drawLine() {
        let self = this;
        // 基于准备好的dom,初始化echarts实例
        var myLine = echarts.init(document.getElementById('compositeLine'), 'infographic');
        // 绘制基本图表
        var option = {
          color: ['#3398DB'],
          title: {
            show: true,
            text: "年份统计分析柱状图",
            textAlign: 'center',
            left: '50%',

          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器,坐标轴触发有效
              type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: ['2018', '2019'],
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
            name: '演示案例',
            type: 'bar',
            barWidth: '20px',
            data: [330, 220]
          }],
          opts: [{
            width: '20px'
          }]
        };
        console.log(option.xAxis[0].data[0])
        if (this.value1 != "") {
          option.xAxis[0].data[0] = this.value1

        }
        if (this.selectEndTime != "") {
          option.xAxis[0].data[1] = this.selectEndTime
        }
        myLine.setOption(option);

        let resize = {
            width: this.initWidth,
            height: 270
          };

        myLine.resize(resize);

      },

      //重新计算echarts的宽度
      calculateEcharts() {
        //获取这个组件的窗口宽度
         this.initWidth = document.getElementById('staticWidth').offsetWidth;
          console.log(this.initWidth);
      },
   //监听窗口变化
      handleListener() {
        // 调用renderChart方法对图表进行重新渲染
        window.addEventListener('resize', this.drawLine);
        window.addEventListener('resize', this.drawPie);
        window.addEventListener('resize', this.calculateEcharts);
      },

    },
    mounted() {
      this.calculateEcharts();
    },
    beforeDestroy() {},
    updated() {
    }
  }
</script>
<style scoped>
 
</style>

calculateEcharts()方法动态获取窗口的宽度,在绘制echarts时,通过

let resize = {
            width: this.initWidth,
            height: 270
          };

        myLine.resize(resize);

相关文章

网友评论

      本文标题:echarts tab切换默认宽度100px的问题

      本文链接:https://www.haomeiwen.com/subject/smsnrctx.html