jquery语法三ajax+echarts插件的使用

一、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>

在使用的时候遇到了这样的一个情况

这个不是跨域，谷歌浏览器不允许这样访问，解决这个问题有两种方法，第一种就是放在火狐浏览器，再一个就是它要部署服务器上才可以

jquery语法三ajax+echarts插件的使用相关推荐

12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
点赞取消html,jquery点赞和取消点赞插件
/* @author:Romey * 动态点赞 * 此效果包含css3,部分浏览器不兼容(如:IE10以下的版本) */ $(function(){ $("#praise").cl ...
【jQuery教科书】从jQuery语法到jQuery ajax的每一个知识点（学习总结）
文章目录 @[toc] 一.jQuery概述 1.1 什么是jQuery? 1.2 jQuery的版本须知 1.3 jQuery的功能作用 1.4 为什么要使用jQuery? 1.5 jQueryAP ...
表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍立即通过AJA ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
java ajax jquery分页插件_jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...
每日分享，三款纯jquery移动端日期时间选择插件
序言:mm再也不用担心我找不到合适好看的日期选择插件了,今天分享三款纯jquery移动端日期时间选择插件,赶紧点赞收藏转发吧. 一.jQuery移动端触屏滑动时间日期选择插件简介:jQuery移动端 ...
分页插件 ajax请求,jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...

jquery语法三ajax+echarts插件的使用

jquery语法三ajax+echarts插件的使用相关推荐

最新文章

热门文章