实时搜索: echarts是谁

echarts是谁

249条评论 6519人喜欢 4667次阅读 675人点赞
...

实现Echarts中数据的动态获取: 1.客户端通过ajax发送请求
先绘制一个最简单的Echarts图表:
(这里就直接贴上代码了,直接用的是官网教程里异步数据加载和更新里的代码)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>

<!-- 引入 echarts.js -->
<script type="text/javascript" src="/img/ZWNoYXJ0cy5taW4uanM="></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="/img/anF1ZXJ5LTEuMTIuMy5qcw=="></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});

</script>

</body>
</html>
看到了吧,现在option中的xAxis和yAxis里的data都是空值。待会儿我们会用从服务器取回的数据去”填满“它。
下面贴上补充了ajax部分的完整前端代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>

<!-- 引入 echarts.js -->
<script type="text/javascript" src="/img/ZWNoYXJ0cy5taW4uanM="></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="/img/anF1ZXJ5LTEuMTIuMy5qcw=="></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});

myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

var names=[]; //类别数组(实际用来盛放X轴坐标值)
var nums=[]; //销量数组(实际用来盛放Y坐标值)

$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "TestServlet", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
});

}

},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})

</script>

</body>
</html>

2.服务器端Servlet接收请求
客户端的请求url是’TestServlet‘,那我们得先在web.xml配置以下映射:
<servlet>
<servlet-name>TestServlet</servlet-name>
<servlet-class>test.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestServlet</servlet-name>
<url-pattern>/TestServlet</url-pattern>
</servlet-mapping>

然后就来着手写处理客户端请求的TestServlet啦!
3.生成json数据并返回给客户端
生成Json数据要用到额外的jar包,这里我使用的jackson,json-lib 2010年就没有再更新了… (2016-5-3日更:发现Google出品的Gson也蛮好用的,重点是很小巧,只需引入一个jar就搞定,用法也很简单)
简单介绍一下jackson的用法:
①:先去http://mvnrepository.com/下载 jackson-core.jar,jackson-annotations.jar,jackson-databind.jar(都是2.x版本,jackson官网不知为何不提供服务了…这三个jar让我一阵好找)
②:在项目的项目WEB-INF/lib下引入这三个jar
然后就可以在TestServlet里使用jackson提供的工具类了。(关于jackson的详细用法,这里贴一下官网教程:http://wiki.fasterxml.com/JacksonInFiveMinutes)
TestServlet代码如下:
package test;

import java.io.IOException;
import java.util.*;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

public class TestServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

List<Product> list = new ArrayList<Product>();

//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里,每个Product类的对象都可以看作是一个类别(X轴坐标值)与销量(Y轴坐标值)的集合
list.add(new Product("衬衣", 10));
list.add(new Product("短袖", 20));
list.add(new Product("大衣", 30));

ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类

String json = mapper.writeValueAsString(list); //将list中的对象转换为Json格式的数组

//System.out.println(json);

//将json数据返回给客户端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
}

TestServlet类中用到的自定义的Product类代码如下:

package test;

public class Product {

private String name; //类别名称
private int num; //销量

public Product(String name, int num) {
this.name = name;
this.num = num;
}

public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}

}

4.客户端接收数据后显示
客户端接受服务器数据并解析后,就可以正常显示图表数据了:

echarts 是刚进入页面就加载吗: 很高兴,最近我也使用了ECharts

ECharts提供的用法中,require是作为模块化加载的入口,如果你使用类似于RequireJS、SeaJS这样的模块化加载JS库的话,那么,就可以使用require()初始化ECharts。

你贴出来的链接这篇文章,正式介绍如何使用模块化加载ECharts。如果你不使用模块化,ECharts也提供相应的方法初始化。

首先,下载到源码之后,在页面引入lib/echarts-plain-map.js,plain-map是未压缩的版本然后引入主文件之后,就可以直接使用init()实例化了最后补充一个官方API文档
echarts.baidu.com/doc/doc.html#引入ECharts

引js的时候是引echarts.js还是echarts.min: 这得看你下载的是哪个,你要是下载的是完整版就引用/img/ZWNoYXJ0cy5taW4uanM=,要是源代码版就用
echarts.js。看看你下载的js名字叫什么就引用什么。

echarts是前端的还是后台的: 前端技术,后端提供数据

echarts.js 一个页面如何加载多个表 我想加载两个饼图 为什么只出来一个 求大神解救:

<body>

<input type="button" value="TestEcharts" onclick="showLine()" /><br />

<input type="button" value="RadarEcharts" onclick="showRadar()" />

<div id="stackbar" align="center"

style="height: 260px; width: 30%; line-height: 260px; border: 1px solid blue; padding-left: -80px;">[可视化数据图例1...]</div>

<div id="radarbar" align="center"

style="height: 260px; width: 30%; line-height: 260px; border: 1px solid green; margin-top: 10px;">[可视化数据图例2...]</div>

分开初始化,.init(div);

function showLine() {

var echartBar = echarts.init(document.getElementById("stackbar"));

var option1 = {

title:{

text:'test',

subtext:'折线图测试',

x:'center',

y:'top',

textAlign:'center'

},

legend:{

data:['ThisWeek', 'LastWeek', 'FutureWeek'],

x: 'center',

y: 'bottom'

},

tooltip:{

//show: true, 默认添加tip即显示

trigger: 'item',

axisPointer:{

show: true,

type : 'cross',

lineStyle: {

type : 'dashed',

width : 1

}

}

},

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

axisLabel:{

textStyle:{

fontSize: 8

}

}

},

yAxis: {

type: 'value',

axisLabel:{

textStyle:{

fontSize: 5

}

}

},

series: [{

name: 'ThisWeek',

type: 'line',

//xAxisIndex: 1,

data: [820, 932, 901, 934, 1290, 1330, 1320]

},

{

name: 'LastWeek',

type: 'line',

data: [920, 832, 801, 834, 1090, 1130, 1120]

},

{

name: 'FutureWeek',

type: 'bar',

data: [520, 432, 401, 434, 690, 730, 720]

}

]

};

echartBar.hideLoading();

echartBar.setOption(option1);

}

也可以写在一个js函数中,如:

var echartBar = echarts.init(document.getElementById("stackbar"));

echartBar.showLoading();

var echartPie = echarts.init(document.getElementById("pie"));

echartPie.showLoading();

$.ajax({

url: "getFVIData.do",

type: 'GET',

cache: false,

dataType: 'json',

success: function (data) {

var option1 = { ......

  • .mp用什么软件打开

    180°-49°14′54〃等于多少: 180°=179°60′60″179°60′60″-49°14′54〃=130°46′06″ ...

    806条评论 1886人喜欢 5316次阅读 522人点赞
  • 1530 1518 哪个好

    修一条山路,已修了全长的八分之三,还剩下180米,这条山路全场是多少米?: 180÷(1-3/8)=288(米) ...

    519条评论 6111人喜欢 5579次阅读 213人点赞
  • 2016春夏上海最好玩的地方有哪些

    我体重180身高176肩宽48—50我买了尺寸是185的韩版修身小西服合适吗: 修身,肯定不合适的。你虽然比较宽,但是衣服长短你不合适的。 ...

    206条评论 2370人喜欢 6123次阅读 882人点赞
  • 昆山市哪里好玩

    从1加到11180等于多少,怎样算最简便: (1+11180)*11180/2=62501790 ...

    775条评论 4611人喜欢 6266次阅读 668人点赞
  • gop是什么

    307+180除以(34-19)等于多少: 307+180÷(34-19)=307+180÷15=307+12=319 ...

    934条评论 3188人喜欢 1282次阅读 880人点赞
  • 五座车交强险多少

    13°10′÷4 180°-(78°36′-25°27′) 等于多少: 13度10分=13度又1/6度=79/613°10′÷4 =79/24=3度17.5分78°36′-25°27′=53度9分13°10′÷4 180°-(78°36′-25°27′)=3度17.5分-53度9分=负5...

    700条评论 4272人喜欢 2772次阅读 293人点赞
  • 2017北京流产多少钱

    我身高180,体重73公斤,腰围24,我应该怎么搭配小西装?: 身型不错哦,韩版商务休闲的西装,比较适合你,具体的搭配可以叫我聊! ...

    256条评论 4993人喜欢 2252次阅读 960人点赞
  • mb是什么

    一段彩带剪去180厘米,剪去的部分是剩下的4倍,这段彩带原来长多少厘米?: 答案:225厘米。解析:减去180厘米。减去的部分是剩下部分的4倍,那就是剩下 180/4=45厘米。原来长度为 180+45=225厘米 ...

    443条评论 3260人喜欢 4110次阅读 916人点赞