echarts学习

<div id="mychart"></div>

1、清空图表：

myChart.clear();

注：清空绘画内容，清空后实例可用，因为并非释放示例的资源，释放资源我们需要dispose()

2、显示“暂无数据”

myChart.showLoading({
    text : '暂无数据',
    effect : 'bubble',
    textStyle : {
        fontSize : 30
    }
});

3、echarts对象获取方式：

我们都知道，无论如何使用echarts时都要获得一个echarts对象，然后调用其init()方法，而echarts对象通常有两种方式获得：

1）使用AMD模块化加载的方式：

<!--从当前页面，引入模块加载器esl.js-->
<script src="js/esl.js"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<script type="text/javascript">
  // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
  require.config({
    paths:{ 
      'echarts' : './js/echarts',
      'echarts/chart/bar' : './js/echarts'
    }
  }); 
  // 使用
  require(
    [
      'echarts',
      'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
    ],
    function (ec) {
      // 基于准备好的dom，初始化echarts图表
      var myChart = ec.init(document.getElementById('main')); 
      
      var option = {
      ...
      };
      // 为echarts对象加载数据 
      myChart.setOption(option); 
    }
  );
</script>

2）单文件引入：

<!-- ECharts单文件引入 -->
<script src="js/echarts.js"></script>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts图表
  var myChart = echarts.init(document.getElementById('main')); 
  
  var option = {
    ...
  };
  // 为echarts对象加载数据 
  myChart.setOption(option); 
</script>