echarts学习

雨点打透心脏的1/2处 2021-06-24 14:00 468阅读 0赞

1、清空图表：

myChart.clear();

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

2、显示“暂无数据”

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

3、echarts对象获取方式：

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

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

<script src="js/esl.js"></script>
    
    <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）单文件引入：

<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>