<!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
ECharts学习五 --- 移动端自适应 Media Query
最新推荐文章于 2024-06-14 11:11:51 发布
本文介绍了ECharts在移动端使用Media Query实现自适应的方法。`baseOption`作为基础配置,其他满足条件的`option`通过`chart.mergeOption()`合并。在容器大小变化时,配置项需统一存在于所有query中,避免状态无法回退。复合option在多次`setOption`时,新的media列表会替换旧的,推荐首次设置使用复合option,后续只更新`baseOption`。
摘要由CSDN通过智能技术生成