• 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();
        }
      }

      





  • 相关阅读:
    Visual Studio 2015 开发 ASP.NET 5
    全新的membership框架Asp.net Identity
    VS2013下实现移动端的跨平台开发
    用SQL语句,删除掉重复项只保留一条
    SOA IN Real World
    Asp.net负载均衡之Session
    C#时常需要调用C++DLL
    C# 支付宝接口
    好代码是怎么炼成的
    ASP.net 服务器监控
  • 原文地址:https://www.cnblogs.com/xi-li/p/15232717.html
Copyright © 2020-2023  润新知