运用echarts来实现图表
1.首先下载echarts包 &http://echarts.baidu.com/echarts2/doc/example.html，在这里我下载的是
2.将echarts包放到项目中，这是我在项目中的路径
3.柱状图的动态获取
首先 1）需要引入：
<span style="color: #
&script src="js/jquery.min.js"&&/script&
<span style="color: #
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
<span style="color: # &script type="text/javascript"
src="echarts/echarts.js"&&/script&
& & & 2）html，为柱状图设置容器
<span style="color: # &body&
<span style="color: #
&div id="test" style="width:600height:400"&&/div&
<span style="color: #
& & &3）js
&script type="text/javascript"&
// 路径配置
require.config({
echarts: '&%=basePath %&echarts'
'echarts',
'echarts/chart/line',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('test'));
option = {
text: '农户地块面积统计'
tooltip : {
trigger: 'axis'
data:['承保人']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
calculable : true,
type: 'category',
data : (function(){
var arr=[];
type : "post",
async : false, //同步执行
url : "gpadd.do?getNum",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i&result.i++){
console.log(result[i].userName);
arr.push(result[i].userName);
error : function(errorMsg) {
alert("不好意思，图表请求数据失败啦!");
myChart.hideLoading();
axisLabel:{
interval:0,//横轴信息全部显示
rotate:-30,//-30度角倾斜显示
type: 'value',
name: '面积',
max: 1000000,
interval: 100,
axisLabel: {
formatter: '{value} m2'
splitNumber:10
series : [
name:'承保人',
type:'bar',
data : (function(){
var arr=[];
type : "post",
async : false, //同步执行
url : "gpadd.do?getNum",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i&result.i++){
console.log(result[i].landScmj);
arr.push(result[i].landScmj);
error : function(errorMsg) {
alert("不好意思,图表请求数据失败啦!");
myChart.hideLoading();
// 为echarts对象加载数据
myChart.setOption(option);
红色部分的为用ajax来获取动态数据
&4）后台实现
@RequestMapping(params="getNum", produces = "application/json")
public void getNum(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/ charset=utf-8");
List&LandUser& list=new ArrayList&LandUser&();
list=landUserBiz.findAll();
JSONArray jsonArray = JSONArray.fromObject( list );//转化成json对象
PrintWriter out=response.getWriter();
<span style="color: #
out.println(jsonArray);
<span style="color: #
out.flush();
<span style="color: #
out.close();
<span style="color: #
<span style="color: #
4.饼状图的实现
&script type="text/javascript"&
// 路径配置
require.config({
echarts: '&%=basePath %&echarts'
'echarts',
'echarts/chart/pie',// 使用柱状图就加载bar模块，按需加载
'echarts/chart/funnel'
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('test'));
option = {
text: '面积范围统计',
//subtext: '纯属虚构',
x:'center'
tooltip : {
trigger: 'item',
formatter: "{a} &br/&{b} : {c} ({d}%)"
orient : 'vertical',
x : 'left',
data:['0-10000','','','','40000以上']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
width: '50%',
funnelAlign: 'left',
restore : {show: true},
saveAsImage : {show: true}
calculable : true,
series : [
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data : (function(){
var arr=[];
type : "post",
async : false, //同步执行
url : "gpadd.do?getCount",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i&result.listCont.i++){
//alert(result.listCont[i]+" "+result.listName[i]);
arr.push({
name : result.listName[i],
value : result.listCont[i]
error : function(errorMsg) {
alert("不好意思,图表请求数据失败啦!");
myChart.hideLoading();
<span style="color: #0
// 为echarts对象加载数据
<span style="color: #1
myChart.setOption(option);
<span style="color: #2
<span style="color: #3
<span style="color: #4
1 @RequestMapping(params="getCount", produces = "application/json")
public void getCount(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/ charset=utf-8");
List&LandUser& list=new ArrayList&LandUser&();
List&Integer&
listCont=new ArrayList&Integer&();
List&String& listName=new ArrayList&String&();
<span style="color: #
list=landUserBiz.findAll();
<span style="color: #
int count1=0,count2=0,count3=0,count4=0,count5=0;
<span style="color: #
<span style="color: #
for(LandUser lu:list){
<span style="color: #
<span style="color: #
if(lu.getLandScmj()&0&&lu.getLandScmj()&10000)
<span style="color: #
<span style="color: #
else if(lu.getLandScmj()&10000&&lu.getLandScmj()&20000)
<span style="color: #
<span style="color: #
else if(lu.getLandScmj()&20000&&lu.getLandScmj()&30000)
<span style="color: #
<span style="color: #
else if(lu.getLandScmj()&30000&&lu.getLandScmj()&40000)
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
listCont.add(count1);
<span style="color: #
listCont.add(count2);
<span style="color: #
listCont.add(count3);
<span style="color: #
listCont.add(count4);
<span style="color: #
listCont.add(count5);
<span style="color: #
listName.add("0-10000");
<span style="color: #
listName.add("");
<span style="color: #
listName.add("");
<span style="color: #
listName.add("");
<span style="color: #
listName.add("40000以上");
<span style="color: #
<span style="color: #
PrintWriter out=response.getWriter();
<span style="color: #
JSONObject jsonData=new JSONObject();
<span style="color: #
jsonData.put("listCont",listCont);
<span style="color: #
jsonData.put("listName",listName);
<span style="color: #
out.println(jsonData);
<span style="color: #
out.flush();
<span style="color: #
out.close();
<span style="color: #
Views(...) Comments()echarts通过后台接口来获取_百度知道
echarts通过后台接口来获取
效果图上面的，通过后台接口来获取四条线的data...
效果图上面的，通过后台接口来获取四条线的data
&#xe6b9;答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
爱笑的柯南推理
来自电脑网络类芝麻团
爱笑的柯南推理
采纳数：3244
获赞数：1663
参与团队：
在error和success中加入debugger，用chrome或firefox调试chrome是ctrl+shift+i ，刷新页面进入debugger后看errorMsg到底里面内容是什么，找到错误原因才行，是否为url未连接上
我尝试请求但是好像并没有反应
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。404 Not Found
The requested URL /a/8935 was not found on this server.在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
import React,{PropTypes, Component} from "react";
import "./css/graphs.scss";
import ReactEcharts from 'echarts-for-react';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import {Card, Radio} from 'antd';
const RadioButton = Radio.B
const RadioGroup = Radio.G
export default class Graphs extends React.Component {
constructor() {
this.state = {
graphsData: []
componentWillUnmount() {
var myHeaders = new Header();
myHeaders.append("Content-Type", "application/ charset=UTF-8");
myHeaders.append("Content-Length", context.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
var myInit = {
method: 'POST',
headers: myHeaders,
mode: 'cors',
cache: 'default'
}; // 头部信息，解决兼容性问题
var url = "http://localhost:3000/users/data"; // 接口url
fetch(url).then(function(res) {
if (res.ok) {
console.log(res.json());
return res.json()
this.LogError(res)
}).then(function(json) {
if (json.code == "200") {
return json.data
}).then(function(data) {
for (var i = 0; i & data. i++) {
return data[i]
}).then((e) =& {
this.setState({graphsData: e})
LogError(res) {
console.error('服务器繁忙,请稍后重试; \r\nCode:' + res.status)
getOption() {
color: ['#ff6384'],
// text: '动态数据',
// subtext: '纯属虚构'
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
backgroundColor: '#ff6384'
data: ['最新电量']
toolbox: {
show: false,
feature: {
dataView: {
readOnly: false
restore: {},
saveAsImage: {}
dataZoom: {
show: false,
type: 'category',
boundaryGap: true,
data: (function() {
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
now = new Date(now - 1800000);
type: 'category',
boundaryGap: true,
data: (function() {
var res = [];
var len = 10;
while (len--) {
res.push(len + 1);
],`请输入代码`
type: 'value',
scale: true,
name: '电量',
boundaryGap: [0.2, 0.2]
type: 'value',
scale: true,
name: '计划电量',
max: 1200,
boundaryGap: [0.2, 0.2]
name: '最新电量',
type: 'line',
data : 我这里要后台给的数据
render() {
&Card id="dash-graph" title="空压机能耗曲线" extra={& div & &RadioGroup defaultValue="a"&
&RadioButton value="a"&时&/RadioButton&
&RadioButton value="b"&天&/RadioButton&
&RadioButton value="c"&月&/RadioButton&
&/RadioGroup& & /div&}&
&ReactEcharts option={this.getOption()} notMerge={true} lazyUpdate={true} theme={"theme_name"}/&
以上是我自己胡乱写的，关键就在series的data，我不知道怎么搞数据，我后台模拟了一个假个数据，是个json格式的，里面一个data:[1,2,4,5,3,2]这样的一个数组。
有没有人能解决一下，我series里data数据怎么从后台返回的写进去啊。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
getOption()方法return的对象，直接写到this.state.option上，render函数中：
&ReactEcharts option={this.option} notMerge={true} lazyUpdate={true} theme={"theme_name"}/&
拿到后台数据后，直接通过this.setState({option: &data.res&})改变参数，然后视图就自动更新了
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。