echarts饼图动态获取数据（echarts饼图的百分比如何在toolbox的数据视图获取）

本文目录

• echarts饼图的百分比如何在toolbox的数据视图获取
• java怎么从数据库里获得动态数据生成统计图
• echarts的树图，怎么动态从后台获取数据
• 实现Echarts中数据的动态获取
• echarts中实现动态加载series下data数据
• Echarts关于饼图data中数据如何动态填充
• Echarts如何向饼状图添加动态数据
• echarts饼图怎么调用数据库数据
• 如何利用echarts图表插件获取圆饼图块切换参数

echarts饼图的百分比如何在toolbox的数据视图获取

public List《Bars》 pageListTwo(int currentPage, int showRows)
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
ArrayList《Bars》 resultList = new ArrayList《Bars》();
try
{

java怎么从数据库里获得动态数据生成统计图

我这个是使用的echarts的饼图，如果需要使用到其他的图形，可以在echarts的官网上面去找找，上面各种的图都有例子

option = {

title : {

//图中2的位置

text: ’某站点用户访问来源’,

subtext: ’纯属虚构’,

x:’center’

},

tooltip : {

trigger: ’item’,

formatter: "{a} 《br/》{b} : {c} ({d}%)"

},

legend: {

orient: ’vertical’,

left: ’left’,

data: //图中1的位置

},

series : [   //图中3的位置

{

name: ’访问来源’,

type: ’pie’,

radius : ’55%’,

center: ,

data:[

//这下面就是你从数据库中查询的结果

{value:335, name:’直接访问’},

{value:310, name:’邮件营销’},

{value:234, name:’联盟广告’},

{value:135, name:’视频广告’},

{value:1548, name:’搜索引擎’}

],

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: ’rgba(0, 0, 0, 0.5)’

}

} }]};

数据具体怎么从后台传送到前台来，楼主应该知道的吧，我这儿就不说了，望采纳！

echarts的树图，怎么动态从后台获取数据

获取数据后效果
点击饼图获取到数据的效果：
html代码：
放2个div，取个id就行。引用写好的js。
《div》
《div class="case_type"》
《div class="pie_chart_name"》测试类型《/div》
《div id="div_pieCategory" style="height:210px;
width: 300px; float: left;" class="pie_chart_img"》
《/div》
《/div》
《div class="case_date"》
《div id="div_bar" style="height:210px; width: 300px; float: left;"》
《/div》
《/div》
《/div》
《input id="hid_category" type="hidden" value="" /》
《input id="hid_state" type="hidden" value="" /》
《input id="hid_date" type="hidden" value="" /》
《/form》
《script src="js/jquery-1.9.1.js"》《/script》
《script src="js/esl.js"》《/script》
《script src="BusinessJs/echarts.js"》《/script》
echarts代码：
1、在BusinessJs/echarts.js中引用echarts及zrender：
require.config({
packages: [
{
name: ’echarts’,
location: ’./echarts/src’,
main: ’echarts’
},
{
name: ’zrender’,
location: ’./zrender/src’,// zrender与echarts在同一级目录
main: ’zrender’
}
]
});
require(
[
’echarts’,
’echarts/chart/bar’,
’echarts/chart/pie’
],
function (ec) {
var myChart_Category = ec.init(document.getElementById(’div_pieCategory’));
var myChart_Bar = ec.init(document.getElementById(’div_bar’));
SetTestStatisticsByCategory(ec, myChart_Category);
SetTestStatisticsByBeginTime(ec, myChart_Bar);
//设置点击事件
var ecConfig = require(’echarts/config’);
myChart_Category.on(ecConfig.EVENT.PIE_SELECTED, function (param) {
var selected = param.selected;
//debugger;
var serie
serie = optionpie_category.series;
if (jQuery.inArray(true, selected) 》 -1) {
for (var i = 0; i 《 serie.data.length; i++) {
if (selected) {
$("#hid_category").val(serie.data.name);
GetTestList(serie.data.name);
}
}
}
else {
$("#hid_category").val("");
}
})
myChart_Bar.on(ecConfig.EVENT.CLICK, function (param) {
var selected = param;
var xAxis;
xAxis = optionpie_bar.xAxis;
for (var i = 0; i 《 xAxis.data.length; i++) {
if (i == selected.dataIndex) {
if ($("#hid_date").val() != xAxis.data) {
$("#hid_date").val(xAxis.data);
} else {
$("#hid_date").val("");
}
GetTestList(xAxis.data);
}
}
})
}
)
2、使用jquery ajax获取数据并绑定：
//获取测试类型统计数据
function GetTestStatisticsByCategory() {
$.ajax({
type: "post",
dataType: "text", traditional: true,
data: { oper: "bycategory" },
url: AjaxUrl,
async: false,//表示同步执行
success: function (data, textStatus) {
if (data != null) {
if (data) {
datapie_category = eval(’(’ + data + ’)’);
}
else {
alert("获取测试类型统计数据失败！");
}
}
},
complete: function (XMLHttpRequest, textStatus) { },
error: function (e) {
alert("获取测试类型统计数据失败，请刷新页面重新加载！");
}
});
}
3、ashx后台代码：
组织好字符串返回就行。完全按照这个格式来。
public class test : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string Test = CustomResponse.GetResponse("lc");
string categroy = CustomResponse.GetResponse("cl");
string oper = CustomResponse.GetResponse("oper");
string condition = CustomResponse.GetResponse("cd");
string id = CustomResponse.GetResponse("id");
switch (oper)
{
case "bycategory":
GetTestStatisticsByCategory(context);//按照测试类型统计
break;
case "bystate":
GetTestStatisticsByState(context);//按照测试状态统计
break;
case "bybegintime":
GetTestStatisticsByBeginTime(context);//按照月份统计数据
break;
default:
break;
}
}
/// 《summary》
/// 按照测试类型统计
/// 《/summary》
/// 《param name="context"》《/param》
private void GetTestStatisticsByCategory(HttpContext context)
{
string returnvalue = "[{ value:33,name:’其他’},
{ value:52,name:’测试类型1’},{ value:36,name:’测试类型12’},
{ value:31,name:’测试类型222121’}]";
context.htm = htm&(returnvalue);
context.Response.End();
}
/// 《summary》
/// 按照测试状态统计
/// 《/summary》
/// 《param name="context"》《/param》
private void GetTestStatisticsByState(HttpContext context)
{
string returnvalue = "";
context.htm = htm&(returnvalue);
context.Response.End();
}
/// 《summary》
/// 按照月份统计
/// 《/summary》
/// 《param name="context"》《/param》
private void GetTestStatisticsByBeginTime(HttpContext context)
{
string returnvalue = "[’2014-1’,’2014-2’,’2014-3’,’2013-4’,
’2014-4’,’2013-5’];";
context.htm = htm&(returnvalue);
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
回答不容易,希望能帮到您,满意请帮忙采纳一下，谢谢 !

实现Echarts中数据的动态获取

1.客户端通过ajax发送请求
先绘制一个最简单的Echarts图表：
（这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码）
***隐藏网址***
《html lang="zh-CN"》
《head》
***隐藏网址***
《title》ECharts《/title》

《!-- 引入 echarts.js --》
《script type="text/javascript" src="echarts.min.js"》《/script》
《!-- 引入jquery.js --》
《script type="text/javascript" src="jquery-1.12.3.js"》《/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部分的完整前端代码：
***隐藏网址***
《html lang="zh-CN"》
《head》
***隐藏网址***
《title》ECharts《/title》
《!-- 引入 echarts.js --》
《script type="text/javascript" src="echarts.min.js"》《/script》
《!-- 引入jquery.js --》
《script type="text/javascript" src="jquery-1.12.3.js"》《/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.name); //挨个取出类别并填入类别数组
}
for(var i=0;i《result.length;i++){
nums.push(result.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的用法：
***隐藏网址***
②：在项目的项目WEB-INF/lib下引入这三个jar
***隐藏网址***
TestServlet代码如下：
package test;
import java.io.IOException;
import java.util.*;
import javax.servlet.ServletException;
***隐藏网址***
***隐藏网址***
***隐藏网址***
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中实现动态加载series下data数据

如上图。data位置看似字符串其实是对象形式的。（jsonarray对象）

var Lista = resultData.UserdevicesData;   //如果说这个是我从后台获取到的用户设备信息

下面我要将其装成jsonarray格式的，

var jsonstr = ;

for(var j=0;j《Lista.length;j++){

var json = {};

json.name = Lista.devicetype;

json.value = Lista.count;

jsonstr.push(json);

}

me.dataArr=jsonstr;//这个就可以直接使用了，实现动态数据。

Echarts关于饼图data中数据如何动态填充

var chart = eval(’’);
var length = chart.length;
var arrays = new Array();
for(var i = 0l i 《 length; i++){
    arrays = {
        value:chart,
        name:chart
    }
}
data:arrays

纯手打，你试试

Echarts如何向饼状图添加动态数据

先把动态数据封装成为一个符合echarts格式的数组，如下所示
var datas = [
{value:335, name:’直接访问’},
{value:310, name:’邮件营销’},
{value:234, name:’联盟广告’},
{value:135, name:’视频广告’},
{value:1548, name:’搜索引擎’}
],
然后在如下设置
option = {
title : {
text: ’某站点用户访问来源’,
subtext: ’纯属虚构’,
x:’center’
},
tooltip : {
trigger: ’item’,
formatter: "{a} 《br/》{b} : {c} ({d}%)"
},
legend: {
orient: ’vertical’,
left: ’left’,
data:
},
series : [
{
name: ’访问来源’,
type: ’pie’,
radius : ’55%’,
center: ,
data:datas,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ’rgba(0, 0, 0, 0.5)’
}
}
}
]
};

echarts饼图怎么调用数据库数据

后台从数据库中的得到的json
JSONArray jsonarray=JSONArray.fromObject(rs.getList());//=JSONArray.
request.setAttribute("data", jsonarray);
打印出来的数据
{value:335, name:’直接访问’},
{value:310, name:’邮件营销’},
{value:234, name:’联盟广告’},
{value:135, name:’视频广告’},
{value:1548, name:’搜索引擎’}
pie.jsp
《div id="main" style="height:400px"》《/div》
《script type="text/javascript"》
// 路径配置
require.config({
paths:{
’echarts’ : ’js/echarts’,
}
});

如何利用echarts图表插件获取圆饼图块切换参数

这个可以修改，用自定义的图片就可以修改默认的legend形状
代码如下
legend: {
orient: ’horizontal’, // ’vertical’
x: ’right’, // ’center’ | ’left’ | {number},
y: ’top’, // ’center’ | ’bottom’ | {number}
backgroundColor: ’#eee’,
borderColor: ’rgba(178,34,34,0.8)’,
borderWidth: 4,
padding: 10, //
itemGap: 20,
textStyle: {color: ’red’},
selected: {
’降水量’ : false
},
data: [
{
name:’蒸发量’,
icon : ’image://../asset/ico/favicon.png’,
textStyle:{fontWeight:’bold’, color:’green’}
},
’降水量’,’最高气温’, ’最低气温’
]
}
主要看data属性里面