echarts的应用(利用后台传回json创建统计图，以及和ext的关联使用等）

来源：互联网发布：warframe 淘宝队长包编辑：程序博客网时间：2024/06/05 18:09

最近要做统计图表所以用了echarts ，效果不错，而且也很简单。根据echarts需要的数据类型后台拼接json，再用js拆分组装成对应数组数据等。就实现了功能。

效果图

1.最简单的：

2.带时间轴，较复杂的

3.与ext下拉框或者普通下拉框联动

4.扇形带时间轴

关于echarts的使用，可以百度echarts，有配置文档和api和下载资料，可以自己认真学习一下，在这里粘贴部分自己写的例子。

由于我一个模块要展现多个类似类型的统计图所以我的储存过程中将各种数据查询好一块放给前台前台自己组装。

例子：

后台返回json串：

前台配置jsp共三个统计图：(由于本人所做jsp为页面的一部分，页面已经引入过echarts的js，所以在这里没有引进，自己注意一下）

<div>
<div style="width: 1000px;height:100px;margin:0 auto ;" ></div>
<div id="dj1" style="width: 1000px;height:400px;margin:0 auto ;" ></div>
<div style="width: 1000px;height:100px;margin:0 auto ;" ></div>
<div id="dj2" style="width: 1100px;height:400px;margin:0 auto ;" ></div>
<div style="width: 1000px;height:100px;margin:0 auto ;" ></div>
<div style="width: 300px;margin-left:10px;margin-top:10px;" >
<input id='djgjd' type="text" style="float:center ;"/></div>
<div id="djok">
<div id="dj3" style="width: 1100px;height:400px;float:left;" ></div>
</div>
</div>

<script language='javascript'>
//基于准备好的dom，初始化echarts实例

var myChart1 = echarts.init(document.getElementById('dj1'));
var myChart2 = echarts.init(document.getElementById('dj2'));
var myChart3 = echarts.init(document.getElementById('dj3'));

var panel = Ext.getCmp('<%=panelid%>');
var app = Mixky.wasoft.cache.Applications['<%=appkey%>'];
var win = panel.findParentByType('window');
var ss=0;
//++++++++++++++数据集合服务于异步加载
//var nfs={};

var leds=["高级技师","技师","高级工","中级工","初级工"];//legend数组，图例组件
var jgj={};//结果集合
var oxn=2;//当前年
//三年集合
var nfx=new Array(3);
//三年统计集合
var nfarr={};
var nfdate1=new Array();
var nfdate2=new Array();
var nfdate3=new Array();
var nfdate4=new Array();
var nfdate5=new Array();
//按市三年数据
var gjdarrs={};
var gjdx=new Array();//设区市x轴
var gjddate11=new Array();
var gjddate12=new Array();
var gjddate13=new Array();
var gjddate15=new Array();
var gjddate14=new Array();
var gjddate21=new Array();
var gjddate22=new Array();
var gjddate23=new Array();
var gjddate25=new Array();
var gjddate24=new Array();
var gjddate31=new Array();
var gjddate32=new Array();
var gjddate33=new Array();
var gjddate34=new Array();
var gjddate35=new Array();
//按培训机构统计
var cbwdarrs={};
var cbwdy=new Array();//培训机构y轴
var cbwddate11=new Array();
var cbwddate12=new Array();
var cbwddate13=new Array();
var cbwddate14=new Array();
var cbwddate15=new Array();
var cbwddate21=new Array();
var cbwddate22=new Array();
var cbwddate23=new Array();
var cbwddate24=new Array();
var cbwddate25=new Array();
var cbwddate31=new Array();
var cbwddate32=new Array();
var cbwddate33=new Array();
var cbwddate34=new Array();
var cbwddate35=new Array();

SyteAppDirect.Jsfx_djtj(function(result){
//加载1
jgj=result;
nfarr=result.results1;
for (var i = 0, l = nfarr.length; i < l; i++) {
var a=3*i
var b=3*i+1
var c=3*i+2
nfx[a]=nfarr[i].nf1;
nfx[b]=nfarr[i].nf2;
nfx[c]=nfarr[i].nf3;

nfdate1[a]=nfarr[i].dj11;
nfdate1[b]=nfarr[i].dj21;
nfdate1[c]=nfarr[i].dj31;
nfdate2[a]=nfarr[i].dj12
nfdate2[b]=nfarr[i].dj22;
nfdate2[c]=nfarr[i].dj32;
nfdate3[a]=nfarr[i].dj13
nfdate3[b]=nfarr[i].dj23;
nfdate3[c]=nfarr[i].dj33;
nfdate4[a]=nfarr[i].dj14
nfdate4[b]=nfarr[i].dj24;
nfdate4[c]=nfarr[i].dj34;
nfdate5[a]=nfarr[i].dj15;
nfdate5[b]=nfarr[i].dj25;
nfdate5[c]=nfarr[i].dj35;
}
myChart1.setOption({
xAxis : [{ data: nfx }],
series : [{data: nfdate1 },
{data : nfdate2 },
{data : nfdate3 },
{data: nfdate4 },
{data: nfdate5 },]
}
);
myChart1.hideLoading({});
//加载2
gjdarr=result.results2;
for (var i = 0, l = gjdarr.length; i < l; i++) {
var gjd=gjdarr[i];
gjdx[i]=gjd.mc;
gjddate11[i]={name:gjd.mc,value:gjdarr[i].dj11};
gjddate12[i]={name:gjd.mc,value:gjdarr[i].dj12};
gjddate13[i]={name:gjd.mc,value:gjdarr[i].dj13};
gjddate14[i]={name:gjd.mc,value:gjdarr[i].dj14};
gjddate15[i]={name:gjd.mc,value:gjdarr[i].dj15};
gjddate21[i]={name:gjd.mc,value:gjdarr[i].dj21};
gjddate22[i]={name:gjd.mc,value:gjdarr[i].dj22};
gjddate23[i]={name:gjd.mc,value:gjdarr[i].dj23};
gjddate24[i]={name:gjd.mc,value:gjdarr[i].dj24};
gjddate25[i]={name:gjd.mc,value:gjdarr[i].dj25};
gjddate31[i]={name:gjd.mc,value:gjdarr[i].dj31};
gjddate32[i]={name:gjd.mc,value:gjdarr[i].dj32};
gjddate33[i]={name:gjd.mc,value:gjdarr[i].dj33};
gjddate34[i]={name:gjd.mc,value:gjdarr[i].dj34};
gjddate35[i]={name:gjd.mc,value:gjdarr[i].dj35};
}
//console.log(gjddate24);
myChart2.setOption({

baseOption: {
timeline: {//时间轴
data:nfx

}
},
options: [
{
title : {
text: nfx[0]+'年各市证书等级统计'
},
xAxis : [{ data : gjdx }],
series : [
{data: cbwddate11},
{data: cbwddate12},
{data: cbwddate13},
{data: cbwddate14},
{data: cbwddate15},
]
},
{
title : {
text: nfx[1]+'年各市证书等级统计'
},
xAxis : [{ data : gjdx }],
series : [
{ data: gjddate21},
{ data: gjddate22},
{data: gjddate23},
{data: gjddate24},
{data: gjddate25},
]
},
{
title : {
text: nfx[2]+'年各市证书等级统计'
},
xAxis : [{ data : gjdx }],
series : [
{ data: gjddate31},
{ data: gjddate32},
{data: gjddate33},
{data: gjddate34},
{data: gjddate35},
]
}
]});
myChart2.hideLoading({});
//加载三
cbwdarr=result.results3;
var str='\n';
for (var i = 0, l = cbwdarr.length; i < l; i++) {
var cbwd=cbwdarr[i];
if(i%2!=0){
cbwdy[i]=str+cbwd.mc;
}else{
cbwdy[i]=cbwd.mc;
}

cbwddate11[i]={name:cbwd.mc,value:cbwd.dj11};
cbwddate12[i]={name:cbwd.mc,value:cbwd.dj12};
cbwddate13[i]={name:cbwd.mc,value:cbwd.dj13};
cbwddate14[i]={name:cbwd.mc,value:cbwd.dj14};
cbwddate15[i]={name:cbwd.mc,value:cbwd.dj15};
cbwddate21[i]={name:cbwd.mc,value:cbwd.dj21};
cbwddate22[i]={name:cbwd.mc,value:cbwd.dj22};
cbwddate23[i]={name:cbwd.mc,value:cbwd.dj23};
cbwddate24[i]={name:cbwd.mc,value:cbwd.dj24};
cbwddate25[i]={name:cbwd.mc,value:cbwd.dj25};
cbwddate31[i]={name:cbwd.mc,value:cbwd.dj31};
cbwddate32[i]={name:cbwd.mc,value:cbwd.dj32};
cbwddate33[i]={name:cbwd.mc,value:cbwd.dj33};
cbwddate34[i]={name:cbwd.mc,value:cbwd.dj34};
cbwddate35[i]={name:cbwd.mc,value:cbwd.dj35};
}

myChart3.setOption({

baseOption: {
timeline: {//时间轴
data:nfx

}
},
options: [
{
title : {
text: nfx[0]+'年按工种证书统计'
},
xAxis : [{ data : cbwdy }],
series : [
{data: cbwddate11},
{data: cbwddate12},
{data: cbwddate13},
{data: cbwddate14},
{data: cbwddate15},
]
},
{
title : {
text: nfx[1]+'年按工种证书统计'
},
xAxis : [{ data : cbwdy }],
series : [
{ data: cbwddate21},
{ data: cbwddate22},
{data: cbwddate23},
{data: cbwddate24},
{data: cbwddate25},
]
},
{
title : {
text: nfx[2]+'年按工种证书统计'
},
xAxis : [{ data : cbwdy }],
series : [
{ data: cbwddate31},
{ data: cbwddate32},
{data: cbwddate33},
{data: cbwddate34},
{data: cbwddate35},
]
}
]});

myChart3.hideLoading({});

});

//ext 下拉框
Ext.onReady(function(){
// Ext.Msg.alert('提示',"你好");
var gjdbmStore = [['0','全部'],['1','土建类'],['2','安装类'],['3','幕墙类'],['4','装饰类'],];

var gjds=new Ext.form.ComboBox({
anchor:"100%",
emptyText:"工种类型",
applyTo:"djgjd",
mode:"local",//本地模型
//valueField:"value",
//displayField:"display",
triggerAction:"all",
store:gjdbmStore,
listeners:{
//render:function(cb){
//cb.getStore().load();}
},
//values:'全部',
//applicationkey:'<%=appkey%>'
});

gjds.on('select',function(){
var gjdbmd=gjds.getValue();
var lxmc=Ext.get('djgjd').dom.value;
lxmc=lxmc=='全部'?'':lxmc;
var cbwdarr=jgj.results3;
//清空
cbwdy=new Array();
cbwddate11=new Array();
cbwddate12=new Array();
cbwddate13=new Array();
cbwddate14=new Array();
cbwddate15=new Array();
cbwddate21=new Array();
cbwddate22=new Array();
cbwddate23=new Array();
cbwddate24=new Array();
cbwddate25=new Array();
cbwddate31=new Array();
cbwddate32=new Array();
cbwddate33=new Array();
cbwddate34=new Array();
cbwddate35=new Array();
//重新赋值
var j=0;
for (var i = 0, l = cbwdarr.length; i < l; i++) {

var cbwd=cbwdarr[i];
if(cbwd.gzlx==gjdbmd||gjdbmd=='0'){
j=j+1;
//console.log(j);
cbwdy[j]=cbwd.mc;
cbwddate11[j]={name:cbwd.mc,value:cbwd.dj11};
cbwddate12[j]={name:cbwd.mc,value:cbwd.dj12};
cbwddate13[j]={name:cbwd.mc,value:cbwd.dj13};
cbwddate14[j]={name:cbwd.mc,value:cbwd.dj14};
cbwddate15[j]={name:cbwd.mc,value:cbwd.dj15};
cbwddate21[j]={name:cbwd.mc,value:cbwd.dj21};
cbwddate22[j]={name:cbwd.mc,value:cbwd.dj22};
cbwddate23[j]={name:cbwd.mc,value:cbwd.dj23};
cbwddate24[j]={name:cbwd.mc,value:cbwd.dj24};
cbwddate25[j]={name:cbwd.mc,value:cbwd.dj25};
cbwddate31[j]={name:cbwd.mc,value:cbwd.dj31};
cbwddate32[j]={name:cbwd.mc,value:cbwd.dj32};
cbwddate33[j]={name:cbwd.mc,value:cbwd.dj33};
cbwddate34[j]={name:cbwd.mc,value:cbwd.dj34};
cbwddate35[j]={name:cbwd.mc,value:cbwd.dj35};
}
}
// var heights=parseInt(900*(1-j/cbwdarr.length)+100);
//console.log(heights);
//不行document.getElementById('main3').style.height='10px';
myChart3.clear();
myChart3.setOption(option3);
myChart3.setOption({
options: [
{
title : {text: nfx[0]+'年按工种'+lxmc+'证书统计'},
xAxis : [{ data : cbwdy }],
series : [
{data: cbwddate11},
{data: cbwddate12},
{data: cbwddate13},
{data: cbwddate14},
{data: cbwddate15},
]
},
{
title : {text: nfx[1]+'年按工种'+lxmc+'证书统计'},
xAxis : [{ data : cbwdy }],
series : [
{ data: cbwddate21},
{ data: cbwddate22},
{data: cbwddate23},
{data: cbwddate24},
{data: cbwddate25},
]
},
{
title : {text: nfx[2]+'年按工种'+lxmc+'证书统计'},
xAxis : [{ data : cbwdy }],
series : [
{ data: cbwddate31},
{ data: cbwddate32},
{data: cbwddate33},
{data: cbwddate34},
{data: cbwddate35},
]
}
]});

});

});

//++++++++++++++++++++++++++++++++++++++带年简单柱状图

option1 = {
legend: {//图例组件
right:100,//靠右
//bottom: 'auto',
top:'10%',
data: leds,
selected: {//选中系列
//'2015': true, '2016': true, '2017': false
}
},

toolbox: {
orient: 'vertical',//竖着排
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true,pixelRatio: 3},//分变率大于1
//dataZoom: {show: true,title: {zoom: '区域缩放',back: '区域缩放还原'}}
}
},

title: {
text: '近三年证书等级统计',
//left:'25%'//水平位置
x:"center"
},
// color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : nfx,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value',
axisLabel: {
formatter: '{value}'
},
name: '数量'
}
],
series : [
{
name:'高级技师',
type:'bar',
//barWidth: '60%',
data:nfdate1
},
{
name:'技师',
type:'bar',
// barWidth: '60%',
data:nfdate2
},
{
name:'高级工',
type:'bar',
//barWidth: '60%',
data:nfdate3
},
{
name:'中级工',
type:'bar',
//barWidth: '60%',
data:nfdate4
},
{
name:'初级工',
type:'bar',
//barWidth: '60%',
data:nfdate5
}

]
};
myChart1.showLoading({});
myChart1.setOption(option1);
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++=

// 基于准备好的dom，初始化echarts实例，带时间轴较复杂柱状图

option2 = {
baseOption: {
timeline: {//时间轴
// y: 0,
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: false,//自动播放
currentIndex: 2,
playInterval: 1000,
// controlStyle: {
// position: 'left'
// },
data:nfx

},
title : {
text: '进三年各市证书等级统计',
x:"center",
//subtext: '数据来自国家统计局'//副标题文本
},
toolbox: {
orient: 'vertical',//竖着排
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true,pixelRatio: 3},//分变率大于1
//dataZoom: {show: true,title: {zoom: '区域缩放',back: '区域缩放还原'}}
/*myTool1: {
show: true,
title: '切换为市',
icon: 'img:resources\images\log.jpg',
onclick: function (){
var cbwdarr=jgj.results3;
cbwdy=new Array();cbwddate1=new Array();
cbwddate2=new Array();cbwddate3=new Array();
for (var i = 0,j=0, l = cbwdarr.length; i < l; i++) {

var cbwd=cbwdarr[i];
if(cbwd.gjdbm=='0101'){
cbwdy[j]=cbwd.mc;
cbwddate1[j]={name:cbwd.mc,value:cbwd.hgl1};
cbwddate2[j]={name:cbwd.mc,value:cbwd.hgl2};
cbwddate3[j]={name:cbwd.mc,value:cbwd.hgl3};
j++;
}

}

myChart3.setOption({

yAxis : [{ data : cbwdy }],
series : [
{name:nfx[0], data: cbwddate1},
{name:nfx[1], data: cbwddate2},
{name:nfx[2], data: cbwddate3},
]
});
}
}*/
}
},

tooltip: {//提示框组件
},
legend: {//图例组件
right:100,//靠右
top:'10%',
bottom: 'auto',
data:leds,
selected: {//选中系列
//'2015': true, '2016': true, '2017': false
}
},
calculable : true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
grid: {
//x:40,
top: 80, //组件离容器上侧的距离。
bottom: 100,//组件离容器下侧的距离。
tooltip: {//本坐标系特定的 tooltip 设定。
trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer: {//坐标轴指示器配置项。
type: 'shadow',//line' 直线指示器'shadow' 阴影指示器
//'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。

label: {
show: false,//是否显示文本标签
// formatter: function (params) {//文本标签文字的格式化器。
//如果为 string，可以是例如：
//formatter: 'some text {value} some text，其中 {value} 会被自动替换为轴的值。
//如果为 function，可以是例如：参数：{Object} params: 含有：
//{Object} params.value: 轴当前值，如果 axis.type 为 'category' 时，其值为 axis.data 里的数值。如果 axis.type 为 'time'，其值为时间戳。
// return params.value.replace('\n', '');
// }
}
}
}
},
xAxis: [
{
'type':'category',
'axisLabel':{'interval':0},//刻度间隔
'data':gjdx,
splitLine: {show: false},//坐标轴在 grid 区域中的分隔线。
axisLabel :{
interval:0,

// rotate:-30
}

}
],
yAxis: [
{
type: 'value',
name: '人数',
axisLabel: {
formatter: '{value}'
}
}
],
series: [{name:"高级技师",type: 'bar'},
{name:"技师",type: 'bar'},
{name:"高级工",type: 'bar'},
{name:"中级工",type: 'bar'},
{name:"初级工",type: 'bar'}]
}
};

// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option2);
myChart2.showLoading({});


// 指定图表的配置项和数据

option3 = {
baseOption: {
timeline: {//时间轴
// y: 0,
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: false,//自动播放
currentIndex: 2,
playInterval: 1000,
// controlStyle: {
// position: 'left'
// },
data:nfx

},
title : {
text: '进三年证书等级统计',
x:'center',
//subtext: '数据来自国家统计局'//副标题文本
},
toolbox: {
orient: 'vertical',//竖着排
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true,pixelRatio: 3},//分变率大于1
//dataZoom: {show: true,title: {zoom: '区域缩放',back: '区域缩放还原'}}
/*myTool1: {
show: true,
title: '切换为市',
icon: 'img:resources\images\log.jpg',
onclick: function (){
var cbwdarr=jgj.results3;
cbwdy=new Array();cbwddate1=new Array();
cbwddate2=new Array();cbwddate3=new Array();
for (var i = 0,j=0, l = cbwdarr.length; i < l; i++) {

var cbwd=cbwdarr[i];
if(cbwd.gjdbm=='0101'){
cbwdy[j]=cbwd.mc;
cbwddate1[j]={name:cbwd.mc,value:cbwd.hgl1};
cbwddate2[j]={name:cbwd.mc,value:cbwd.hgl2};
cbwddate3[j]={name:cbwd.mc,value:cbwd.hgl3};
j++;
}

}

myChart3.setOption({

yAxis : [{ data : cbwdy }],
series : [
{name:nfx[0], data: cbwddate1},
{name:nfx[1], data: cbwddate2},
{name:nfx[2], data: cbwddate3},
]
});
}
}*/
}
},

tooltip: {//提示框组件
},
legend: {//图例组件
right:100,//靠右
top:"10%",
bottom: 'auto',
data:leds,
selected: {//选中系列
//'2015': true, '2016': true, '2017': false
}
},
calculable : true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
grid: {
//x:40,
top: 80, //组件离容器上侧的距离。
bottom: 100,//组件离容器下侧的距离。
tooltip: {//本坐标系特定的 tooltip 设定。
trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer: {//坐标轴指示器配置项。
type: 'shadow',//line' 直线指示器'shadow' 阴影指示器
//'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。

label: {
show: false,//是否显示文本标签
// formatter: function (params) {//文本标签文字的格式化器。
//如果为 string，可以是例如：
//formatter: 'some text {value} some text，其中 {value} 会被自动替换为轴的值。
//如果为 function，可以是例如：参数：{Object} params: 含有：
//{Object} params.value: 轴当前值，如果 axis.type 为 'category' 时，其值为 axis.data 里的数值。如果 axis.type 为 'time'，其值为时间戳。
// return params.value.replace('\n', '');
// }
}
}
}
},
xAxis: [
{
'type':'category',
'axisLabel':{'interval':0},//刻度间隔
'data':cbwdy,
splitLine: {show: false},//坐标轴在 grid 区域中的分隔线。
axisLabel :{
interval:0,

// rotate:-30
}

}
],
yAxis: [
{
type: 'value',
name: '人数',
axisLabel: {
formatter: '{value}'
}
}
],
series: [{name:"高级技师",type: 'bar'},
{name:"技师",type: 'bar'},
{name:"高级工",type: 'bar'},
{name:"中级工",type: 'bar'},
{name:"初级工",type: 'bar'}]
}
};
myChart3.showLoading({});
// 使用刚指定的配置项和数据显示图表。
myChart3.setOption(option3);
/*myChart3.on('click', function (params) {
myChart3.dispatchAction({
type: 'dataZoom',
startValue: cbwdy[4],
endValue: cbwdy[7]
});
});*/


</script>

0 0