加入echart
wangziyangyang
parent
76829b559c
commit
348f47d86d
|
|
@ -1,68 +0,0 @@
|
|||
package com.wangziyang.mes.company.client;
|
||||
|
||||
import io.swagger.annotations.Api;
|
||||
import io.swagger.annotations.ApiImplicitParam;
|
||||
import io.swagger.annotations.ApiImplicitParams;
|
||||
import io.swagger.annotations.ApiOperation;
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
|
||||
/**
|
||||
* 公司
|
||||
*
|
||||
* @author SongPeng
|
||||
* @date 2019/9/27 16:05
|
||||
*/
|
||||
@Api(tags = "公司")
|
||||
@RequestMapping("/client/company")
|
||||
@Controller("clientCompanyController")
|
||||
public class CompanyController {
|
||||
|
||||
Logger log = LoggerFactory.getLogger(CompanyController.class);
|
||||
|
||||
@ApiOperation("公司首页")
|
||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
||||
@GetMapping({"", "/index-ui"})
|
||||
public String indexUI(Model model) {
|
||||
return "client/company/index";
|
||||
}
|
||||
|
||||
@ApiOperation("公司关于页")
|
||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
||||
@GetMapping("/about-ui")
|
||||
public String aboutUI(Model model) {
|
||||
return "client/company/about";
|
||||
}
|
||||
|
||||
@ApiOperation("公司案例页")
|
||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
||||
@GetMapping("/case-ui")
|
||||
public String caseUI(Model model) {
|
||||
return "client/company/case";
|
||||
}
|
||||
|
||||
@ApiOperation("公司新闻动态页")
|
||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
||||
@GetMapping("/news-ui")
|
||||
public String newsUI(Model model) {
|
||||
return "client/company/news";
|
||||
}
|
||||
|
||||
@ApiOperation("公司新闻动态详情页")
|
||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
||||
@GetMapping("/news/detail-ui")
|
||||
public String newsDetailUI(Model model) {
|
||||
return "client/company/newsDetail";
|
||||
}
|
||||
|
||||
@ApiOperation("公司产品页")
|
||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
||||
@GetMapping("/product-ui")
|
||||
public String productUI(Model model) {
|
||||
return "client/company/product";
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
package com.wangziyang.mes.digitization.controller;
|
||||
|
||||
import com.wangziyang.mes.common.BaseController;
|
||||
import io.swagger.annotations.ApiOperation;
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
|
||||
/**
|
||||
* 系统登录
|
||||
*
|
||||
* @author SongPeng
|
||||
* @date 2019/9/27 16:05
|
||||
*/
|
||||
@RequestMapping("/digitization/plan")
|
||||
@Controller("PlanDataController")
|
||||
public class PlanDataController extends BaseController {
|
||||
|
||||
Logger logger = LoggerFactory.getLogger(PlanDataController.class);
|
||||
|
||||
/**
|
||||
* 工单计划数字化看板
|
||||
*
|
||||
* @param model 视图对象
|
||||
* @return 工单计划数字化看板界面
|
||||
*/
|
||||
@ApiOperation("工单计划数字化看板")
|
||||
@GetMapping("/plan-ui")
|
||||
public String welcomeUI(Model model) {
|
||||
return "digitization/plandg";
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.3 MiB |
|
|
@ -0,0 +1,198 @@
|
|||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory);
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts);
|
||||
}
|
||||
}(this, function (exports, echarts) {
|
||||
var log = function (msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg);
|
||||
}
|
||||
};
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded');
|
||||
return;
|
||||
}
|
||||
|
||||
var colorPalette = [
|
||||
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
|
||||
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
|
||||
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
|
||||
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
|
||||
];
|
||||
|
||||
|
||||
var theme = {
|
||||
color: colorPalette,
|
||||
|
||||
title: {
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
color: '#008acd'
|
||||
}
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
itemWidth: 15,
|
||||
color: ['#5ab1ef','#e0ffff']
|
||||
},
|
||||
|
||||
toolbox: {
|
||||
iconStyle: {
|
||||
normal: {
|
||||
borderColor: colorPalette[0]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(50,50,50,0.5)',
|
||||
axisPointer : {
|
||||
type : 'line',
|
||||
lineStyle : {
|
||||
color: '#008acd'
|
||||
},
|
||||
crossStyle: {
|
||||
color: '#008acd'
|
||||
},
|
||||
shadowStyle : {
|
||||
color: 'rgba(200,200,200,0.2)'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
dataZoom: {
|
||||
dataBackgroundColor: '#efefff',
|
||||
fillerColor: 'rgba(182,162,222,0.2)',
|
||||
handleColor: '#008acd'
|
||||
},
|
||||
|
||||
grid: {
|
||||
borderColor: '#eee'
|
||||
},
|
||||
|
||||
categoryAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#008acd'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: ['#eee']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
valueAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#008acd'
|
||||
}
|
||||
},
|
||||
splitArea : {
|
||||
show : true,
|
||||
areaStyle : {
|
||||
color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: ['#eee']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
timeline : {
|
||||
lineStyle : {
|
||||
color : '#008acd'
|
||||
},
|
||||
controlStyle : {
|
||||
normal : { color : '#008acd'},
|
||||
emphasis : { color : '#008acd'}
|
||||
},
|
||||
symbol : 'emptyCircle',
|
||||
symbolSize : 3
|
||||
},
|
||||
|
||||
line: {
|
||||
smooth : true,
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 3
|
||||
},
|
||||
|
||||
candlestick: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#d87a80',
|
||||
color0: '#2ec7c9',
|
||||
lineStyle: {
|
||||
color: '#d87a80',
|
||||
color0: '#2ec7c9'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
scatter: {
|
||||
symbol: 'circle',
|
||||
symbolSize: 4
|
||||
},
|
||||
|
||||
map: {
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#d87a80'
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#eee',
|
||||
areaColor: '#ddd'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#fe994e'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
graph: {
|
||||
color: colorPalette
|
||||
},
|
||||
|
||||
gauge : {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
|
||||
width: 10
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
splitNumber: 10,
|
||||
length :15,
|
||||
lineStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length :22,
|
||||
lineStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
pointer : {
|
||||
width : 5
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
echarts.registerTheme('macarons', theme);
|
||||
}));
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</head>
|
||||
<style>
|
||||
.splayUi-container {
|
||||
background-image: url(../image/hk.png);
|
||||
background-image: url(/image/hk.png);
|
||||
background-size: cover;
|
||||
height: 670px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
<html style="background-color: #04080b;">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>404</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<#include "${request.contextPath}/common/common.ftl">
|
||||
<!-- 引入 ECharts 文件 -->
|
||||
<script src="${request.contextPath}/lib/echarts/echarts.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
.splayUi-container {
|
||||
background-image: url(/image/plan.jpg);
|
||||
background-size: cover;
|
||||
height: 694px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div style="width:100%;">
|
||||
|
||||
<div class="splayUi-container">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs6">
|
||||
<div id="planColumnar" style="width: 600px;height:400px;"></div>
|
||||
</div>
|
||||
<div class="layui-col-xs6">
|
||||
<div id="planBin" style="width: 600px;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
planColumnarChart = echarts.init(document.getElementById('planColumnar'));
|
||||
planBinChart = echarts.init(document.getElementById('planBin'));
|
||||
// 指定图表的配置项和数据
|
||||
planColumnarOption = {
|
||||
title: {
|
||||
text: '计划产量',
|
||||
textStyle:{
|
||||
color:"#fff"
|
||||
}
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['销量']
|
||||
},
|
||||
xAxis: {
|
||||
data: ["待生产订单总数", "已完成总数"]
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [100, 200]
|
||||
}],
|
||||
textStyle : {
|
||||
color:"#fff"
|
||||
}
|
||||
};
|
||||
//饼图
|
||||
planBinoption = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||
},
|
||||
textStyle : {
|
||||
color:"#fff"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 335, name: '直接访问'},
|
||||
{value: 310, name: '邮件营销'},
|
||||
{value: 234, name: '联盟广告'},
|
||||
{value: 135, name: '视频广告'},
|
||||
{value: 1548, name: '搜索引擎'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
planColumnarChart.setOption(planColumnarOption);
|
||||
planBinChart.setOption(planBinoption);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue