1 饼状图
示例图
前台代码html：
<div>
<div id="yhzhfx"></div>
</div>
前台代码js:
var myChart = echarts.init(document.getElementById('yhzhfx'));
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
myTool1: {
show: true,
title: '导出',
onclick: function (){
alert('1')
}
},
saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'',
type:'pie',
selectedMode: 'single',
radius : [0, 30],
x: '20%',
width: '30%',
funnelAlign: 'right',
max: 1548,
itemStyle : {
normal : {
label : {
position : 'inner'
},
labelLine : {
show : false
}
}
},
color:['#1FC2FF','#F7C754'],
data:[]
},
{
name:'',
type:'pie',
radius : [40, 55],
x: '30%',
width: '20%',
funnelAlign: 'left',
max: 1048,
color:['#1FC2FF','#F7C754','#4D7FFF','#AA78FF','#05D9B3','#FF845E'],
data:[]
},
{
name:'',
type:'pie',
radius : [70, 85],
x: '30%',
width: '20%',
funnelAlign: 'left',
max: 1048,
color:['#4D7FFF','#AA78FF','#FF845E','#05D9B3','#1FC2FF'],
data:[
]
}
]
};
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
$.ajax({
//这里需要三个res数组来装三个饼状环数据，在data使用function()进行遍历后台传来的值装入每个res数组中
url: "xxx/yhpczlWtyhzhfx",
success: function(data){
var res=[];
var item=data.list1;
var res1=[];
var item1=data.list2;
var res2=[];
var item2=data.list3;
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
myTool1: {
show: true,
title: '导出',
onclick: function (){
alert('1')
}
},
saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'',
type:'pie',
selectedMode: 'single',
radius : [0, 30],
x: '20%',
width: '30%',
funnelAlign: 'right',
max: 1548,
itemStyle : {
normal : {
label : {
position : 'inner'
},
labelLine : {
show : false
}
}
},
color:['#1FC2FF','#F7C754'],
data:function () {
for(var i=0;i<item.length;i++){
res.push({
name:item[i].name,
value:item[i].value
});
}
return res;
}()
},
{
name:'',
type:'pie',
radius : [40, 55],
x: '30%',
width: '20%',
funnelAlign: 'left',
max: 1048,
color:['#1FC2FF','#F7C754','#4D7FFF','#AA78FF','#05D9B3','#FF845E'],
data:function () {
for(var i=0;i<item1.length;i++){
res1.push({
name:item1[i].name,
value:item1[i].value
});
}
return res1;
}()
},
{
name:'',
type:'pie',
radius : [70, 85],
x: '30%',
width: '20%',
funnelAlign: 'left',
max: 1048,
color:['#4D7FFF','#AA78FF','#FF845E','#05D9B3','#1FC2FF'],
data:function () {
for(var i=0;i<item2.length;i++){
res2.push({
name:item2[i].name,
value:item2[i].value
});
}
return res2;
}()
}
]
})
}});
数据库部分：
1 环：
2 环：
3 环：
java后台Sql方法：
<select id="yhpczlWtyhzhfx_1List" resultType="map">
SELECT
*
FROM
yhpczl_wtyhzhfx_1
</select>
<select id="yhpczlWtyhzhfx_2List" resultType="map">
SELECT
*
FROM
yhpczl_wtyhzhfx_2
</select>
<select id="yhpczlWtyhzhfx_3List" resultType="map">
SELECT
*
FROM
yhpczl_wtyhzhfx_3
</select>
java后台Controller：
public JSONObject yhpczlWtyhzhfx(){
JSONObject jsonObject = new JSONObject();
List<YhpczlWtyhzhfx_1> list1 = iThreeInOneInfoService.yhpczlWtyhzhfx_1List();
List<YhpczlWtyhzhfx_2> list2 = iThreeInOneInfoService.yhpczlWtyhzhfx_2List();
List<YhpczlWtyhzhfx_3> list3 = iThreeInOneInfoService.yhpczlWtyhzhfx_3List();
jsonObject.put("list1",list1);
jsonObject.put("list2",list2);
jsonObject.put("list3",list3);
return jsonObject;
}
2 柱状图
示例图：
前台html代码：
<div>
<div id="aqfxqdzhfx"></div>
</div>
前台js代码：
var myChart2 = echarts.init(document.getElementById('aqfxqdzhfx'));
option2 = {
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
/*restore : {show: true},*/
myTool1: {
show: true,
title: '导出',
onclick: function (){
alert('1')
}
},
saveAsImage : {show: true}
}
},
calculable : true,
legend: {
/*x: 'left',
left: 30,*/
top:5,
color:['#FF845E','#F7C754','#AA78FF','#1FC2FF','#1FC2FF'],
data:['检查次数-计划','检查清单数-计划','检查次数-实际','排查清单数-实际','发现隐患数']
},
xAxis : [
{
type : 'category',
data : ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
name : '排查次数',
axisLabel : {
formatter: '{value} 次'
}
},
{
type : 'value',
name : '排查清单数',
axisLabel : {
formatter: '{value} 个'
}
}
],
series : [
{
name:'检查次数-计划',
type:'bar',
color:['#FF845E'],
data:[]
},
{
name:'检查清单数-计划',
type:'bar',
color:['#F7C754'],
data:[]
},
{
name:'检查次数-实际',
type:'bar',
color:['#AA78FF'],
data:[]
},
{
name:'排查清单数-实际',
type:'bar',
yAxisIndex: 1,
color:['#1FC2FF'],
data:[]
},
{
name:'发现隐患数',
type:'line',
color:['#05D9B3'],
data:[]
}
]
};
myChart2.showLoading(); //数据加载完之前先显示一段简单的loading动画
$.ajax({
url: "xxxx/yhpczlAqfxqdzhfx",
success: function(data){
var res1 = [];
var res2 = [];
var res3 = [];
var res4 = [];
var res5 = [];
var item=data.list;
myChart2.hideLoading(); //隐藏加载动画
myChart2.setOption({ //加载数据图表
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
/*restore : {show: true},*/
myTool1: {
show: true,
title: '导出',
onclick: function (){
alert('1')
}
},
saveAsImage : {show: true}
}
},
calculable : true,
legend: {
/*x: 'left',
left: 30,*/
top:5,
color:['#FF845E','#F7C754','#AA78FF','#1FC2FF','#1FC2FF'],
data:['检查次数-计划','检查清单数-计划','检查次数-实际','排查清单数-实际','发现隐患数']
},
xAxis : [
{
type : 'category',
data : ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
name : '排查次数',
axisLabel : {
formatter: '{value} 次'
}
},
{
type : 'value',
name : '排查清单数',
axisLabel : {
formatter: '{value} 个'
}
}
],
series : [
{
name:'检查次数-计划',
type:'bar',
color:['#FF845E'],
data:function () {
for(var i=0;i<item.length;i++){
res1.push(item[i].value1);
}
return res1;
}()
},
{
name:'检查清单数-计划',
type:'bar',
color:['#F7C754'],
data:function () {
for(var i=0;i<item.length;i++){
res2.push(item[i].value2);
}
return res2;
}()
},
{
name:'检查次数-实际',
type:'bar',
color:['#AA78FF'],
data:function () {
for(var i=0;i<item.length;i++){
res3.push(item[i].value3);
}
return res3;
}()
},
{
name:'排查清单数-实际',
type:'bar',
yAxisIndex: 1,
color:['#1FC2FF'],
data:function () {
for(var i=0;i<item.length;i++){
res4.push(item[i].value4);
}
return res4;
}()
},
{
name:'发现隐患数',
type:'line',
color:['#05D9B3'],
data:function () {
for(var i=0;i<item.length;i++){
res5.push(item[i].value5);
}
return res5;
}()
}
]
})
}});
数据库部分：
后台Sql代码：
<select id="yhpczlAqfxqdzhfxList" resultType="map">
SELECT
*
FROM
yhpczl_aqfxqdzhfx
</select>
后台Contorller代码:
public JSONObject yhpczlAqfxqdzhfx(){
JSONObject jsonObject = new JSONObject();
List<YhpczlAqfxqdzhfx> list = iThreeInOneInfoService.yhpczlAqfxqdzhfxList();
jsonObject.put("list",list);
return jsonObject;
}
3 折线图：
示例图：
前台html代码：
<div>
<div id="wtyhqsfx"></div>
</div>
前台js代码：
var myChart3 = echarts.init(document.getElementById('wtyhqsfx'));
option3 = {
tooltip : {
trigger: 'axis'
},
legend: {
/*x: 'left',
left: 50,*/
top:10,
data:['2018','2019']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
myTool1: {
show: true,
title: '导出',
onclick: function (){
alert('1')
}
},
/*restore : {show: true},*/
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'2018',
type:'line',
stack: '隐患个数',
color:['#1FC2FF'],
data:[]
},
{
name:'2019',
type:'line',
stack: '隐患个数',
color:['#F7C754'],
data:[]
}
]
};
myChart3.showLoading(); //数据加载完之前先显示一段简单的loading动画
$.ajax({
url: "xxx/yhpczlWtyhqsfx",
success: function(data){
var res1 = [];
var res = [];
var item=data.list;
myChart3.hideLoading(); //隐藏加载动画
myChart3.setOption({ //加载数据图表
tooltip : {
trigger: 'axis'
},
legend: {
/*x: 'left',
left: 50,*/
top:10,
data:['2018','2019']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
myTool1: {
show: true,
title: '导出',
onclick: function (){
alert('1')
}
},
/*restore : {show: true},*/
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'2018',
type:'line',
stack: '隐患个数',
color:['#1FC2FF'],
data:function () {
for(var i=0;i<item.length;i++){
res.push(item[i].value1);
}
return res;
}()
},
{
name:'2019',
type:'line',
stack: '隐患个数',
color:['#F7C754'],
data:function () {
for(var i=0;i<item.length;i++){
res1.push(item[i].value2);
}
return res1;
}()
}
]
})
}});
数据库部分：
后台Sql代码：
<select id="yhpczlWtyhqsfxList" resultType="map">
SELECT
*
FROM
yhpczl_wtyhqsfx
</select>
后台Controller:
public JSONObject yhpczlWtyhqsfx(){
JSONObject jsonObject = new JSONObject();
List<YhpczlWtyhqsfx> list = iThreeInOneInfoService.yhpczlWtyhqsfxList();
jsonObject.put("list",list);
return jsonObject;
}
以上三种Echarts图都是在data部分进行将后台获取的数据添加进去。