zoukankan      html  css  js  c++  java
  • ECharts开始

    1. 为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)
      //from echarts example
      <body>
          <div id="main" style="height:400px;"></div>
          ...
          <script src="./js/echarts.js"></script>
      </body>
    2. 通过script标签引入echarts主文件
      //from echarts example
      <body>
          <div id="main" style="height:400px;"></div>
          ...
          <script src="./js/echarts.js"></script>
          <script type="text/javascript">
              require.config({
                  paths: {
                      echarts: './js/dist'
                  }
              });
          </script>
      </body>
    3. 为模块加载器配置echarts的路径,从当前页面链接到echarts.js所在目录,见上述说明
      //from echarts example
      <body>
          <div id="main" style="height:400px;"></div>
          ...
          <script src="./js/echarts.js"></script>
          <script type="text/javascript">
              require.config({
                  paths: {
                      echarts: './js/dist'
                  }
              });
              require(
                  [
                      'echarts',
                      'echarts/chart/line',   // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
                      'echarts/chart/bar'
                  ],
                  function (ec) {
                      var myChart = ec.init(document.getElementById('main'));
                      var option = {
                          ...
                      }
                      myChart.setOption(option);
                  }
              );
          </script>
      </body>
    4. 动态加载echarts及所需图表然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require('echarts').init(dom)就行)
  • 相关阅读:
    属性,选择器和css
    笔记
    浏览器
    单位
    marquee 滚动标签
    双飞翼布局与圣杯布局
    随便看看吧
    光标的形状 颜色的表示方法
    如何实现浏览器title中的小图标
    解决浏览器兼容问题 补充
  • 原文地址:https://www.cnblogs.com/liujiangping/p/4873605.html
Copyright © 2011-2022 走看看