java项目:统计图表怎么做?百度echarts使用总结

java项目:统计图表怎么做?百度echarts使用总结在项目验收阶段,遇到用户提新需求,然后不给你结账,对于出差已经了两个礼拜的程序猿-我来说,也是很无奈了!

欢迎大家来到IT世界,在知识的湖畔探索吧!

新需求又来了!在项目验收阶段,遇到用户提新需求,然后不给你结账,对于出差已经了两个礼拜的程序猿—我来说,也是很无奈了!你要是不给做,人家不给钱,你要是做,时间又太紧张。

什么需求呢?做统计图,统计这东西,对于有点经验的开发者来说,如果自己纯纯的写sql,各种关联表查询,组装数据结构,都是很费时间的,工作一天,有时候发现统计数据竟然对不上!!!更奔溃的事,差个1,2百这都好说,应该统计的精度不太对。。。但是就怕你统计出来查1个两个的,你说这什么问题,真的不好说了!很有可能就是那一两条不规范数据倒置的。。。多了不说了,一把辛酸泪。

项目验收阶段,时间本来就紧张,领导的意思是,突出功能。什么意思呢?就是突出,咱们的系统有这个功能,能统计。说实话,出图不是很难,关键是写后台,大家一定要分清主要任务,关注点应该是我们的数据,而不是页面展示。后台代码,各家有各家不一样的地方。但是前台页面,又往往成为客户吐槽的重灾区。公司沿袭了使用echarts的习惯,恰好,公司统计中好多统计图的制作者就是本人,所以给大家介绍一下echarts的简单使用。希望大家快速入门。

第一步:在项目中拷贝echarts的js资源文件。。。(废话)

java项目:统计图表怎么做?百度echarts使用总结

项目中拷贝资源文件

第二步:在你的页面中引入js。。。(废话)

java项目:统计图表怎么做?百度echarts使用总结

js引入

第三步:拷贝百度eacharts的官方demo。。。

java项目:统计图表怎么做?百度echarts使用总结

java项目:统计图表怎么做?百度echarts使用总结

java项目:统计图表怎么做?百度echarts使用总结

官方实例有很多,自己可以点进去看看。。。

当然效果是真的很朴素,,,要是自己想调一些样式啥的,请看下一步,调样式

第四步,调样式(真的很不在行,但是真得依靠度娘,遇到问题解决问题,代码说明)

$(function() { //页面加载的时候,执行查询,生成统计图

queryDataByNdAndLx();

})

后台返回的数据是这样的

java项目:统计图表怎么做?百度echarts使用总结

//取得总数

var sum=0;

//取得json中的value,也就是柱状图y轴的值

function getDataValue(json){

var arr = []

for(var i =0 ; i <json.length;i++){

arr.push(json[i].num);

k=parseInt(json[i].num);

sum+=k;

}

return arr;

}

//取得json中的name,也就是柱状图横左边的值

function getDataName(json){

var arr = []

for(var i =0 ; i <json.length;i++){

arr.push(json[i].xzlb);

}

return arr;

}

//ajax发送请求,使用后台数据,生成图

function queryDataByNdAndLx(){

$(“页面要放置图表的div”).html(“”);

var url=“返回数据的后台路径‘’

var jsondata;

var myChart = echarts.init(document.getElementById(‘放置图表的div’));

myChart.dispose();

$.ajax({

type: “POST”,

url: url,

async: true, //同步

dataType: “json”,

beforeSend:function(XMLHttpRequest){//查询过程中,遮罩效果

$(‘body’).mask(“处理中”)

},

//后台执行完成后,返回页面处理函数

success: function(result){

$(‘body’).unmask();//返回数据,取消遮罩

if (result!=null&&result != “”) {

var values=getDataValue(result);

var names=getDataName(result);

$(“#sum”).html(sum);

var myChart = echarts.init(document.getElementById(‘main1’));

option = {

title : {

text :’江苏省’,

subtext : ‘江苏省学校分布情况’,

x : ‘center’

},

tooltip : {

trigger: ‘axis’,

axisPointer : { // 坐标轴指示器,坐标轴触发有效

type : ‘shadow’ // 默认为直线,可选为:’line’ | ‘shadow’

}

},

toolbox: {//自带的工具

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {show: true, type: [‘line’]},

restore : {show: true},

saveAsImage : {show: true}

}

},

grid: {//横左边文字太长显式不全,看这里

left: ‘3%’,

right: ‘4%’,

bottom: ‘35%’,

containLabel: true

},

xAxis : [

{

type : ‘category’,

data : names,

axisTick: {

alignWithLabel: true

},

axisLabel: {//文字倾斜

interval:0,

rotate:40

},

}

],

yAxis : [

{

type : ‘value’,

name : ‘学校数(单位:所)’

}

],

series : [

{

name:’直接访问’,

type:’bar’,

barWidth: ‘60%’,

label: {//将value显式到柱子顶上

normal: {

show: true,

position: ‘top’

}

},

data:values,

itemStyle: {//柱子颜色单一,这么办

normal: {

color: function(params) {

var colorList = [‘#C33531′,’#EFE42A’,’#64BD3D’,’#EE9201′,’#29AAE3′, ‘#B74AE5′,’#0AAF9F’,’#E89589′,’#16A085′,’#4A235A’,’#C39BD3 ‘,’#F9E79F’,’#BA4A00′,’#616A6B’,’#4A235A’,’#3498DB’ ];

return colorList[params.dataIndex]

}

},

},

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

} else {

$(“页面div”).html(“<p style=’color:red;font-size:25px’>未查询到数据</p>”);

}

}

});

}

效果出图

java项目:统计图表怎么做?百度echarts使用总结

最终效果

欢迎收藏转发,总有用到的时候。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/30194.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信