Echarts(二、柱状图（各参数详细描述）)
1.jsp页面
<body>
<div class="menutab">
<ul>
<li id="zldb">质量等别监测预警li>
ul>
div>
<div class="section hide">
<div class="byl-bot">
<div class="t">更新后各等别基本农田占基本农田总面积比例div>
<div class="byl-chart">
<div class="totalProportion" id="qualityLevelchart" style="width:100%;height:1000px">div>
div>
div>
div>
body>2.js文件
$(document).on("click","#zldb",function(){
//这部分表格处理数据暂时无用
$('#qualityLevel').datagrid({
url:null,
pagination:false,
nowrap:false,
fitColumns:true,
fit:false,
rownumbers:true,
height:$(window).height()-130,
width:'100%',
columns:[[
{field:'等别',title:'等别',width:70,align:'center'},
{field:'GXQMJ',title:'更新前面积',width:70,align:'center'},
{field:'GXHMJ',title:'更新后面积',width:70,align:'center'},
{field:'CYZ',title:'差异值',width:70,align:'center',
formatter:function(value,rowData,rowIndex){
var val=rowData.GXHMJ-rowData.GXQMJ;
return val.toFixed(2);
}
},
{field:'BHQS',title:'变化趋势',width:70,align:'center',
formatter:function(value,rowData,rowIndex){
var val=rowData.GXQMJ-rowData.GXHMJ;
if(val>=0){
return '
';
}else{
return '
';
}
}
}
]],
data:ZLDB,
});
//处理数据为之后的chart展示
var val_14=(ZLDB.rows[14].GXHMJ/99874.46*100).toString();
val_14= val_14.substring(0,val_14.indexOf(".")+3);
var val_13=(ZLDB.rows[13].GXHMJ/99874.46*100).toString();
val_13= val_13.substring(0,val_13.indexOf(".")+3);
var val_12=(ZLDB.rows[12].GXHMJ/99874.46*100).toString();
val_12= val_12.substring(0,val_12.indexOf(".")+3);
var val_11=(ZLDB.rows[11].GXHMJ/99874.46*100).toString();
val_11= val_11.substring(0,val_11.indexOf(".")+3);
var val_10=(ZLDB.rows[10].GXHMJ/99874.46*100).toString();
val_10= val_10.substring(0,val_10.indexOf(".")+3);
var val_9=(ZLDB.rows[9].GXHMJ/99874.46*100).toString();
val_9= val_9.substring(0,val_9.indexOf(".")+3);
var val_8=(ZLDB.rows[8].GXHMJ/99874.46*100).toString();
val_8= val_8.substring(0,val_8.indexOf(".")+3);
var val_7=(ZLDB.rows[7].GXHMJ/99874.46*100).toString();
val_7= val_7.substring(0,val_7.indexOf(".")+3);
var val_6=(ZLDB.rows[6].GXHMJ/99874.46*100).toString();
val_6= val_6.substring(0,val_6.indexOf(".")+3);
var val_5=(ZLDB.rows[5].GXHMJ/99874.46*100).toString();
val_5= val_5.substring(0,val_5.indexOf(".")+3);
var val_4=(ZLDB.rows[4].GXHMJ/99874.46*100).toString();
val_4= val_4.substring(0,val_4.indexOf(".")+3);
var val_3=(ZLDB.rows[3].GXHMJ/99874.46*100).toString();
val_3= val_3.substring(0,val_3.indexOf(".")+3);
var val_2=(ZLDB.rows[2].GXHMJ/99874.46*100).toString();
val_2= val_2.substring(0,val_2.indexOf(".")+3);
var val_1=(ZLDB.rows[1].GXHMJ/99874.46*100).toString();
val_1= val_1.substring(0,val_1.indexOf(".")+3);
var val_0=(ZLDB.rows[0].GXHMJ/99874.46*100).toString();
val_0= val_0.substring(0,val_0.indexOf(".")+3);
function test(){
alert("这是link");
}
var chartDate = [val_14,val_13,val_12,val_11,val_10];
var chartDate2 = [val_9,val_8,val_7,val_6,val_5];
var chartDate3 = [val_4,val_3,val_2,val_1,val_0];
// 初始化图表标签
var myChart = echarts.init(document.getElementById('qualityLevelchart'));
var options={
title:{
show: true,
text: '测试',
link: ' ',
target: 'self',
textStyle: {
padding: 5,
color:'red',//也可以设置字体，字号等
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 18,
z: 2,
backgroundColor: 'transparent',//默认透明
},
subtext: '这是副标题',
itemGap: 10,//控制主副标题之间的距离
sublink: '',
subtarget: 'blank',
padding: 5,
//left: 'center',
//top: 'auto',
//right: 'auto',
//bottom: 'auto',
backgroundColor: 'transparent',//'rgb(128, 60, 128)',//默认透明
},
//定义一个标题
legend:{
type:'scroll',//scroll,可以滚动翻页的图例，一般在图例较多时使用，默认plain
itemGap: 10,//图例之间的距离
// data:['更新后各等别基本农田占基本农田总面积比例'],
x:'center',//设置X就是在以x轴为参照，y则以y为参照
orient: 'vertical',//'horizontal',//vertical,图例列表布局方向
align:'auto',//对齐方式
selectedMode: true,//点击图例，显示状态
inactiveColor: '#ccc',//'green'//图例关闭时的颜色
selected: {
// 选中'系列1'
'系列1': true,
// 不选中'系列2'
'系列2': false,
},
//left: 'auto',
// top: 'auto',
//right: 'auto',
// bottom: 'auto',
width: 'auto',
height: 'auto',
textStyle: {
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 12,
backgroundColor: 'transparent',
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 0,
padding: 0,
},
//backgroundColor: 'pink',//背景色
data: [{
name: '2015更新后各等别基本农田占基本农田总面积比例',
//图例项的 icon ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
//也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。
//可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，
//不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。
//路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
// 强制设置图形为圆。
// icon: 'diamond',
// 设置文本为红色
textStyle: {
color: 'red',
},
},{
name: '2016更新后各等别基本农田占基本农田总面积比例',
// 设置文本为红色
textStyle: {
color: 'pink',
},
},{
name: '2017更新后各等别基本农田占基本农田总面积比例',
// 设置文本为红色
textStyle: {
color: 'black',
},
}],
},
//区域选中组件
brush: {
//'rect'：开启矩形选框选择功能。'polygon'：开启任意形状选框选择功能。'lineX'：开启横向选择功能。
//'lineY'：开启纵向选择功能。'keep'：切换『单选』和『多选』模式。后者可支持同时画多个选框。前者支持单击清除所有选框。'clear'：清空所有选框。
toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
brushStyle: {
borderWidth: 2,
color: 'rgba(0,0,0,0.2)',
borderColor: 'rgba(0,0,0,0.5)',
},
xAxisIndex: 0
},
//工具栏组件，一个用导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
toolbox: {
show:true,
orient:'horizontal',//布局方向vertical，'horizontal',
itemSize: 15,//大小
itemGap: 10,
showTitle: false,//是否展示title
feature: {
//保存图片
saveAsImage: {
type: 'png',
name: '保存图片',
backgroundColor: 'auto',
excludeComponents: ['toolbox'],
show: true,
title: '保存为图片',
//icon: ...,
//iconStyle: {...},
pixelRatio: 1,
},
//重置
restore: {
show: true,
title: '还原',
//icon: ...,
//iconStyle: {...},
},
//数据视图
dataView: {
show: true,
title: '数据视图',
//icon: ...,
//iconStyle: {...},
readOnly: false,
lang: ['数据视图', '关闭', '刷新'],
backgroundColor: '#fff',
textareaColor: '#fff',
textareaBorderColor: '#333',
textColor: '#000',
buttonColor: '#c23531',
buttonTextColor: '#fff',
},
//动态类型切换
magicType: {
type: ['line', 'bar', 'stack', 'tiled']
}
}
},
//提示框组件
tooltip: {
show: true,
trigger: 'item',
//axisPointer: {...},
showContent: true,
alwaysShowContent: false,
triggerOn: 'mousemove|click',
showDelay: 0,
hideDelay: 100,
enterable: false,
confine: false,
transitionDuration: 0.4,
//position: ...,
//formatter: ...,
backgroundColor: 'green',//'rgba(50,50,50,0.7)',
borderColor: '#333',
borderWidth: 0,
padding: 5,
//textStyle: {...},
//extraCssText: ...,
},
//坐标系设置
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
//X轴设置
yAxis:{
show: true,
gridIndex: 0,//x轴所在的坐标系,默认第一个坐标系
position:'bottom',//X轴位置bottom,top
offset: 0,//默认位置的偏移距离，在有多个x轴时
type: 'value',//'category',value//
name: '所占比例',
inverse: false,//坐标轴是否反向
//boundaryGap: ['20%', '20%'],
//坐标轴名称设置
triggerEvent: false,//坐标轴是否触发事件，默认不触发，
nameLocation: 'center',//start,center坐标名称
nameTextStyle: {
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 12,
align:'center',
verticalAlign: 'top',//文字垂直对齐方式，默认自动top,middle,bottom。
},
nameGap: 15,//坐标轴名称与轴线之间的距离
nameRotate: 45,//坐标轴旋转角度
//坐标轴设置
axisLine: {
show: true,
onZero: true,
//onZeroAxisIndex: ...,
symbol: ['none','arrow'],//默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']。
symbolSize: [30, 50],
//轴线设置
lineStyle: {
color: 'blue',
width: 3,
type: 'solid',//'solid',dashed,dotted
//shadowBlur: ...,
//shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
//opacity: ...,
},
},
//坐标轴刻度设置
axisTick: {
show: true,
alignWithLabel: false,
interval: 'auto',
inside: false,//坐标轴刻度是从内还是从无外
length: 5,//刻度长度
lineStyle: {
color: 'blue',
width: 3,
type: 'solid',
},
},
//刻度标签设置
axisLabel: {
show: true,
interval: 'auto',
//formatter: '{value}%',
interval: 'auto',
inside: false,//刻度标签朝内还是朝外
rotate: 45,//旋转角度-90 90
margin: 35,//刻度标签与轴线之间的距离。
formatter:function(value,index){return value+"%"},
showMinLabel: null,
showMaxLabel: null,
color: 'red',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 12,
align: 'bottom',//top,middle,bottom
// verticalAlign: ...,
// lineHeight: ...,
backgroundColor: 'transparent',
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 0,
padding: 0,
shadowColor: 'transparent',
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
// width: ...,
// height: ...,
textBorderColor: 'transparent',
textBorderWidth: 0,
textShadowColor: 'transparent',
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
}
},
xAxis:{
position:'left',//坐标轴显示位置left,right
type : 'category',//类目轴category，数据轴value
name: '等级分类',
nameLocation: 'end',
//nameTextStyle: {...},/颜色字体等设置
nameGap: 15,
//刻度标签设置
axisLabel: {
show: true,
interval: 'auto',
//formatter: '{value}%',
interval: 'auto',
inside: false,//刻度标签朝内还是朝外
rotate: -90,//旋转角度-90 90
margin: 15,//刻度标签与轴线之间的距离。
// formatter:function(value,index){return value+"%"},
showMinLabel: null,
showMaxLabel: null,
color: 'green',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 12,
align: 'bottom',//top,middle,bottom
},
data:['五等','四等','三等','二等',
{
value: '一等',// 突出十五
textStyle: {
// fontSize: 20,
color: 'red',
}
} ]
},
//name=legend.data的时候才能显示图例
//数据设置
series:[{
"name":'2015更新后各等别基本农田占基本农田总面积比例',
"type":'bar',
"data":chartDate,
// stack:'测试',//分类标志，将一致的在一个柱子上
barWidth:'20',
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
},
//标志线
/*markLine : {
lineStyle: {
normal: {
type: 'dashed'
}
},
data : [
[{type : 'min'}, {type : 'max'}]
]
},*/
itemStyle: {
normal: {
label: {
show: true,
position: 'top',//数据在中间显示
formatter:'{c}%'//百分比显示
}
}
}
},{
"name":'2016更新后各等别基本农田占基本农田总面积比例',
"type":'bar',//line,bar,pie,lines,gauge,funnel漏斗图
"data":chartDate2,
// stack:'测试',
barWidth:'30',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside',//数据在中间显示
formatter:'{c}%'//百分比显示
}
}
}
},{
"name":'2017更新后各等别基本农田占基本农田总面积比例',
"type":'bar',
"data":chartDate3,
barWidth:'25',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',//数据在中间显示
formatter:'{c}%'//百分比显示
}
}
}
}],
color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
backgroundColor:'#ccc',//设置背景色
};
myChart.setOption(options);
myChart.on('brushselected', renderBrushed);
myChart.on('brushselected', renderBrushed);
//鼠标事件click:,dblclick，mousedown, mouseup,mouseover,mouseout,globalout,
myChart.on('click', function (params) {
alert(params.data+'---'+params.name);
});
function renderBrushed(params){
console.log(params);
}
});