Question

HTML

JS var myChart = echarts.init（document.getElementById（“main”））; window.onresize = myChart.resize;

var statistics = {
  title: {
    text: "面积",
    textStyle: {
      fontWeight: "normal",
      color: "#fff", 
      fontSize: 14
    },
    left: "center"
  },
  tooltip: {
    // 鼠标移动柱状图是提示文字
    show: true
  },
  legend: {
    // data: ['面积'],
    textStyle: {
      fontSize: 12
    }
  },

  xAxis: {
    data: ["灌木", "森林", "森林", "树木", "小树", "大树", "红树"],
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    }
  },

  yAxis: {

    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    splitLine: {
      lineStyle: {
        color: ["#07405c"]
      }
    }
  },

  itemStyle: {
    color: "#06ae7c",

    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: "rgba(0, 0, 0, 0.5)"
    }
  },
  series: [
    {
      type: "bar",
      barWidth: 48, 
      data: [38, 23, 35, 12, 26, 8, 36]
    }
  ]
};

myChart.setOption(statistics);

标签交换机宽度中的echarts容器设置为100％，但无论如何设置宽度，都只有100px，因为标签栏试图隐藏互联网的原因，上面提到的很多方法都是不正常显示，后面跟代码中的window.onresize = myChart.resize;只有当改变浏览器窗口的大小才能正常显示，但如果不改变窗口的大小或者在100px之后，我们遇到这种情况之前是如何解决的呢？

Answer 1

我发现了解决此问题的一种方法。切换选项卡时，尝试调用窗口对象的resize事件。用jQuery实现它很简单：

$(window).trigger('resize');

Answer 2

var myChart=$("#myChart");
myChart.style.width=window.innerWidth+'px';
chartObj=echarts.init(myChart);
chartObj.setOption(option);

Answer 3

在每个div图表中放入“ echart”类，然后在您的js中执行。

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  $(".echart").each(function() {
    var id = $(this).attr('echarts_instance');
    window.echarts.getInstanceById(id).resize();
  });
});

当echarts打开选项卡时，容器宽度设置为100％，但无论如何设置，宽度仅为100px

3 个答案: