第一步去官网挑选自己需要的图形了。 官网地址: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统计图的使用的更多相关文章

  1. echars入门篇

    官网地址:echars. 官方实例:首次使用请点击. 官方文档以及第一次操作实例如下 我们生活中有很多统计图,举例一下,有:柱形图.饼图.折线图等一些可以统计数据的形式. 图有:X轴(横轴),Y轴(纵 ...

  2. 【Java EE 学习 74 下】【数据采集系统第六天】【使用Jfreechart的统计图实现】【将JFreechart整合到项目中】

    之前说了JFreechart的基本使用方法,包括生成饼图.柱状统计图和折线统计图的方法.现在需要将其整合到数据采集系统中根据调查结果生成三种不同的统计图. 一.统计模型的分析和设计 实现统计图显示的流 ...

  3. 【Java EE 学习 74 上】【数据采集系统第六天】【使用Jfreechart的统计图实现】【Jfreechart的基本使用方法】

    之前已经实现了数据的采集,现在已经有了基本的数据,下一步就需要使用这些数据实现统计图的绘制了.这里使用Jfreechart实现这些统计图的绘制.首先看一下Jfreechart的基本用法,只有知道了它的 ...

  4. 使用C#和Excel进行报表开发(三)-生成统计图(Chart)

    有的Web项目选用Excel作为报表方案,在服务器端生成Excel文件,然后传送到客户端,由客户端进行打印.在国内的环境下,相对PDF方式,Excel的安装率应该比pdf阅读器的安装率要高,同时,微软 ...

  5. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  6. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  7. java利用JFreeChart实现各种数据统计图(柱形图,饼图,折线图)

    最近在做数据挖掘的课程设计,需要将数据分析的结果很直观的展现给用户,这就要用到数据统计图,要实现这个功能就需要几个第三方包了: 1.       jfreechart-1.0.13.jar 2.    ...

  8. EChars学习-2

    上海的echars学习 <html> <head> <meta charset="utf-8"> <meta http-equiv=&qu ...

  9. Extjs4.2如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息

    var pageSize = 20;//初始化每页数据条数 var winTitle = '';//初始化窗口标题 /** *点击统计图时,弹出一个窗口,显示统计的详情列表信息, *该方法为项目中所有 ...

随机推荐

  1. Cisco WS-C4503-E CPU使用率高问题排查

    现状描述: 办公网环境下由2台VSS模式下WS-C4503-E 作为核心交换机,下接若干台WS-C2960X-48LPS-L作为接入.行政同事在进行工位改造的时候为方便将原工位网线下联若干台hub. ...

  2. ARP病毒系列——基础篇

                              概念和关系介绍:(ARP.IP.Mac 三者的关系) ARP,全称Address Resolution Protocol,中文名为地址解析协议,它工 ...

  3. HTML学习速记

    HTML结构导图 先看HTML结构示意图 本文主要讲解HTML当中的一些html标签,css样式,javascript方法 html html的标签有各式各样的数不胜数,但是常用的并不多,总结下我目前 ...

  4. shell编程基础一

    1.定义变量 a=1 shell定义变量要注意等号前后不能有空格,不然会报错,请严格按照格式编写. 2.打印输出 echo 1 使用echo打印,后面留一个空格. 3.shell中通过 ${变量名} ...

  5. [CERC2014]Virus synthesis【回文自动机+DP】

    [CERC2014]Virus synthesis 初始有一个空串,利用下面的操作构造给定串 SS . 1.串开头或末尾加一个字符 2.串开头或末尾加一个该串的逆串 求最小化操作数, \(|S| \l ...

  6. Java_web项目中在Java文件里面通过类装载器对资源文件读取

    承接上一节:在eclipse完成对Java_web项目里面资源文件的读取 我们首先在src目录下创建一个资源文件db.properties 内容如下: url=127.0.0.1 name=root ...

  7. poj 2653 线段相交裸题(解题报告)

    #include<stdio.h> #include<math.h> const double eps=1e-8; int n; int cmp(double x) { if( ...

  8. P3399 丝绸之路(DP)

    题目背景 张骞于公元前138年曾历尽艰险出使过西域.加强了汉朝与西域各国的友好往来.从那以后,一队队骆驼商队在这漫长的商贸大道上行进,他们越过崇山峻岭,将中国的先进技术带向中亚.西亚和欧洲,将那里的香 ...

  9. Atcoder ABC162 D - RGB Triplets

    传送门:D - RGB Triplets  题意:给你一个只含'R','G','B'的字符串,求有多少个长度为3且每个字符都不相等,并且第一第二和第二第三的区间长度不同的子序列. 题解:统计每个字符各 ...

  10. 洛谷P1628合并序列【模板】(Trie+dfs)

    很久之前写的题了,当时不知道怎么dfs所以卡了一段时间,^_^ 题解:由于题目给了一大堆字符串,所以首先考虑应该可以建树,之后找到T所在的位置,对T所在的位置dfs就行了 代码: 1 #include ...