三、异步数据加载和更新
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入Echarts文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为Echarts准备一个具备大小(宽高)的DOM -->
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
//基于准备好的DOM初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
</script>
</body>
</html>
四、在图表中加入交互组件
除了图表外ECharts 中，提供了很多交互组件。例如：图例组件legend、标题组件title、视觉映射组件visualMap、数据区域缩放组件dataZoom、时间线组件 timeline。
1. 数据区域缩放组件（dataZoom）
dataZoom组件是对 数轴（axis）进行『数据窗口缩放』『数据窗口平移』操作。
可以通过dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。dataZoom组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。
dataZoom的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。数据过滤模式的设置不同，效果也不同，参见：dataZoom.filterMode。
dataZoom的数据窗口范围的设置，目前支持两种形式：
百分比形式：参见dataZoom.start 和dataZoom.end。
绝对数值形式：参见dataZoom.startValue 和 dataZoom.endValue。
dataZoom组件现在支持几种子组件：
内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条操作。
框选型数据区域缩放组件（dataZoomSelect）：全屏的选框进行数据区域缩放。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入Echarts文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为Echarts准备一个具备大小(宽高)的DOM -->
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
//基于准备好的DOM初始化echarts实例
var myChart=echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option={
title:{
text:'加入交互式组件',
top:22,
textStyle:{
fontSize:22,
}
},
xAxis:{
type:'value'
},
yAxis:{
type:'value'
},
//1.只能拖动dataZoom组件导致窗口变化
/* dataZoom:[
{
//这个dataZoom组件，默认控制x轴
type:'slider',
start:10,
end:60
}
], */
//2.可在坐标系中拖动以及用滚轮进行缩放，需要加入一个inside型的dataZoom组件
dataZoom:[
{
//这个dataZoom组件，默认控制x轴
type:'slider',
xAxisIndex:0,
start:10,
end:60
},
{
//这个dataZoom组件，也控制x轴
type:'inside',
xAxisIndex:0,
start:10,
end:60
},
{
//控制y轴
type:'slider',
yAxisIndex:0,
start:30,
end:80
},
{
type:'inside',
yAxisIndex:0,
start:30,
end:80
}
],
series:[
{
type:'scatter',//这是个散点图
itemStyle:{
normal:{
//透明度
opacity:0.8
}
},
symbolSize:function(val){
return val[2]*40;
},
data:[["14.616","7.241","0.896"],["3.958","5.701","0.955"],
["2.768","8.971","0.669"],["9.051","9.710","0.171"],
["14.046","4.182","0.536"],["12.295","1.429","0.962"],
["4.417","8.167","0.113"],["0.492","4.771","0.785"],
["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
五、移动端自适应
ECharts工作在用户指定高宽的DOM节点（容器）中。ECharts的『组件』和『系列』都在这个DOM节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现DOM文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要ECharts 内部组件随着容器尺寸变化而变化的能力。为了解决这个问题，ECharts完善了组件的定位设置，并且实现了类似CSSMedia Query的自适应能力。
1.Echarts组件的定位和布局
定位方式：①left/right/top/bottom/width/height定位方式，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。
②center/ radius定位方式。
③横向（horizontal）和纵向（vertical）
2.Media Query
提供随着容器尺寸改变而改变的能力。
拖动右下角改变容器尺寸时，随着尺寸变化，legend和系列会自动改变布局位置和方式。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入Echarts文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为Echarts准备一个具备大小(宽高)的DOM -->
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
//基于准备好的DOM初始化echarts实例
var myChart=echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option={
//基本的原子option，满足某个query条件时，对应的option会被使用的chart.mergeOpion()来merge进去
baseOption:{
title:{
text:'加入交互式组件',
top:22,
textStyle:{
fontSize:22,
}
},
xAxis:{
type:'value'
},
yAxis:{
type:'value'
},
dataZoom:[
{
//这个dataZoom组件，默认控制x轴
type:'slider',
xAxisIndex:0,
start:10,
end:60
},
{
//这个dataZoom组件，也控制x轴
type:'inside',
xAxisIndex:0,
start:10,
end:60
},
{
//控制y轴
type:'slider',
yAxisIndex:0,
start:30,
end:80
},
{
type:'inside',
yAxisIndex:0,
start:30,
end:80
}
],
series:[
{
type:'scatter',//这是个散点图
itemStyle:{
normal:{
//透明度
opacity:0.8
}
},
symbolSize:function(val){
return val[2]*40;
},
data:[["14.616","7.241","0.896"],
["3.958","5.701","0.955"],
["2.768","8.971","0.669"],
["9.051","9.710","0.171"],
["14.046","4.182","0.536"],
["12.295","1.429","0.962"],
["4.417","8.167","0.113"],
["0.492","4.771","0.785"],
["7.632","2.605","0.645"],
["14.242","5.042","0.368"]]
}
]
},
media:[
{
//规则1
query:{
maxAspectRatio:1 //当长宽比小于1时
},
//规则1满足下的option
option:{
legend:{ //legend放在底部中间
right:'center',
bottom:0,
orient:'horizontal' //legend横向布局
},
series:[
{
radius:[20,'50%'],
center['50%','30%']
},
{
radius:[30,'50%'],
center['50%','70%']
}
]
}
}
},
{
query:{
maxwidth:500 //当长宽比小于1时
},
option:{
legend:{ //legend放在底部中间
right:'center',
bottom:0,
orient:'horizontal' //legend横向布局
},
series:[
{
radius:[20,'50%'],
center['50%','30%']
},
{
radius:[30,'50%'],
center['50%','70%']
}
]
}
}
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
六、数据的视觉映射
数据可视化是数据到视觉元素的映射过程，ECharts的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』，此外，ECharts还提供了visualMap组件来提供通用的视觉映射。visualMap组件中可以使用的视觉元素有：图形类别（symbol）、图形大小（symbolSize）、颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）。
Echarts中的数据一般存放在series.data中，具体形式可能是线性表、树、图等，但都是dataItem的集合，每个数据项包含数据值value和其他信息。默认映射前两个维度，第一个维度映射到x轴，第二个维度映射到y轴，若想要把更多维度展现出来可以借助visualMap。
visualMap组件定义了把数据的哪个维度映射到什么视觉元素上。。
通过visualMap.type划分两种类型：continuous（连续型）和piecewise（分段型）。
其中，分段型visualMapPiecewise有三种模式：连续型数据平均分段，连续型数据自定义分段，离散数据（类别性数据）。
4616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
