echart 圖表隨着頁面的大小而變化大小和刷新圖表


圖表隨着頁面的大小而變化大小:
window.onresize = function () {
  myChart.resize();
}

  刷新圖表:

document.getElementById(id).removeAttribute("_echarts_instance_");
html:
<div id="main2" style="height:170px;width: 100%;"></div>

   js:

var dataval1=[220, 302, 181, 234, 210, 290, 150,333];
var dataval2=[120, 132, 101, 134, 90, 230, 210,400];
var dataname2=['合格率','其他率'];
var datax2 =['數據一', '數據二', '數據三', '數據四', '數據五', '數據六', '數據七','數據八'];
var text2='各區指標合格率';
linefun('main2',text2,dataval1,dataval2,dataname2,datax2,'200');
//折線圖
  function linefun(dom,text,dataval1,dataval2,dataname,datax) {
    document.getElementById(dom).removeAttribute("_echarts_instance_");
    var myChart2 = echarts.init(document.getElementById(dom));
    var option2 = {
      title: {
        text: text,
        top:'0'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: dataname,
        right:'0'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: datax
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: dataname[0],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          sampling: 'average',
          itemStyle: {
            color: '#0770FF'
          },
          stack: 'a',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#0770FF'
            }, {
              offset: 1,
              color: '#6BA9FF'
            }])
          },
          data: dataval1
        },
        {
          name: dataname[1],
          type: 'line',
          smooth: true,
          stack: 'a',
          symbol: 'circle',
          symbolSize: 5,
          sampling: 'average',
          itemStyle: {
            color: '#D375FF'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#D375FF'
            }, {
              offset: 1,
              color: '#e9c8fe'
            }])
          },
          data: dataval2
        }
      ]
    };
    myChart2.setOption(option2);
    window.onresize = function () {
      myChart2.resize();
    }
  }

 

 

 

 

  






免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM