init2
This commit is contained in:
hh
@ -41,6 +41,7 @@
|
|||||||
"clipboard": "2.0.6",
|
"clipboard": "2.0.6",
|
||||||
"core-js": "3.8.1",
|
"core-js": "3.8.1",
|
||||||
"echarts": "4.9.0",
|
"echarts": "4.9.0",
|
||||||
|
"echarts-liquidfill": "^2.0.2",
|
||||||
"element-ui": "2.15.6",
|
"element-ui": "2.15.6",
|
||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
"fuse.js": "6.4.3",
|
"fuse.js": "6.4.3",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 8.1 KiB |
BIN
src/assets/logo/logo1.png
Normal file
BIN
src/assets/logo/logo1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
@ -5,6 +5,8 @@ import Cookies from 'js-cookie'
|
|||||||
import Element from 'element-ui'
|
import Element from 'element-ui'
|
||||||
import './assets/styles/element-variables.scss'
|
import './assets/styles/element-variables.scss'
|
||||||
|
|
||||||
|
import 'echarts-liquidfill';
|
||||||
|
|
||||||
import '@/assets/styles/index.scss' // global css
|
import '@/assets/styles/index.scss' // global css
|
||||||
import '@/assets/styles/ruoyi.scss' // ruoyi css
|
import '@/assets/styles/ruoyi.scss' // ruoyi css
|
||||||
import App from './App'
|
import App from './App'
|
||||||
|
|||||||
@ -2,10 +2,19 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container2">
|
<div class="container2">
|
||||||
<div class="tit"><rocketTit>{{title}}</rocketTit></div>
|
<div class="tit">
|
||||||
<div class="content">
|
<rocketTit>{{title}}</rocketTit>
|
||||||
<slot />
|
<div class="datePicker">
|
||||||
|
<slot name="datePicker"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="snap">
|
||||||
|
<slot name="snap"></slot>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -36,31 +45,60 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.container2 {
|
.container2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 536px;
|
width: 536px;
|
||||||
height: 394px;
|
height: 394px;
|
||||||
background-image: url(./bg.png);
|
background-image: url(./bg.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: PingFangSC-Semibold, PingFang SC;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
.tit {
|
.tit {
|
||||||
padding: 16px 16px 16px 24px;
|
padding: 16px 16px 16px 24px;
|
||||||
}
|
position: relative;
|
||||||
.content {
|
.datePicker {
|
||||||
flex: 1;
|
position: absolute;
|
||||||
padding: 2px;
|
right: 16px;
|
||||||
box-sizing: border-box;
|
top: 12px;
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
::v-deep .el-date-editor {
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
vertical-align: middle;
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
.el-range-input,
|
||||||
|
.el-range-separator {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-range-editor.is-active {
|
||||||
|
border-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
.snap {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 25px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -3,6 +3,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container3">
|
<div class="container3">
|
||||||
<slot />
|
<slot />
|
||||||
|
<div class="container3bg"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -35,5 +36,17 @@ export default {
|
|||||||
background-image: url(./bg.png);
|
background-image: url(./bg.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
z-index: 10;
|
||||||
|
.container3bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 766px;
|
||||||
|
height: 632px;
|
||||||
|
background-image: url(./bg.png);
|
||||||
|
background-size: cover;
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,10 +2,15 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container2">
|
<div class="container2">
|
||||||
<div class="tit"><rocketTit>{{title}}</rocketTit></div>
|
<div class="tit">
|
||||||
<div class="content">
|
<rocketTit>{{title}}</rocketTit>
|
||||||
<slot />
|
<div class="datePicker">
|
||||||
|
<slot name="datePicker"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -36,31 +41,52 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.container2 {
|
.container2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 930px;
|
width: 930px;
|
||||||
height: 311px;
|
height: 311px;
|
||||||
background-image: url(./bg.png);
|
background-image: url(./bg.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: PingFangSC-Semibold, PingFang SC;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
.tit {
|
.tit {
|
||||||
padding: 16px 16px 16px 24px;
|
padding: 16px 16px 16px 24px;
|
||||||
}
|
position: relative;
|
||||||
.content {
|
.datePicker {
|
||||||
flex: 1;
|
position: absolute;
|
||||||
padding: 2px;
|
right: 16px;
|
||||||
box-sizing: border-box;
|
top: 12px;
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
::v-deep .el-date-editor {
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
vertical-align: middle;
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
.el-range-input,
|
||||||
|
.el-range-separator {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-range-editor.is-active {
|
||||||
|
border-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,10 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ScaleBox" ref="ScaleBox" :style="{
|
<div style="background-color: #000;height: 100%;width:100%">
|
||||||
|
<div class="ScaleBox" ref="ScaleBox" :style="{
|
||||||
width: width + 'px',
|
width: width + 'px',
|
||||||
height: height + 'px'
|
height: height + 'px'
|
||||||
}">
|
}">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -1,7 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<container4 title="总体经营情况">
|
<container4 title="总体经营情况">
|
||||||
<img src="./bottom1.png" style="width: 90%;display: block;margin: 0 auto">
|
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||||
|
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||||
</container4>
|
</container4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -20,20 +22,187 @@ export default {
|
|||||||
container4,
|
container4,
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {}
|
return {
|
||||||
|
dateRange: [],
|
||||||
|
chart: null,
|
||||||
|
|
||||||
|
option: {
|
||||||
|
grid: {
|
||||||
|
top: '5%',
|
||||||
|
left: '3%',
|
||||||
|
right: '40%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: 'center',
|
||||||
|
data: ['收入', '利润', '目标完成'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||||
|
splitLine: {
|
||||||
|
show: false//不显示网格线
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: false//不显示网格线
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false//不显示网格区域
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '利润',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(116,212,184)'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '收入',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320],
|
||||||
|
barWidth: 30,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(170,202,253)'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '目标完成',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(245,217,126)'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
hoverAnimation: false,
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['70%', '80%'],
|
||||||
|
center: ['75%', '50%'],
|
||||||
|
roseType: 'area',
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 5,
|
||||||
|
color: 'rgb(170,202,253)'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 30, name: '收入' },
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
showAbove: true,
|
||||||
|
length: -40,
|
||||||
|
length2: 160,
|
||||||
|
// minTurnAngle: 90,
|
||||||
|
// maxSurfaceAngle: 90
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
hoverAnimation: false,
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '50%'],
|
||||||
|
center: ['75%', '50%'],
|
||||||
|
roseType: 'area',
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 5,
|
||||||
|
color: 'rgb(116,212,184)'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 30, name: '利润' },
|
||||||
|
],
|
||||||
|
labelLine: {
|
||||||
|
showAbove: true,
|
||||||
|
length: -80,
|
||||||
|
length2: 160,
|
||||||
|
// minTurnAngle: 90,
|
||||||
|
// maxSurfaceAngle: 90
|
||||||
|
}
|
||||||
|
// label: {
|
||||||
|
// fontSize: 14,
|
||||||
|
// position: 'outer',
|
||||||
|
// alignTo: 'edge',
|
||||||
|
// margin: 10,
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// showAbove: true,
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
hoverAnimation: false,
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['55%', '65%'],
|
||||||
|
center: ['75%', '50%'],
|
||||||
|
roseType: 'area',
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 5,
|
||||||
|
color: 'rgb(245,217,126)',
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 30, name: '目标' },
|
||||||
|
],
|
||||||
|
labelLine: {
|
||||||
|
showAbove: true,
|
||||||
|
length: -60,
|
||||||
|
length2: 145,
|
||||||
|
}
|
||||||
|
// label: {
|
||||||
|
// fontSize: 14,
|
||||||
|
// position: 'outer',
|
||||||
|
// alignTo: 'edge',
|
||||||
|
// margin: 10,
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// showAbove: true,
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
initChart () {
|
||||||
|
this.chart = echarts.init(this.$refs.chart, 'macarons');
|
||||||
|
this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,7 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<container4 title="总体生产情况">
|
<container4 title="总体生产情况">
|
||||||
<img src="./bottom2.png" style="width: 90%;display: block;margin: 0 auto">
|
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||||
|
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||||
</container4>
|
</container4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -13,6 +15,7 @@ import container4 from "../components/container4/index.vue";
|
|||||||
import echarts from 'echarts'
|
import echarts from 'echarts'
|
||||||
require('echarts/theme/macarons') // echarts theme
|
require('echarts/theme/macarons') // echarts theme
|
||||||
import resize from '../../dashboard/mixins/resize'
|
import resize from '../../dashboard/mixins/resize'
|
||||||
|
import 'echarts-liquidfill'
|
||||||
export default {
|
export default {
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
name: 'bottom1',
|
name: 'bottom1',
|
||||||
@ -20,20 +23,326 @@ export default {
|
|||||||
container4,
|
container4,
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {}
|
return {
|
||||||
|
dateRange: [],
|
||||||
|
option: {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
},
|
||||||
|
formatter: function (params, ticket, callback) {
|
||||||
|
console.log(params)
|
||||||
|
var res = params[0].name;
|
||||||
|
for (var i = 0, l = params.length; i < l; i++) {
|
||||||
|
res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
// 仅为了模拟异步回调
|
||||||
|
callback(ticket, res);
|
||||||
|
}, 100)
|
||||||
|
return 'loading...';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['交付产品', '装药量'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '10%',
|
||||||
|
left: '3%',
|
||||||
|
right: '35%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
axisLabel: {
|
||||||
|
formatter: function (value) {
|
||||||
|
return Math.abs(value);//显示的数值都取绝对值
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: false//不显示网格线
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisTick: { show: false },
|
||||||
|
// data : ['0~5岁','5~10岁','10-30岁','30-50岁','50-70岁','70-100','100以上']
|
||||||
|
data: ['2021.12', '2021.11', '2021.10', '2021.09', '2021.08'].reverse(),
|
||||||
|
splitLine: {
|
||||||
|
show: false//不显示网格线
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false//不显示网格区域
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
title: {
|
||||||
|
text: `${80}%`,
|
||||||
|
left: "80%",
|
||||||
|
top: "40%",
|
||||||
|
textAlign: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: "normal",
|
||||||
|
fontSize: 26,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: "rgb(255,255,255)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '交付产品',
|
||||||
|
type: 'bar',
|
||||||
|
stack: '总量',
|
||||||
|
barWidth: 20,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [320, 302, 341, 374, 390],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(115,208,183)'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '装药量',
|
||||||
|
type: 'bar',
|
||||||
|
stack: '总量',
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: function (v) { return Math.abs(v.data) }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: [-120, -132, -101, -134, -190],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(151,186,255)'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'liquidFill',
|
||||||
|
radius: '40%',
|
||||||
|
z: 1,
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
amplitude: 20,
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset:0,
|
||||||
|
color: '#324791',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#449090',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
globalCoord: false,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
0.4,
|
||||||
|
{
|
||||||
|
value: 0.4,
|
||||||
|
direction: 'left',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
backgroundStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
color: 'transparent',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
formatter: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
outline: {
|
||||||
|
show: true,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 0,
|
||||||
|
},
|
||||||
|
borderDistance: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: "liquidFill", // 图表类型
|
||||||
|
radius: "70%",
|
||||||
|
center: ["80%", "50%"],
|
||||||
|
data: [
|
||||||
|
80 / 100,
|
||||||
|
80 / 100,
|
||||||
|
], // data个数代表波浪数
|
||||||
|
backgroundStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
color: "rgba(255,255,255,0)"
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false, //不显示label 用副标题代替了
|
||||||
|
formatter: (0.5 * 100).toFixed(0) + "%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 38,
|
||||||
|
color: "black"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: [ //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
|
||||||
|
{
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(82,157,240,0.1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(104,222,219,0.5)"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
globalCoord: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(82,157,240,0.1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(104,222,219,0.5)"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
globalCoord: false
|
||||||
|
},
|
||||||
|
],
|
||||||
|
outline: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//进度线
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
center: ["80%", "50%"],
|
||||||
|
radius: ["75%", "80%"], //进度线粗细
|
||||||
|
hoverAnimation: false,
|
||||||
|
clockwise: false,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
value: 80, //进度
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 2,
|
||||||
|
colorStops: [
|
||||||
|
// !! 在此添加渐变过程色 !!
|
||||||
|
{ offset: 0, color: "#68DEDB" },
|
||||||
|
{ offset: 1, color: "#529DF0" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
// color: "#5886f0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
//画剩余的刻度圆环
|
||||||
|
name: "",
|
||||||
|
value: 100 - 80,
|
||||||
|
clockwise: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(255,255,255,0)"
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(255,255,255,0)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
initChart () {
|
||||||
|
this.chart = echarts.init(this.$refs.chart, 'macarons');
|
||||||
|
this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.4 MiB |
@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<container2 title="生产总体走势">
|
<container2 title="生产总体走势">
|
||||||
|
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||||
|
<span slot="snap">件</span>
|
||||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||||
</container2>
|
</container2>
|
||||||
</div>
|
</div>
|
||||||
@ -28,6 +32,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
dateRange: [],
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
option: {
|
||||||
backgroundColor: '',
|
backgroundColor: '',
|
||||||
@ -43,17 +48,26 @@ export default {
|
|||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '3%',
|
||||||
right: '4%',
|
right: '6%',
|
||||||
bottom: '3%',
|
bottom: '3%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
data: ['03-21', '03-22', '03-23', '03-24', '03-25', '03-26', '03-27'],
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false//不显示网格线
|
show: false//不显示网格线
|
||||||
},
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
rotate: 320
|
||||||
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
@ -62,6 +76,11 @@ export default {
|
|||||||
},
|
},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
show: false//不显示网格区域
|
show: false//不显示网格区域
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<container2 title="经营总体走势">
|
<container2 title="经营总体走势">
|
||||||
|
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||||
</container2>
|
</container2>
|
||||||
</div>
|
</div>
|
||||||
@ -28,6 +30,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
dateRange: [],
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
option: {
|
||||||
backgroundColor: '',
|
backgroundColor: '',
|
||||||
@ -43,7 +46,7 @@ export default {
|
|||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '3%',
|
||||||
right: '4%',
|
right: '8%',
|
||||||
bottom: '3%',
|
bottom: '3%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
@ -53,7 +56,16 @@ export default {
|
|||||||
data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
|
data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false//不显示网格线
|
show: false//不显示网格线
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
rotate: 320
|
||||||
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
@ -66,6 +78,11 @@ export default {
|
|||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: "{value}%"
|
formatter: "{value}%"
|
||||||
},
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
},
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 100
|
max: 100
|
||||||
},
|
},
|
||||||
|
|||||||
@ -34,7 +34,9 @@
|
|||||||
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div class="copyright">思米西科技有限公司 地址：自由贸易试验区成都高新区吉泰二路266号18栋2单元11楼1107号 联系电话：010-888888 邮箱：****@qq.com</div>
|
<div class="copyright">
|
||||||
|
内蒙古航天红峡化工有限公司 <span style="padding: 0 10px;">|</span><img src="../assets/logo/logo.png" alt="">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -150,11 +152,15 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 14px;
|
font-size: 18px;
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
font-family: PingFangSC-Regular, PingFang SC;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
img {
|
||||||
|
height: 24px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user