zoukankan      html  css  js  c++  java
  • 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();
        }
      }

      





  • 相关阅读:
    如何禁用 Azure 虚拟机的日期时间同步
    Java 如何启用 ARM 虚拟机诊断
    File类的源码学习
    Trie树学习
    Hadoop自带Sort例子分析
    java.io.IOException: Illegal partition for 67 (-1)
    Java IO、网络编程、NIO、Netty、Hessian、RPC、RMI的学习路线
    MapReduce中的排序(附代码)
    CAP理论学习
    Harvard数据库课程CS 265: Research Topics in Database Systems
  • 原文地址:https://www.cnblogs.com/xi-li/p/15232717.html
Copyright © 2011-2022 走看看