ECharts学习五 --- 移动端自适应 Media Query

最新推荐文章于 2024-06-14 11:11:51 发布

紫冰Nan

最新推荐文章于 2024-06-14 11:11:51 发布

阅读量2.4k

点赞数

分类专栏： ECharts

本文链接：https://blog.csdn.net/NN_nan/article/details/83026143

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ECharts</title>
    <!-- 引入 echarts.js   采用的是cdn 引入，需保证外网连接正常 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.min.js"></script>
    <!-- 引入jQuery -->
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>

<div id="main" style="width: 1000px;height:800px;"></div>

<script type="text/javascript">

	var myChart = echarts.init(document.getElementById('main'));
	
	//$.when($.ajax("test1.html"), $.ajax("test2.html"))
	//　　.done(function(){ alert("哈哈，成功了！"); })
	//　　.fail(function(){ alert("出错啦！"); });
	//这段代码的意思是，先执行两个操作$.ajax("test1.html")和$.ajax("test2.html")，如果都成功了，就运行done()指定的回调函数；如果有一个失败或都失败了，就执行fail()指定的回调函数。
	
	$.when(
		    $.getScript('http://www.echartsjs.com/gallery/data/asset/data/timelineGDP.js'),
		    $.getScript('http://www.echartsjs.com/gallery/data/asset/data/draggable.js')
		).done(function () {
			
			//draggable.js封装的方法
		    draggable.init(
		        $('div[_echarts_instance_]')[0],
		        myChart,
		        {
		            width: 700,
		            height: 400,
		            throttle: 70
		        }
		    );

		    myChart.hideLoading();

		    option = {
		    	
		        baseOption: {// 这里是基本的『原子option』
		            title : {
		                text: '南丁格尔玫瑰图',
		                subtext: '纯属虚构',
		                x:'center'
		            },
		            tooltip : {
		                tr

最低0.47元/天解锁文章

紫冰Nan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts学习五 --- 移动端自适应 Media Query

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;ECharts&lt;/title&gt; &lt;!-- 引入 echarts.js 采用的是cdn 引入，需保证外网连接正常 --&gt; &lt;script
复制链接

扫一扫

专栏目录