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获取数据？