• echartsjs 饼图、柱状图、折线图实例


      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8" />
      <title>图表选项卡</title>
      <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
      <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
      </head>
      <style type="text/css">
      .myTable-container {
      800px;
      height: 430px;
      }
      </style>
      <body>
      <div class="container" style="padding-top: 5%; padding-left: 10%">
      <ul id="myTab" class="nav nav-tabs">
      <li class="active"><a href="#tab1" data-toggle="tab">月度数据</a></li>
      <li><a href="#tab2" data-toggle="tab">车间数据</a></li>
      <li><a href="#tab3" data-toggle="tab">员工数据</a></li>
      </ul>
       
      <div id="myTabContent" class="tab-content">
      <div class="tab-pane active" id="tab1">
      <div id="tab1-container" class="myTable-container"></div>
      </div>
      <div class="tab-pane " id="tab2">
      <div id="tab2-container" class="myTable-container"></div>
      </div>
      <div class="tab-pane " id="tab3">
      <div id="tab3-container" class="myTable-container"></div>
      </div>
      </div>
      </div>
      <script>
      var $tab1 = document.getElementById('tab1-container');
      var $tab2 = document.getElementById('tab2-container');
      var $tab3 = document.getElementById('tab3-container');
       
      /* 折线图 */
      var tab1Option = {
      title : {
      text : '2019年月度数据图表',
      subtext : '2019/12/29',
      x : 'center'
      },
      xAxis : {
      type : 'category',
      data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis : {
      type : 'value'
      },
      series : [ {
      data : [ 820, 932, 901, 934, 1290, 1330, 1320 ],
      type : 'line'
      } ]
      };
       
      /* 饼图 */
      var tab2Option = {
      title : {
      text : '四个车间数据图表',
      subtext : '2019/12/29',
      x : 'center'
      },
      tooltip : {
      trigger : 'item',
      formatter : "{a} <br/>{b} : {c} ({d}%)"
      },
      legend : {
      orient : 'vertical',
      left : 'left',
      data : [ '第一车间', '第二车间', '第三车间', '第四车间', '第五车间', '第六车间' ]
      },
      series : [ {
      name : '车间业绩',
      type : 'pie',
      radius : '55%',
      center : [ '50%', '60%' ],
      data : [ {
      value : 335,
      name : '第一车间'
      }, {
      value : 310,
      name : '第二车间'
      }, {
      value : 234,
      name : '第三车间'
      }, {
      value : 135,
      name : '第四车间'
      }, {
      value : 896,
      name : '第五车间'
      }, {
      value : 771,
      name : '第六车间'
      } ],
      itemStyle : {
      emphasis : {
      shadowBlur : 10,
      shadowOffsetX : 0,
      shadowColor : 'rgba(0, 0, 0, 0.5)'
      }
      }
      } ]
      };
       
      /* 柱图 */
      var tab3Option = {
      tooltip : {
      trigger : 'item',
      formatter : "{a} <br/>{b} : ¥{c} "
      },
      xAxis : {
      type : 'category',
      data : [ '孙健', '付丽丽', '李科', '吴明轩', '孙楠', '邢安媛', '莫西宇', '孙楠', '邢安媛', '莫西宇' ]
      },
      yAxis : {
      type : 'value'
      },
      series : [ {
      name : '员工数据',
      data : [ 120, 200, 150, 80, 70, 110, 230.15,400.11,236.56,303.25 ],
      type : 'bar'
      } ]
      };
       
      /* 初始化tab1的 */
      var tab1Table = echarts.init($tab1);
      tab1Table.setOption(tab1Option);
       
      /* shown.bs.tab为tab选项卡高亮 */
      $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      /* 获取已激活的标签页的名称 */
      /* hash 属性是一个可读可写的字符串,该字符串是 URL 从 # 号开始的部分 */
      var activeTab = $(e.target)[0].hash;
      /* 当相应的标签被点击时,进行对应的图表渲染 */
      if (activeTab == "#tab2") {
      /* 释放图表实例,使实例不可用,不加上这个,会报错: */
      /* there is a chart instance already initialized on the dom */
      echarts.dispose($tab2);
      var tab2Table = echarts.init($tab2);
      tab2Table.setOption(tab2Option);
      } else if (activeTab == "#tab3") {
      echarts.dispose($tab3);
      var tab3Table = echarts.init($tab3);
      tab3Table.setOption(tab3Option);
      }
      });
      </script>
      </body>
      </html>
       

    https://www.echartsjs.com/examples/zh/index.html

  • 相关阅读:
    H3C BGP配置10BGP安全功能典型配置举例
    H3C BGP配置9调整和优化BGP网络典型配置举例1BGP负载分担配置
    H3C BGP配置11 BGP网络的可靠性典型配置举例1BGP GR配置
    H3C BGP配置9调整和优化BGP网络典型配置举例2BGP AddPath配置
    vue移动端适配postcsspxtorem
    .net 技术站点(转载)
    邯郸.net俱乐部
    存储过程从入门到熟练(多个存储过程完整实例及调用方法)_AX 转载
    gridview中删除记录的处理
    邯郸.NET俱乐部正式成立了
  • 原文地址:https://www.cnblogs.com/apolloren/p/12116174.html
Copyright © 2020-2023  润新知