echarts的使用与代码编写
引入js
柱状图
前台
SELECT COUNT(a.event_source) AS phenomenon,a.event_source FROM (
SELECT rush.* FROM pr_rush_repair rush WHERE SUBSTRING(rush.`check_date`,1,4)
= DATE_FORMAT(NOW(), '%Y')
) a GROUP BY a.event_source
public Map showRushRepairList(RushRepairVO vo)
{
Map maps = new HashMap();
List eventCauselist = new ArrayList();
List Numlist = new ArrayList();
List rushCount = rushMapper.showRushRepairList(vo);
for (RushRepairVO rushRepairVO : rushCount) {
String counts = rushRepairVO.getPhenomenon();
String eventCause = rushRepairVO.getEventSource();
String eventCauseName = compareDic(eventCause);
eventCauselist.add(eventCauseName);
Numlist.add(counts);
}
maps.put("eventCauselist", eventCauselist);
maps.put("Numlist", Numlist);
return maps;
}
private String compareDic(String type) {
String eventCauseName= "";
if(null!=type&&type.length()>0) {
switch(type)
{
case "1":
eventCauseName = "腐蚀因素";
break;
case "2":
eventCauseName = "外力因素";
break;
case "3":
eventCauseName = "设备因素";
break;
case "4":
eventCauseName = "材料建筑因素";
break;
case "5":
eventCauseName = "自然因素";
break;
}
}
return eventCauseName;
}
后台
应急抢修
$(function(){
initData();
});
function initData(){
rush();
leak();
pipe();
produce();
gas();
}
function rush(){
debugger;
var myChart = echarts.init(document.getElementById('demo1'));
$.ajax({
type : "post",
url : CONTEXT_PATH + '/cusviews/rush/showRushRepair',
data : {},
success : function(data){
debugger;
var result = jQuery.parseJSON(data);
renderNation(result);
}
});
function renderNation(_data){
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: "{b}：{c}"
},
grid: {
top: '9%',
left: '3%',
right: '10%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
"axisLabel": {
"interval": 0,
formatter: '{value}',
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#73c4fc'
},
interval: 0
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: _data.eventCauselist
},
series: [{
name: '',
type: 'bar',
barWidth: 9,
itemStyle: {
//通常情况下每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
normal:{
color: function (params){
var colorList = ["#17c699","#f4c533","#cf145f","#92f5dc","#02b4d3"];
return colorList[params.dataIndex];
},
label: {
show: true,
// position: 'inside'
position: 'right'
}
},
//鼠标悬停时：
emphasis: {
shadowBlur: 8,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: _data.Numlist
}]
};
myChart.setOption(option);
}
}
柱状图倾斜与百分号
SELECT COUNT(a.event_cause) AS phenomenon,a.event_cause FROM (
SELECT rush.* FROM pr_rush_repair rush WHERE SUBSTRING(rush.`check_date`,1,4)
= DATE_FORMAT(NOW(), '%Y')
) a GROUP BY a.event_cause
public Map showPipeList(PipeVO vo)
{
Map maps = new HashMap();
List yearCovlist = new ArrayList();
List orglist = new ArrayList();
String[] orgString = {"001001","001002","001003","001004","001005","001006"};
List rushCount = pipeMapper.showPipeList(vo);
for (PipeVO pipeVO : rushCount) {
BigDecimal yearCov = new BigDecimal("0");
String counts = pipeVO.getRunUser();
String orgs = pipeVO.getDepOrder();
if(!Arrays.asList(orgString).contains(orgs)) {
continue;
}
String dayCov = pipeVO.getDayCovRate();
String eventCauseName = compareDic(orgs);
if(""!=eventCauseName&&(!eventCauseName.equals(""))) {
if(null!=counts&&null!=dayCov) {
if(counts.equals("0")) {
continue;
}
BigDecimal num1 = new BigDecimal(counts);
BigDecimal num2 = new BigDecimal(dayCov);
yearCov = num2.divide(num1,2, BigDecimal.ROUND_HALF_UP);
}
}
yearCovlist.add(yearCov.toString());
orglist.add(eventCauseName);
}
maps.put("yearCovlist", yearCovlist);
maps.put("orglist", orglist);
return maps;
}function pipe(){
// demo2
var myChart2 = echarts.init(document.getElementById('demo2'));
$.ajax({
type : "post",
url : CONTEXT_PATH + '/cusviews/pipe/showPipeList',
data : {},
success : function(data){
debugger;
var result = jQuery.parseJSON(data);
renderNation(result);
}
});
function renderNation(_data){
debugger;
var option2 = {
legend: {
data: ['覆盖率'],
x: 'center',
y: '2%',
// left: '1%',
// right: '1%',
itemWidth: 12,
itemHeight: 12,
textStyle:{ //图例文字的样式
color:'73c4fc',
fontSize:12
},
},
title: {
// text: '总计：1000公里',
},
grid: {
top: '15%',
left: '3%',
right: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
textStyle: {
color: '#73c4fc'
},
interval: 0,
/*rotate:40*/
// rotate: -45
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLine:{
show: false,
lineStyle:{color: '#5f6a90'}
},
data: _data.orglist
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
formatter: '{value} %',
textStyle: {color: '#73c4fc'},
interval: 0,
},
splitLine: {
show: false,
lineStyle: {color: '#424c6e'},
}
},
series: [{
data: _data.yearCovlist,
type: 'bar',
name: '覆盖率',
label: {
normal: {
show: true,
position: 'top',
formatter: function (params) {
debugger;
return params.value+ '%';
}
}
},
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#48d6fc'},
{offset: 1, color: '#2774c7'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2774c7'},
{offset: 1, color: '#48d6fc'}
]
)
}
},
}
]
};
myChart2.setOption(option2);
}
}
饼图展示
function gas(){
// demo3
var myChart3 = echarts.init(document.getElementById('demo3'));
var option3 = {
tooltip : {
trigger: 'item',
formatter: "{b}{c} ({d}%)"
// formatter: "{a} {b} : {c} ({d}%)"
},
legend: {
data: ['带气接切线','启箱通气','更换设备','加拆盲板','户内立管停气'],
x: 'center',
bottom: '3%',
// left: '1%',
// right: '1%',
itemWidth: 12,
itemHeight: 12,
textStyle:{ //图例文字的样式
color:'73c4fc',
fontSize:12
},
},
series : [
{
name: '',
type: 'pie',
// radius: ['48%', '65%'],
radius: '55%',
center: ['50%', '50%'],
//配置样式
itemStyle: {
//通常情况下每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
normal:{
color: function (params){
var colorList = ['#49d4fb','#894cc7','#40d798','#e4e226','#fc4b79','#fc4b79','#f9be95','#e393fd'];
return colorList[params.dataIndex];
},
label: {
show: true,
// position: 'inside'
formatter: "{b} \n {c} ({d}%)",
textStyle: {
fontSize: '13',
lineHeight: '360'
}
}
},
//鼠标悬停时：
emphasis: {
shadowBlur: 8,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
// data:[
// {value:335, name:'HS660',itemStyle: {normal:{color: '#ed7d31'}}},
// {value:310, name:'3110嗅敏仪',itemStyle: {normal:{color: '#ffc000'}}},
// {value:234, name:'激光检测车',itemStyle: {normal:{color: '#70ad47'}}},
// {value:135, name:'PCM+',itemStyle: {normal:{color: '#bc5f20'}}},
// {value:1548, name:'焊机',itemStyle: {normal:{color: '#8dd411'}}},
// {value:1548, name:'拍片机',itemStyle: {normal:{color: '#73c4fc'}}},
// {value:1548, name:'RTK',itemStyle: {normal:{color: '#f9be95'}}},
// {value:1548, name:'亚米级手机',itemStyle: {normal:{color: '#e393fd'}}}
// ]
data:[
{value:335, name:'带气接切线'},
{value:310, name:'启箱通气'},
{value:234, name:'更换设备'},
{value:135, name:'加拆盲板'},
{value:1548, name:'户内立管停气'}
]
}
]
};
myChart3.setOption(option3);
}
public Map showProduceList(ProduceVO vo)
{
Map maps = new HashMap();
List workTypelist = new ArrayList();
List Numlist = new ArrayList();
String[] orgString = {"1","2","3","4","5"};
List proCount = produceMapper.showProduceList(vo);
for (ProduceVO produceVO : proCount) {
String counts = produceVO.getWorkLevel();
String workType = produceVO.getWorkType();
if(!Arrays.asList(orgString).contains(workType)||null==workType) {
continue;
}
String workTypeName = compareDic(workType);
workTypelist.add(workTypeName);
Numlist.add(counts);
}
maps.put("workTypelist", workTypelist);
maps.put("Numlist", Numlist);
return maps;
}
private String compareDic(String type) {
String eventCauseName= "";
if(null!=type&&type.length()>0) {
switch(type)
{
case "1":
eventCauseName = "带气接切线";
break;
case "2":
eventCauseName = "启箱通气";
break;
case "3":
eventCauseName = "更换设备";
break;
case "4":
eventCauseName = "加拆盲板";
break;
case "5":
eventCauseName = "户内立管停气";
break;
}
}
return eventCauseName;
}function produce(){
// demo3
var myChart3 = echarts.init(document.getElementById('demo3'));
$.ajax({
type : "post",
url : CONTEXT_PATH + '/cusviews/produce/showProduceList',
data : {},
success : function(data){
debugger;
var result = jQuery.parseJSON(data);
var names = ["0:带气接切线","1:启箱通气","2:更换设备","3:加拆盲板","4:户内立管停气"];
var rlt = {
"data" : []
};
for (var key in result.workTypelist){
for (var i = 0, len = names.length; i < len; i++){
var nItem = names[i], noKey = nItem.split(":")[0], nVal = nItem.split(":")[1];
if(key==noKey){
var obj = {};
obj.value = result.Numlist[key], obj.name = nVal;
rlt.data.push(obj);
}
}
}
renderPies(rlt);
}
});
function renderPies(_data){
var option3 = {
tooltip : {
trigger: 'item',
formatter: "{b}{c} ({d}%)"
// formatter: "{a} {b} : {c} ({d}%)"
},
legend: {
data: ['带气接切线','启箱通气','更换设备','加拆盲板','户内立管停气'],
x: 'center',
bottom: '3%',
// left: '1%',
// right: '1%',
itemWidth: 12,
itemHeight: 12,
textStyle:{ //图例文字的样式
color:'73c4fc',
fontSize:12
},
},
series : [
{
name: '',
type: 'pie',
// radius: ['48%', '65%'],
radius: '55%',
center: ['50%', '50%'],
//配置样式
itemStyle: {
//通常情况下每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
normal:{
color: function (params){
var colorList = ['#49d4fb','#894cc7','#40d798','#e4e226','#fc4b79','#fc4b79','#f9be95','#e393fd'];
return colorList[params.dataIndex];
},
label: {
show: true,
// position: 'inside'
formatter: "{b} \n {c} ({d}%)",
textStyle: {
fontSize: '13',
lineHeight: '360'
}
}
},
//鼠标悬停时：
emphasis: {
shadowBlur: 8,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data:_data.data
/*data:[
{value:335, name:'带气接切线'},
{value:310, name:'启箱通气'},
{value:234, name:'更换设备'},
{value:135, name:'加拆盲板'},
{value:1548, name:'户内立管停气'}
]*/
}
]
};
myChart3.setOption(option3);
}
}
折线图
SELECT COUNT(SUBSTRING(a.`check_date`,1,7)) AS normalValue,SUBSTRING(a.`check_date`,1,7) AS checkDate FROM (
SELECT leak.* FROM pr_leak_slpoint leak WHERE SUBSTRING(leak.`check_date`,1,4)
= DATE_FORMAT(NOW(), '%Y')
) a GROUP BY SUBSTRING(a.`check_date`,1,7)
public Map showLeakPointVO(LeakPointVO vo)
{
Map maps = new HashMap();
List datelist = new ArrayList();
List Numlist = new ArrayList();
String[] orgString = {"2018-01","2018-02","2018-03","2018-04","2018-05","2018-06","2018-07","2018-08","2018-09","2018-10","2018-11","2018-12"};
List rushCount = leakMapper.showLeakPointVO(vo);
for (LeakPointVO leakPointVO : rushCount) {
String counts = leakPointVO.getNormalValue();
String checkDate = leakPointVO.getCheckDate();
if(!Arrays.asList(orgString).contains(checkDate)||null==checkDate) {
continue;
}
String checkDateName = compareDic(checkDate);
datelist.add(checkDateName);
Numlist.add(counts);
}
maps.put("datelist", datelist);
maps.put("Numlist", Numlist);
return maps;
}
private String compareDic(String type) {
String eventCauseName= "";
if(null!=type&&type.length()>0) {
switch(type)
{
case "2018-01":
eventCauseName = "1月";
break;
case "2018-02":
eventCauseName = "2月";
break;
case "2018-03":
eventCauseName = "3月";
break;
case "2018-04":
eventCauseName = "4月";
break;
case "2018-05":
eventCauseName = "5月";
break;
case "2018-06":
eventCauseName = "6月";
break;
case "2018-07":
eventCauseName = "7月";
break;
case "2018-08":
eventCauseName = "8月";
break;
case "2018-09":
eventCauseName = "9月";
break;
case "2018-10":
eventCauseName = "10月";
break;
case "2018-11":
eventCauseName = "11月";
break;
case "2018-12":
eventCauseName = "12月";
break;
}
}
return eventCauseName;
}var option4;
function leak(){
// demo4
var myChart4 = echarts.init(document.getElementById('demo4'));
var option4 = {
timeline: {
data: [
'8.20', '8.21', '8.22', '8.23', '8.24', '8.25', '8.26'
],
left: '10%',
right: '10%',
bottom: 0,
height: -120,
axisType: 'category',
show: false,
itemStyle: {
normal: {
color: '#04a5f1'
},
},
lineStyle: {
color: '#ddd'
},
controlStyle: {
show: false,
},
},
options: [{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
/*formatter: "{b}：{c}"*/
/*formatter:"{a} {b} : {c}",*/
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['泄露检测公里数', '疑似泄漏点数'],
x: 'center',
y: '2%',
// left: '1%',
// right: '1%',
itemWidth: 12,
itemHeight: 12,
textStyle:{ //图例文字的样式
color:'73c4fc',
fontSize:12
},
},
grid: {
top: '15%',
left: '3%',
right: '4%',
bottom: '10',
containLabel: true
},
xAxis: [{
type: 'category',
/*data: ['8.20', '8.21', '8.22', '8.23', '8.24', '8.25', '8.26'],*/
data : [],
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
//rotate:-30,
textStyle: {
color: '#73c4fc',
// fontSize: '22',
}
},
axisLine: { //坐标轴轴线相关设置
lineStyle: {
color: '#73c4fc',
opacity: 1
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
}],
yAxis: [{
name: '泄露检测公里数',
type: 'value',
nameTextStyle: {
color: '#73c4fc',
},
axisLabel: {
textStyle: {
color: '#73c4fc',
// fontSize: '22'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
}
}, {
name: '疑似泄漏点数',
nameTextStyle: {
color: '#73c4fc',
},
type: 'value',
position: 'right',
axisLabel: {
textStyle: {
color: '#73c4fc',
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
}
}],
series: [{
'name': '泄露检测公里数',
'type': 'bar',
barWidth: 15,
'data': [123, 153, 117, 114, 73, 156, 105,222,109,210,120],
/*'data': [],*/
itemStyle: {
normal: {
//barBorderRadius: 15,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#229aff'
},
{
offset: 1,
color: '#13bfe8'
}
]
)
}
}
}, {
name: '疑似泄漏点数',
yAxisIndex: 1,
type: 'line',
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 12,
/*data: [1061, 992, 1244, 4020, 818, 1032, 2092],*/
'data': [],
itemStyle: {
normal: {
color: '#fdb94e'
},
},
}]
}]
};
$.ajax({
type : "post",
url : CONTEXT_PATH + '/cusviews/leak/showLeakPointVO',
data : {},
success : function(data){
debugger;
var result = jQuery.parseJSON(data);
option4.options[0].xAxis[0].data = result.datelist; //x坐标
/*option4.options[0].series[0].data = item.num;*/ //泄露检测公里数
option4.options[0].series[1].data = result.Numlist;//疑似泄漏点数
myChart4.setOption(option4);
}
});
}
var myChart = echarts.init(document.getElementById("radarChart"));
var option = {
title : {
text: '预算 vs 开销',
subtext: '纯属虚构'
},
tooltip : {
/*trigger: 'axis',*/
extraCssText:'width:120px;height:80px;',
textStyle:'8'
},
legend: {
orient : 'vertical',
x : 'right',
y : 'bottom',
data:[{
name: '预算分配',
// 强制设置图形为圆。
/* icon: 'circle',*/
// 设置文本为红色
textStyle: {
color: 'red'
}
},{
name: '实际开销',
// 强制设置图形为圆。
/* icon: 'circle',*/
// 设置文本为红色
textStyle: {
color: '#FFFF00'
}
}]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
polar : [
{
name:{
show: true, // 是否显示工艺等文字
formatter: null, // 工艺等文字的显示形式
textStyle: {
color:'#a3a5b6' // 工艺等文字颜色
}
},
indicator : [
{ text: '销售', max: 6000},
{ text: '管理', max: 16000},
{ text: '信息技术', max: 30000},
{ text: '客服', max: 38000},
{ text: '研发', max: 52000},
{ text: '市场', max: 25000}
]
}
],
calculable : true,
series : [
{
name: '预算 vs 开销',
type: 'radar',
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : '预算分配'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : '实际开销',
itemStyle: {
normal: {
color: '#FFFF00',
lineStyle: {
color: '#FFFF00',
},
},
},
}
]
}
]
};
myChart.setOption(option);
API参考:http://echarts.baidu.com/option.html#title.text
SELECT
DISTINCT d.timestamp,d.`tag_value` AS tagValue,d.`device_code` AS
deviceCode,CEIL(d.`tag_value`) AS tagCode
FROM
pr_scada_data d
WHERE
d.device_code = 'N53A295'
AND d.tag_name LIKE '%出口压力'
AND SUBSTRING(d.`timestamp`,1,11) = (SELECT SUBSTRING(m.`timestamp`,1,11)
AS TIMESTAMP FROM (SELECT MAX(TIMESTAMP) AS TIMESTAMP FROM
pr_scada_data WHERE device_code = 'N53A295') m)
ORDER BY d.`timestamp`
public Map getRadarChartData(String deviceCode)
{
Map maps = new HashMap();
//统计整点的最大数据
String radarCeilTime = prPreStationMapper.getRadarCeilTime(deviceCode);
//数据库已有的真实的数据
List radarRecordChartName = prPreStationMapper.getRadarRecordChartName(deviceCode);
if(StringUtil.isEmpty(radarCeilTime))
{
return null;
}
if(CollectionUtils.isEmpty(radarRecordChartName)) {
return null;
}
String radarMaxTime = prPreStationMapper.getRadarMaxTiem(deviceCode);
String[] dateString = {radarMaxTime+"00:00",radarMaxTime+"23:00",radarMaxTime+"22:00",radarMaxTime+"21:00",radarMaxTime+"20:00",radarMaxTime+"19:00",radarMaxTime+"18:00",radarMaxTime+"17:00",radarMaxTime+"16:00",radarMaxTime+"15:00",radarMaxTime+"14:00",radarMaxTime+"13:00",radarMaxTime+"12:00",radarMaxTime+"11:00",radarMaxTime+"10:00",radarMaxTime+"09:00",radarMaxTime+"08:00",radarMaxTime+"07:00",radarMaxTime+"06:00",radarMaxTime+"05:00",radarMaxTime+"04:00",radarMaxTime+"03:00",radarMaxTime+"02:00",radarMaxTime+"01:00"};
Map radarData = new HashMap(1);
//设置整点默认值，以最接近整点的数据最大的整数值设置，如果没有当前整点，则统一默认设置其他整点
for(int i=0;i
关注
打赏
![]()
1665965058
查看更多评论
最近更新
- 深拷贝和浅拷贝的区别（重点）
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state，props，refs（你学废了吗）
- 【脚手架VueCLI】从零开始，创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解（含代码）
- 【React】DOM的Diffing算法是什么？以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面？
