一、jquery ajax
下面代碼 cros 跨域或者不跨域可以使用
$.ajax({
method:"post",
url:"./data/student.txt",
dataType:"json",
success:function (res){
//res 成功返回值
//console.log(JSON.parse(res));
console.log(res);
},
error:function (res){
//res 失敗返回值
}
});
jsonp 跨域請求的代碼
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&cb=getData
$.ajax({
method:"post",
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data:{wd:1,cb:"getData"},
dataType:"jsonp",
jsonpCallback:"getData",
success:function (res){
//res 成功返回值
//console.log(JSON.parse(res));
console.log(res);
},
error:function (res){
//res 失敗返回值
}
});
/*
* 同步和異步的區別
* */
var data = null;
$.ajax({
method: "post",
url: "./data/stu.json",
success: function (res) {
data = res;
console.log(data);
},
async: false
});
console.log(data);
二、echarts插件
echarts非常nice，去官網看->首頁，視覺衝擊感很強烈，那麼，它用來幹什麼？有什麼特性？
ECharts，一個使用JavaScript實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表
特性之一 ~
下面是官網的一個實例
那麼如何實現這種效果？如何使用這個插件
1、下載
echarts.min.js文件並引入
2、抄代碼！
① 初始化echarts實例
②使用剛指定的配置項和數據顯示圖表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/echart.min.js"></script>
<script>
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 使用剛指定的配置項和數據顯示圖表。
// myChart.setOption(option);
//項的數據和參數
$.get("js/data.json", function (data) {
var hStep = 300 / (data.length - 1);
var busLines = [].concat.apply([], data.map(function (busLine, idx) {
var prevPt;
var points = [];
for (var i = 0; i < busLine.length; i += 2) {
var pt = [busLine[i], busLine[i + 1]];
if (i > 0) {
pt = [
prevPt[0] + pt[0],
prevPt[1] + pt[1]
];
}
prevPt = pt;
points.push([pt[0] / 1e4, pt[1] / 1e4]);
}
return {
coords: points,
lineStyle: {
normal: {
color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
}
}
};
}));
myChart.setOption(option = {
bmap: {
center: [116.46, 39.92],
zoom: 10,
roam: true,
mapStyle: {
'styleJson': [
{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#031628'
}
},
{
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'color': '#000102'
}
},
{
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#0b3d51'
}
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'railway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'railway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#08304b'
}
},
{
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -70
}
},
{
'featureType': 'building',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'all',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#857f7f'
}
},
{
'featureType': 'all',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'building',
'elementType': 'geometry',
'stylers': {
'color': '#022338'
}
},
{
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'color': '#062032'
}
},
{
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#465b6c'
}
},
{
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#022338'
}
},
{
'featureType': 'label',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}
]
}
},
series: [{
type: 'lines',
coordinateSystem: 'bmap',
polyline: true,
data: busLines,
silent: true,
lineStyle: {
normal: {
// color: '#c23531',
// color: 'rgb(200, 35, 45)',
opacity: 0.2,
width: 1
}
},
progressiveThreshold: 500,
progressive: 200
}, {
type: 'lines',
coordinateSystem: 'bmap',
polyline: true,
data: busLines,
lineStyle: {
normal: {
width: 0
}
},
effect: {
constantSpeed: 20,
show: true,
trailLength: 0.1,
symbolSize: 1.5
},
zlevel: 1
}]
});
});
</script>
</body>
</html>
在使用的時候遇到了這樣的一個情況
這個不是跨域，谷歌瀏覽器不允許這樣訪問，解決這個問題有兩種方法，第一種就是放在火狐瀏覽器，再一個就是它要部署服務器上纔可以