您的位置：首页 > 其它

百度Echarts使用心得

2015-05-28 14:34 309 查看
echarts官网：http://echarts.baidu.com/index.html

最近用了echart，有一下问题需要注意：

1.echarts的使用实例

代码：从地图中取得whitejson5.json文件，在利用ajax 传入到网页中，修改whitejson5.json里面的数据可以修改地图的显示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<title>ECharts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="kener.linfeng@gmail.com">
<title>无标题文档</title>
<style>
#div1{ width:960px; height:800px; margin:0 auto; border:1px  solid #e3e3e3;}

</style>
<script type="text/javascript" src="echarts-2.2.2/build/dist/echarts-all.js"></script>
<script type="text/javascript" src="jquery-2.1.4.js"></script>

</head>

<body>
<div id="div1"></div>

</body>

<script type="text/javascript">
option = {
title : {
text: 'iphone销量',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:[]
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'],           // 文本，默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series : [
{
name: '',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[],

},

]
};
var myChart = echarts.init(document.getElementById('div1'));

//    alert(JSON.stringify(option.series[0].data).length);
$.ajax({
type:"GET",
url:"whitejson5.json",/*http://192.168.109.21:8080/DataBaseService/demo*/
dataType:"json",
async:false,
success: function(data){
option.series[0].data = data;
},
});
myChart.setOption(option);

</script>
</html>


2.利用select的value属性来切换不同的div块？

html:
<select name="type" id="se" >
<option id="online" value="1">在线人数</option>
<option id="history" value="2">历史人数</option>
</select>
<div>
<div id="div1" class="main"></div>
<div id="div2" class="main"> </div>
</div>

jquery:

$("#se").change(function(){
var id="#id"+$("se").val();//提取id值
$(".main").hide();
$("id").show();
})


3.如何使用ajax获取数据？
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航