Echars统计图的使用
第一步去官网挑选自己需要的图形了。 官网地址：https://echarts.baidu.com/
第二步按照官网的demo，下载需要的js组件并放到自己的项目中。
第三步仿照demo创建需要的div，并在js中将方法原模原样的复制过去，运行测试是否能够在页面显示出来，以此来检查最基本的js组件有木有引对等最不应该犯得小错误。
第四步确定demo在自己的项目中可以正常显示之后，就可以对自己的数据进行处理了。按照demo的数据格式进行拼接，可以通过后台进行拼接，也可以在js中进行拼接。
以下是我个人对于基本的柱形图、饼状图、折线图的使用代码。
因为这是在原来项目上进行修改，而且项目比较老了，不想动后台，直接将后台传输到前台的页面在js中进行处理了。
柱形图：
后台返回到页面的信息如下
<categories><category label='网络剧(部)' /><category label='网络剧(集)' /><category label='微电影(部)' /><category label='网络电影(部)' /><category label='影视类动画片(部)' /><category label='影视类动画片(集)' /><category label='纪录片(部)' /><category label='纪录片(集)' /><category label='文艺(部)' /><category label='文艺(集)' /><category label='娱乐(部)' /><category label='娱乐(集)' /><category label='科技(部)' /><category label='科技(集)' /><category label='财经(部)' /><category label='财经(集)' /><category label='体育(部)' /><category label='体育(集)' /><category label='教育(部)' /><category label='教育(集)' /><category label='其他(部)' /><category label='其他(集)' /></categories><dataset seriesname='节目/栏目统计' color='56B9F9' showValue='1'><set value='1180' /><set value='2236900' /><set value='14317' /><set value='1167' /><set value='779' /><set value='21434' /><set value='1295' /><set value='7772' /><set value='722' /><set value='7072' /><set value='3135' /><set value='24983' /><set value='37' /><set value='109' /><set value='242' /><set value='5218' /><set value='105' /><set value='1274' /><set value='161' /><set value='5849' /><set value='3554' /><set value='15212' /></dataset>
jsp代码（片段）
<head>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/lib/echarts/echarts.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/programCount/echarsProgrammeCount.js"></script>
</head>
<div id="my-tabs-qcq" align="center" style="width: 1000px;height:400px"></div>
js代码（片段）
function show_queryRpt(){
var myChart = echarts.init(document.getElementById("my-tabs-qcq"));
Ext.Ajax.request({
url: './rptController.do',
timeout: '60000',
params:{
method:'newQueryRptSame', //queryRpt
sign : Ext.getCmp('programSignJs').getValue(),
cityCode: deptTpye >1 ? cityCode : Ext.getCmp('rptCityJs').getValue(),
deptId: deptTpye >2 ? deptId : Ext.getCmp('rptDeptJs').getValue() ,
deptName : Ext.getCmp('rptDeptJs').getRawValue() ,
important : Ext.getCmp('importantJs').getValue() ,
inceptObj : Ext.getCmp('inceptObjJs').getValue() ,
startDate : Ext.getCmp('recordStartDateJs1').getValue() ,
endDate : Ext.getCmp('recordEndDateJs1').getValue(),
duration : Ext.getCmp('durationJs').getValue()
},
success : function(resp, option) { //数据处理部分就在这里，ajax返回的data也就是resp进行处理以下栗色部分为数据处理的过程
var res = resp.responseText;
alert(res)
var reg1 = /label='(.*?)'/g;
var reg2 = /value='(\d+)'/g;
var reg3 = /\'.*\'/;
var str1 = res.match(reg1);
var str2 = res.match(reg2);
var arrayObj = new Array();
var arrayVal = new Array();
//alert(str1)
if(!(str1 == null || str1 == "" || str1 == "undefined")){
for (var i = 0;i<str1.length;i++){
arrayObj.push(str1[i].match(reg3).toString().replace(/\'/g,""));
arrayVal.push(str2[i].match(reg3).toString().replace(/\'/g,""));
}
//console.log("arrayObj=="+ arrayObj);
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
data:['备案通过节目和栏目']
},
xAxis: {
data: arrayObj, //重点拼接数据之一
axisLabel : {//坐标轴刻度标签的相关设置。
interval:0,
rotate:"30" //x轴倾斜程度 当x轴字符串过长时可以倾斜显示
}
//下边注释掉的为将每行显示的字符串进行处理
/*axisLabel : {//坐标轴刻度标签的相关设置。
formatter : function(arrayObj){
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = arrayObj.length;// 实际标签的个数
var provideNumber = 2;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
*//**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*//*
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
*//** 循环每一行,p表示行 *//*
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = arrayObj.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = arrayObj.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = arrayObj;
}
//将最终的字符串返回
return newParamsName
}
}*/
},
yAxis: {},
series: [{
name: '备案通过节目和栏目',
type: 'bar',
itemStyle: {
normal:{
color:"#4169E1"
}
},
data: arrayVal //重点拼接数据之二
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}else{
alert("暂无数据")
}
}
});
};
饼状图：
后台返回到页面的数据
<set name= '网络剧' value='9.81087600799503756289199807016334688814' isSliced='1' /><set name= '微电影' value='11427.8421211815707228551265248512954935' isSliced='1' /><set name= '网络电影' value='74.66496887379739671760045274476513865308' isSliced='1' /><set name= '影视类动画片' value='15.55840286054827175208581644815256257449' isSliced='1' /><set name= '纪录片' value='37.89181561618062088428974600188146754468' isSliced='1' /><set name= '文艺' value='31.73720740337506804572672836145890038106' isSliced='1' /><set name= '娱乐' value='26.06226289647620165043607493449098517736' isSliced='1' /><set name= '科技' value='6' isSliced='1' /><set name= '财经' value='7.0501632021989348909122143961518639409' isSliced='1' /><set name= '体育' value='70.21899362154500354358610914245216158753' isSliced='1' /><set name= '教育' value='19.94711147274206672091131000813669650122' isSliced='1' /><set name= '其他视听节目' value='10.45147170768840395838619639685359045927' isSliced='1' />|11427.842
jsp代码同上
js代码：
var show_tInterval = function() {
var myChart = echarts.init(document.getElementById("chartTime"));
var programCity;
if(cityName == Ext.getCmp('cityTimeJs').getValue()){
programCity = cityCode;
}else{
programCity = Ext.getCmp('cityTimeJs').getValue();
}
var programDept;
if(deptName == Ext.getCmp('deptTimeJs').getValue()){
programDept = deptId;
}else{
programDept = Ext.getCmp('deptTimeJs').getValue();
}
var avgOrSumTime = Ext.getCmp('avgOrSumTimeJs').getValue();
Ext.Ajax.request({
url: './programCountcontroller.do?method=newIteminterval', //newIteminterval
timeout: '60000',
params:{
sign : Ext.getCmp('signTimeJs').getValue(),
cityCode : programCity,
uploadDeptId : programDept,
typeTime : Ext.getCmp('typeTimeJs').getValue(),
avgOrSumTime : avgOrSumTime //Ext.getCmp('avgOrSumTimeJs').getValue()
},
success : function(resp, option) { //进行数据处理，用到了正则匹配。数据一般都是转为json格式。
var res = resp.responseText;
//alert(res)
var reg1 = /name=\s'(.*?)'/g;
var reg2 = /value='(.*?)'/g;
var reg3 = /\'.*\'/;
var str1 = res.match(reg1);
var str2 = res.match(reg2);
var arrayData = new Array();
var str4 = "";
var legenddata = '[';
var seriesdata = '[';
if(!(str1 == null || str1 == "" || str1 == "undefined")){
for (var i = 0;i<str1.length;i++){
//拼接数据 将“=”替换成“:”
var strName = str1[i].toString().replace(/=/g,":");
strName = strName.substring(0,strName.length);
//console.log("strName======"+strName);
legenddata += '"' + strName.match(reg3).toString().replace(/\'/g,"") + '",'
//console.log(str1[i].toString().replace(/=/g,":"));
var str3 = str2[i].toString().replace(/\'/g,"").replace(/=/g,":");
var strNum;
if(str3.indexOf('.') != -1){ //如果是浮点类型的则保留两位小数
strNum = str3.substring(0,str3.indexOf('.')+3);
}else{ //整数直接保留
strNum = str3;
}
seriesdata += '{"name":"' + strName.match(reg3).toString().replace(/\'/g,"") + '","value":' + strNum.substring(6,strNum.length) + '},';
//console.log(strName);
//arrayData.push("{"+strNum+","+strName+"}");
}
if (legenddata.length > 1) {
legenddata = legenddata.substring(0, legenddata.length - 1);
}
if (seriesdata.length > 1) {
seriesdata = seriesdata.substring(0, seriesdata.length - 1);
}
legenddata += ']';
seriesdata += ']';
var arr1 = res.split('|')[0];
var arr2 = res.split('|')[1];
var caption = '类型平均时长统计';
if(avgOrSumTime == 1){
caption = '类型总时长统计';
}else if(avgOrSumTime == 2){
caption = '节目总备案时长';
}else if(avgOrSumTime == 3){
caption = '栏目总备案时长';
}else if(avgOrSumTime == 4){
caption = '全部总备案时长';
}
option = {
title : {
text: '类型总时长统计',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: $.parseJSON(legenddata) //需要重点拼接的数据之一
},
series : [
{
name: '数据来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data: $.parseJSON(seriesdata), //需要重点拼接的数据之二
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
}else{
alert("暂无数据")
}
}
});
};
折线图：
后台返回页面数据（片段）：
<categories> <category label='2013-01' /><category label='2013-02' /><category label='2013-03' /><category label='2013-04' /><category label='2013-05' /><category label='2013-06' /><category label='2013-07' /><category label='2013-08' /><category label='2013-09' /><category label='2013-10' /><category label='2013-11' /><category label='2013-12' /><category label='2014-01' /><category label='2014-02' /><category label='2014-03' /><category label='2014-04' /><category label='2014-05' /><category label='2014-06' /><category label='2014-07' /><category label='2014-08' /><category label='2014-09' /><category label='2014-10' /><category label='2014-11' /><category label='2014-12' /><category label='2015-01' /><category label='2015-02' /><category label='2015-03' /><category label='2015-04' /><category label='2015-05' /><category label='2015-06' /><category label='2015-07' /><category label='2015-08' /><category label='2015-09' /><category label='2015-10' /><category label='2015-11' /><category label='2015-12' /><category label='2016-01' /><category label='2016-08' /><category label='2017-02' /><category label='2017-06' /><category label='2019-01' /></categories><dataset showValue='1'> <set value='435' /> <set value='2221' /> <set value='3001' /> <set value='1797' /> <set value='3141' /> <set value='8709' /> <set value='2756' /> <set value='1606' /> <set value='1496' /> <set value='1241' /> <set value='1485' /> <set value='3227' /> <set value='2586' /> <set value='2635' /> <set value='2802' /> <set value='1394' /> <set value='3155' /> <set value='1718' /> <set value='2442' /> <set value='1690' /> <set value='1654' /> <set ...
jsp同第一个
js代码：
var show_Drift = function() {
var city;
var chartDirft = echarts.init(document.getElementById("chartDirft"));
if(cityName == Ext.getCmp('cityDriftJs').getValue()){
city = cityCode;
}else{
city = Ext.getCmp('cityDriftJs').getValue();
}
var dept;
if(deptName == Ext.getCmp('deptDriftJs').getValue()){
dept = deptId;
}else{
dept = Ext.getCmp('deptDriftJs').getValue();
}
Ext.Ajax.request({
url: './programCountcontroller.do',
timeout: '60000',
params:{
method:'newStaticChange',
// method:'staticChange',
sign : Ext.getCmp('signDriftJs').getValue(),
city:city,
dept:dept,
timeType:Ext.getCmp('timeTypeJs').getValue(),
year:Ext.getCmp('yearJs').getValue(),
yearType:Ext.getCmp('yearTypeJs').getValue(),
quarterType:Ext.getCmp('quarterTypeJs').getValue(),
monthType:Ext.getCmp('monthTypeJs').getValue()
},
success : function(resp, option) {
var res = resp.responseText;
//alert(res)
var reg1 = /label='(.*?)'/g;
var reg2 = /value='(\d+)'/g;
var reg3 = /\'.*\'/;
var str1 = res.match(reg1);
var str2 = res.match(reg2);
var arrayObj = new Array();
var arrayVal = new Array();
if(!(str1 == null || str1 == "" || str1 == "undefined")){
for (var i = 0;i<str1.length;i++){
arrayObj.push(str1[i].match(reg3).toString().replace(/\'/g,""));
arrayVal.push(str2[i].match(reg3).toString().replace(/\'/g,""));
}
option = {
xAxis: {
type: 'category',
data: arrayObj, //重点数据一
axisLabel : {//坐标轴刻度标签的相关设置。
interval:0,
rotate:"45" //x轴倾斜程度 当x轴字符串过长时可以倾斜显示
}
},
yAxis: {
type: 'value'
},
series: [{
data: arrayVal, //重点数据二
type: 'line',
itemStyle : { normal: {label : {show: true}}}
}]
};
chartDirft.setOption(option);
}else{
alert("暂无数据")
}
}
});
} ;
最终总结一下，统计图无非就是按照官网上demo中的数据格式进行拼接，然后就是对数据进行处理，处理过程中一定要小心，会出现各种情况。
举个栗子（使用时出现的问题）：
1、数据格式明明拼对了，直接拿出来放在官网上进行测试也没问题，把数据直接放在规定的地方也没问题，但是只要是把它放在一个对象里，再放到规定位置就不行出不来，在组件引对的情况下可能是数据不是json格式，需要将数据json处理一下。
2、上面的饼图的代码，对浮点类型的数据进行了处理，但是没想到出现了一个整数，导致数据不完整，无法进行json转换，最后图也出不来。
3、有时候数据可能太大或者字符串太长都可以进行处理，例子中均有处理，也可以在网上进行搜索。
Echars统计图的使用的更多相关文章
- echars入门篇
官网地址:echars. 官方实例:首次使用请点击. 官方文档以及第一次操作实例如下 我们生活中有很多统计图,举例一下,有:柱形图.饼图.折线图等一些可以统计数据的形式. 图有:X轴(横轴),Y轴(纵 ...
- 【Java EE 学习 74 下】【数据采集系统第六天】【使用Jfreechart的统计图实现】【将JFreechart整合到项目中】
之前说了JFreechart的基本使用方法,包括生成饼图.柱状统计图和折线统计图的方法.现在需要将其整合到数据采集系统中根据调查结果生成三种不同的统计图. 一.统计模型的分析和设计 实现统计图显示的流 ...
- 【Java EE 学习 74 上】【数据采集系统第六天】【使用Jfreechart的统计图实现】【Jfreechart的基本使用方法】
之前已经实现了数据的采集,现在已经有了基本的数据,下一步就需要使用这些数据实现统计图的绘制了.这里使用Jfreechart实现这些统计图的绘制.首先看一下Jfreechart的基本用法,只有知道了它的 ...
- 使用C#和Excel进行报表开发（三）－生成统计图（Chart）
有的Web项目选用Excel作为报表方案,在服务器端生成Excel文件,然后传送到客户端,由客户端进行打印.在国内的环境下,相对PDF方式,Excel的安装率应该比pdf阅读器的安装率要高,同时,微软 ...
- Html5绘制饼图统计图
这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- java利用JFreeChart实现各种数据统计图（柱形图，饼图，折线图）
最近在做数据挖掘的课程设计,需要将数据分析的结果很直观的展现给用户,这就要用到数据统计图,要实现这个功能就需要几个第三方包了: 1. jfreechart-1.0.13.jar 2. ...
- EChars学习-2
上海的echars学习 <html> <head> <meta charset="utf-8"> <meta http-equiv=&qu ...
- Extjs4.2如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息
var pageSize = 20;//初始化每页数据条数 var winTitle = '';//初始化窗口标题 /** *点击统计图时,弹出一个窗口,显示统计的详情列表信息, *该方法为项目中所有 ...
随机推荐
- ajax 用fom提交
$.ajax({ type : "POST", url : "${ctx}/credit/LoanauditCtrl/qwe.do?hetong="+heton ...
- Java之jdk环境变量配置
1.jdk下载(按平时下载,注意一下路径就行)2.配置环境变量 :JAVA_HOME.Path.ClassPath3.检查是否成功:(查一下版本,可省略).运行环境(java.javac) 2:电脑- ...
- shell脚本的使用该熟练起来了，你说呢？（篇三）
继续前一篇的文章: shell脚本的使用该熟练起来了,你说呢?(篇一) shell脚本的使用该熟练起来了,你说呢?(篇二) 文章里面测试的命令脚本文件,大家关注我公众号后,可以私信我领取文件. 作者: ...
- 从问题入手，深入了解JavaScript中原型与原型链
从问题入手,深入了解JavaScript中原型与原型链 前言 开篇之前,我想提出3个问题: 新建一个不添加任何属性的对象为何能调用toString方法? 如何让拥有相同构造函数的不同对象都具备相同的行 ...
- 为什么对gRPC做负载均衡会很棘手？
在过去的几年中,随着微服务的增长,gRPC在这些较小的服务之间的相互通信中获得了很大的普及,在后台,gRPC使用http/2在同一连接和双工流中复用许多请求. 使用具有结构化数据的快速,轻便的二进制协 ...
- Codeforces Round #658 (Div. 2) D. Unmerge（dp）
题目链接:https://codeforces.com/contest/1382/problem/D 题意 给出一个大小为 $2n$ 的排列,判断能否找到两个长为 $n$ 的子序列,使得二者归并排序后 ...
- Codeforces Round #604 (Div. 2) A. Beautiful String（贪心）
题目链接:https://codeforces.com/contest/1265/problem/A 题意 给出一个由 a, b, c, ? 组成的字符串,将 ? 替换为 a, b, c 中的一个字母 ...
- P2762 太空飞行计划问题 (最小割)
题意:n个实验 每个实验可获利ai元 做每个实验需要几个仪器 购买每个仪器有不同的花费 不同实验可能会用到同一个仪器 只用购买一次 求最大收益 题解:......................... ...
- Codeforces Round #646 (Div. 2) E. Tree Shuffling（树上dp）
题目链接:https://codeforces.com/contest/1363/problem/E 题意 有一棵 $n$ 个结点,根为结点 $1$ 的树,每个结点有一个选取代价 $a_i$,当前 $ ...
- 【hdu 3579】Hello Kiki（数论--拓展欧几里德 求解同余方程组）
题意:Kiki 有 X 个硬币,已知 N 组这样的信息:X%x=Ai , X/x=Mi (x未知).问满足这些条件的最小的硬币数,也就是最小的正整数 X. 解法:转化一下题意就是 拓展欧几里德求解同余 ...