echart 图表随着页面的大小而变化大小和刷新图表

图表随着页面的大小而变化大小:
window.onresize = function () {
  myChart.resize();
}

  刷新图表:

document.getElementById(id).removeAttribute("_echarts_instance_");
html:
<div id="main2" style="height:170px; 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();
    }
  }

  





原文地址:https://www.cnblogs.com/xi-li/p/15232717.html