집 > 기사 > 웹 프론트엔드 > Vue에서 Echarts를 구현하여 양식으로 변경

Vue에서 Echarts를 구현하여 양식으로 변경

Guanhui앞으로: 2020-07-27 18:29:501959검색

ㅋㅋㅋ 차트, 브라우저 창의 확대/축소를 기준으로 적응형 효과를 만들어야 합니다.

원인 분석 및 해결 방법:

echars의 아이콘 인스턴스는 실제로 resize() 이벤트를 적극적으로 바인딩하지 않습니다. 이는 표시 영역의 크기 변경을 내부적으로 알 수 없음을 의미합니다. 일부 적응형 효과의 경우 이번에는 적극적으로 바인딩하여 자체 사용 효과를 달성해야 합니다. 일반적인 것은 window.onresize = myChart.resize()예:

<p id="myChart" :style="{width: &#39;100%&#39;, height: &#39;345px&#39;}"></p>
<script> export default {
mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
    var myChartContainer = document.getElementById(&#39;myChart&#39;);      //用于使chart自适应宽度,通过窗体宽计算容器高宽
    var resizeMyChartContainer = function(){
     myChartContainer.style.width=(document.body.clientWidth-75)+&#39;px&#39;
    }     //设置容器高宽
    resizeMyChartContainer()
    // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(myChartContainer)
     
    // 绘制图表
    myChart.setOption({
      title: { text: &#39;启动次数&#39; },
      tooltip: {},
      xAxis: {
        type: &#39;category&#39;,
        data: [&#39;2019-02-15&#39;, &#39;2019-02-16&#39;, &#39;2019-02-17&#39;, &#39;2019-02-18&#39;, &#39;2019-02-19&#39;, &#39;2019-02-20&#39;, &#39;2019-02-21&#39;]
      },
      yAxis: {
         type:&#39;value&#39;
      },
      series: [{
        type: &#39;line&#39;,
        data: [0,0, 0, 7, 0, 0,12],
        smooth:true,
        symbol: &#39;circle&#39;, 
        symbolSize: 6, 
        itemStyle:{ 
          normal:{ 
             
            color:&#39;#fc8a0f&#39;, 
            lineStyle:{ 
              color:&#39;#ff9c35&#39; 
                } 
              } 
            }
      }],
    });
    window.onresize=function(){
     resizeMyChartContainer();
      myChart.resize();
    }
   }
  }}</script>

핵심 포인트:

var map5 = echarts.init(document.getElementById(&#39;map5&#39;));
  var option5 = {
    backgroundColor: &#39;#def1f9&#39;,
    color: [&#39;#c23531&#39;, &#39;#1875ff&#39;],
    title: {
      left: 10,
      top: 10,
      text: &#39;Bill charts for the past year&#39;
    },
    // color: [&#39;#1875ff&#39;, &#39;#1fe6ab&#39;, &#39;#eee119&#39;, &#39;#ff3074&#39;, &#39;#6f99d9&#39;],
    legend: {
      top: 30,
      right: 30
    },
    tooltip: {},
 
    xAxis: {type: &#39;category&#39;},
    yAxis: {},
    series: [
      {type: &#39;bar&#39;},
      {type: &#39;bar&#39;}
    ]
  }
  map5.setOption(option5);
 
  window.onresize = function () {
    setTimeout(function () { 
      map1.resize()
      map2.resize()
      map3.resize()
      map4.resize()
      map5.resize()
    },10)
  }

Vue에서 Echarts를 구현하여 양식으로 변경

관련 기사