Framework7 Starter

by Maiki Nahara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.1.1/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.1.1/css/framework7.bundle.css">
<script src="https://echarts.baidu.com/dist/echarts.min.js"></script>
<!-- App root element -->
<div id="app">
  <!-- Statusbar overlay -->
  <div class="statusbar"></div>

  <!-- Left Panel with Reveal effect 
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p><a href="#" class="panel-close">Close me</a></p>
      <p><a href="#" data-panel="right" class="panel-close">Open Right Panel</a></p>
    </div>
  </div>
  <!-- Your main view, should have "view-main" class -->
  <div class="view view-main">
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="home" class="page">

      <!-- Top Navbar -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Awesome App</div>
        </div>
      </div>

      <!-- Bottom Toolbar -->
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <!-- Toolbar links -->
          <a href="#" class="link">Link 1</a>
          <a href="#" class="link">Link 2</a>
        </div>
      </div>

      <!-- Scrollable page content -->
      <div class="page-content">
        <div id="main" style="width:600px; height:400px;"></div>
      </div>
    </div>
  </div>
</div>

JavaScript

// Dom7
var $$ = Dom7;
// Framework7 App main instance
window.app = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'ios', // Automatic theme detection
  panel: {
    //swipeNoFollow: false,
    //swipe: 'none',
    //swipeActiveArea: 250
  },
  // App root data
  data: function() {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  // App root methods
  methods: {
    helloWorld: function() {
      app.dialog.alert('Hello World!');
    },
  },
  // App routes
  routes: [
  {
  path: '/'
  }
  ]
});

// Init/Create main view
var mainView = app.views.create('.view-main', {
  url: '/'
});

debugger

        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var option = {
            title: {
                text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);