加入echart

pull/1/head
wangziyangyang 2020-03-18 17:18:16 +08:00
parent 76829b559c
commit 348f47d86d
6 changed files with 358 additions and 69 deletions

View File

@ -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";
}
}

View File

@ -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

View File

@ -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);
}));

View File

@ -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;
}

View File

@ -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>