parent
2c06b569c9
commit
5dca76e3d7
5 changed files with 1960 additions and 443 deletions
@ -0,0 +1,890 @@ |
|||||||
|
<template> |
||||||
|
<basic-container> |
||||||
|
<el-row :gutter=24> |
||||||
|
<el-row :gutter=24 v-if="this.permission.departmentSearch" > |
||||||
|
<el-form ref="form" :model="form" label-width="80px"> |
||||||
|
<!-- <el-col :span="6"> |
||||||
|
<el-form-item label="日期"> |
||||||
|
<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" style="width:100%"> |
||||||
|
</el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
</el-col> --> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="部门"> |
||||||
|
<el-select v-model="value" placeholder="请选择部门" style="width:100%"> |
||||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-button type="primary" @click="onSubmit">搜索</el-button> |
||||||
|
<el-button @click="onSubmit">重置</el-button> |
||||||
|
</el-col> |
||||||
|
</el-form> |
||||||
|
</el-row> |
||||||
|
<el-col :span="12"> |
||||||
|
<div class="title">物资申请类别 |
||||||
|
</div> |
||||||
|
<div id="echarts1" style="width: 100%; height:400px"></div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<div class="title">物资申请价值 |
||||||
|
</div> |
||||||
|
<div id="echarts2" style="width: 100%; height:400px"></div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<div class="title">物资库存 |
||||||
|
</div> |
||||||
|
<div id="echarts3" style="width: 100%; height:400px"></div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<div class="title">消耗品价值分析 |
||||||
|
<el-select v-model="value2" placeholder="请选择" style="float:right" @change="changeSelect()"> |
||||||
|
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</div> |
||||||
|
<div id="echarts4" style="width: 100%; height:400px"></div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</basic-container> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import * as echarts from "echarts"; |
||||||
|
import {mapGetters} from "vuex"; |
||||||
|
export default { |
||||||
|
computed: { |
||||||
|
...mapGetters(["userInfo", "permission"]), |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
options: [{ |
||||||
|
value: '部门一', |
||||||
|
label: '部门一' |
||||||
|
}, { |
||||||
|
value: '部门二', |
||||||
|
label: '部门二' |
||||||
|
}, { |
||||||
|
value: '部门三', |
||||||
|
label: '部门三' |
||||||
|
}, { |
||||||
|
value: '部门四', |
||||||
|
label: '部门四' |
||||||
|
}, { |
||||||
|
value: '部门五', |
||||||
|
label: '部门五' |
||||||
|
}], |
||||||
|
value: '', |
||||||
|
options2: [{ |
||||||
|
value: '年度', |
||||||
|
label: '年度' |
||||||
|
}, { |
||||||
|
value: '季度', |
||||||
|
label: '季度' |
||||||
|
}, { |
||||||
|
value: '月份', |
||||||
|
label: '月份' |
||||||
|
}], |
||||||
|
value2: '年度' |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initEcharts1() |
||||||
|
this.initEcharts2() |
||||||
|
this.initEcharts3() |
||||||
|
this.initEcharts4(["2022年", "2023年", "2024年", "2025年"], [23, 78, 87, 90]) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initEcharts1() { |
||||||
|
var myChart = echarts.init(document.getElementById("echarts1")); |
||||||
|
// 指定图表的配置项和数据 |
||||||
|
var option = { |
||||||
|
|
||||||
|
title: { |
||||||
|
text: '', |
||||||
|
x: 'center' |
||||||
|
}, |
||||||
|
backgroundColor: '#fff', |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
data: ["全部", "易耗品", "耐用品"], |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: '#888' |
||||||
|
}, |
||||||
|
margin: 20, //刻度标签与轴线之间的距离。 |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: '#eee', |
||||||
|
type: 'solid' |
||||||
|
} |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: '#888' |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{//三个最低下的圆片 |
||||||
|
"name": "", |
||||||
|
"type": "pictorialBar", |
||||||
|
"symbolSize": [100, 30], |
||||||
|
"symbolOffset": [0, 18], |
||||||
|
"z": 12, |
||||||
|
"data": [{ |
||||||
|
"name": "", |
||||||
|
"value": "100", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(89,211,255,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(23,237,194,1)" |
||||||
|
} |
||||||
|
]) |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
"name": "", |
||||||
|
"value": "101", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(89,211,255,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(23,237,194,1)" |
||||||
|
} |
||||||
|
]) |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
"name": "", |
||||||
|
"value": "81", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(89,211,255,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(23,237,194,1)" |
||||||
|
} |
||||||
|
]) |
||||||
|
} |
||||||
|
} |
||||||
|
}] |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
//下半截柱状图 |
||||||
|
{ |
||||||
|
name: '2020', |
||||||
|
type: 'bar', |
||||||
|
barWidth: 100, |
||||||
|
barGap: '-100%', |
||||||
|
itemStyle: {//lenged文本 |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(55,255,249,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(0,222,215,0.2)" |
||||||
|
} |
||||||
|
]) |
||||||
|
}, |
||||||
|
|
||||||
|
data: [{ |
||||||
|
"name": "", |
||||||
|
"value": "100", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
"color": { |
||||||
|
"x": 0, |
||||||
|
"y": 0, |
||||||
|
"x2": 0, |
||||||
|
"y2": 1, |
||||||
|
"type": "linear", |
||||||
|
"global": false, |
||||||
|
"colorStops": [{//第一节下面 |
||||||
|
"offset": 0, |
||||||
|
"color": "rgba(0,255,245,0.5)" |
||||||
|
}, { |
||||||
|
"offset": 1, |
||||||
|
"color": "#43bafe" |
||||||
|
}] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
"name": "", |
||||||
|
"value": "101", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
"color": { |
||||||
|
"x": 0, |
||||||
|
"y": 0, |
||||||
|
"x2": 0, |
||||||
|
"y2": 1, |
||||||
|
"type": "linear", |
||||||
|
"global": false, |
||||||
|
"colorStops": [{//第二个柱状图下面 |
||||||
|
"offset": 0, |
||||||
|
"color": "rgba(0,255,245,0.5)" |
||||||
|
}, { |
||||||
|
"offset": 1, |
||||||
|
"color": "#43bafe" |
||||||
|
}] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
"name": "", |
||||||
|
"value": "81", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
"color": { |
||||||
|
"x": 0, |
||||||
|
"y": 0, |
||||||
|
"x2": 0, |
||||||
|
"y2": 1, |
||||||
|
"type": "linear", |
||||||
|
"global": false, |
||||||
|
"colorStops": [{//第三个柱状图下半截 |
||||||
|
"offset": 0, |
||||||
|
"color": "rgba(0,255,245,0.5)" |
||||||
|
}, { |
||||||
|
"offset": 1, |
||||||
|
"color": "#43bafe" |
||||||
|
}] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}] |
||||||
|
}, |
||||||
|
|
||||||
|
{ // 替代柱状图 默认不显示颜色,是最下方柱图(邮件营销)的value值 - 20 |
||||||
|
type: 'bar', |
||||||
|
barWidth: 100, |
||||||
|
barGap: '-100%', |
||||||
|
stack: '广告', |
||||||
|
itemStyle: { |
||||||
|
color: 'transparent' |
||||||
|
}, |
||||||
|
data: [100, 102, 81] |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
"name": "", //头部 |
||||||
|
"type": "pictorialBar", |
||||||
|
"symbolSize": [100, 45], |
||||||
|
"symbolOffset": [0, -20], |
||||||
|
"z": 12, |
||||||
|
"data": [{ |
||||||
|
"name": "", |
||||||
|
"value": "320", |
||||||
|
"symbolPosition": "end", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
||||||
|
[{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(54,127,223,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(94,162,254,1)" |
||||||
|
} |
||||||
|
], |
||||||
|
false |
||||||
|
), |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
"name": "", |
||||||
|
"value": "283", |
||||||
|
"symbolPosition": "end", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
||||||
|
[{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(54,127,223,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(94,162,254,1)" |
||||||
|
} |
||||||
|
], |
||||||
|
false |
||||||
|
), |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
"name": "", |
||||||
|
"value": "272", |
||||||
|
"symbolPosition": "end", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
||||||
|
[{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(54,127,223,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(94,162,254,1)" |
||||||
|
} |
||||||
|
], |
||||||
|
false |
||||||
|
), |
||||||
|
} |
||||||
|
} |
||||||
|
}] |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
"name": "", |
||||||
|
"type": "pictorialBar", |
||||||
|
"symbolSize": [100, 45], |
||||||
|
"symbolOffset": [0, -20], |
||||||
|
"z": 12, |
||||||
|
"data": [{ |
||||||
|
"name": "", |
||||||
|
"value": "103", |
||||||
|
"symbolPosition": "end", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
||||||
|
[{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(89,211,255,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(23,237,194,1)" |
||||||
|
} |
||||||
|
], |
||||||
|
false |
||||||
|
), |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
"name": "", |
||||||
|
"value": "105", |
||||||
|
"symbolPosition": "end", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
||||||
|
[{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(89,211,255,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(23,237,194,1)" |
||||||
|
} |
||||||
|
], |
||||||
|
false |
||||||
|
), |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
"name": "", |
||||||
|
"value": "84", |
||||||
|
"symbolPosition": "end", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
||||||
|
[{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(89,211,255,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(23,237,194,1)" |
||||||
|
} |
||||||
|
], |
||||||
|
false |
||||||
|
), |
||||||
|
} |
||||||
|
} |
||||||
|
}] |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
name: '2019', |
||||||
|
type: 'bar', |
||||||
|
barWidth: 100, |
||||||
|
barGap: '-100%', |
||||||
|
stack: '广告', |
||||||
|
itemStyle: { |
||||||
|
// barBorderRadius: 20, |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(0,255,100,0.5)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(0,255,100,0.5)" |
||||||
|
} |
||||||
|
]) |
||||||
|
}, |
||||||
|
//上班截开始 |
||||||
|
data: [{ |
||||||
|
"name": "关井数", |
||||||
|
"value": "220", |
||||||
|
"trueVal": "22", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
"color": { |
||||||
|
"x": 0, |
||||||
|
"y": 0, |
||||||
|
"x2": 0, |
||||||
|
"y2": 1, |
||||||
|
"type": "linear", |
||||||
|
"global": false, |
||||||
|
"colorStops": [{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(54,127,223,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(94,162,254,1)" |
||||||
|
}], |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
"name": "开井数", |
||||||
|
"value": "182", |
||||||
|
"trueVal": "18", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
"color": { |
||||||
|
"x": 0, |
||||||
|
"y": 0, |
||||||
|
"x2": 0, |
||||||
|
"y2": 1, |
||||||
|
"type": "linear", |
||||||
|
"global": false, |
||||||
|
"colorStops": [{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(54,127,223,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(94,162,254,1)" |
||||||
|
}], |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
"name": "不在线", |
||||||
|
"value": "191", |
||||||
|
"trueVal": "19", |
||||||
|
"itemStyle": { |
||||||
|
"normal": { |
||||||
|
"color": { |
||||||
|
"x": 0, |
||||||
|
"y": 0, |
||||||
|
"x2": 0, |
||||||
|
"y2": 1, |
||||||
|
"type": "linear", |
||||||
|
"global": false, |
||||||
|
"colorStops": [{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(54,127,223,1)" |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(94,162,254,1)" |
||||||
|
}], |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
] |
||||||
|
} |
||||||
|
; |
||||||
|
myChart.setOption(option); |
||||||
|
}, |
||||||
|
initEcharts2() { |
||||||
|
var myChart = echarts.init(document.getElementById("echarts2")); |
||||||
|
let index = 0; |
||||||
|
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'] |
||||||
|
function fun() { |
||||||
|
var timer = setInterval(function () { |
||||||
|
myChart.dispatchAction({ |
||||||
|
type: 'hideTip', |
||||||
|
seriesIndex: 0, |
||||||
|
dataIndex: index |
||||||
|
}); |
||||||
|
// 显示提示框 |
||||||
|
myChart.dispatchAction({ |
||||||
|
type: 'showTip', |
||||||
|
seriesIndex: 0, |
||||||
|
dataIndex: index |
||||||
|
}); |
||||||
|
// 取消高亮指定的数据图形 |
||||||
|
myChart.dispatchAction({ |
||||||
|
type: 'downplay', |
||||||
|
seriesIndex: 0, |
||||||
|
dataIndex: index == 0 ? 5 : index - 1 |
||||||
|
}); |
||||||
|
myChart.dispatchAction({ |
||||||
|
type: 'highlight', |
||||||
|
seriesIndex: 0, |
||||||
|
dataIndex: index |
||||||
|
}); |
||||||
|
index++; |
||||||
|
if (index > 5) { |
||||||
|
index = 0; |
||||||
|
} |
||||||
|
}, 3000) |
||||||
|
} |
||||||
|
|
||||||
|
fun() |
||||||
|
setTimeout(function () { fun() }, 5000); |
||||||
|
let option = { |
||||||
|
title: { |
||||||
|
text: '申请价值', |
||||||
|
x: 'center', |
||||||
|
y: 'center', |
||||||
|
textStyle: { |
||||||
|
fontSize: 20 |
||||||
|
} |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item' |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
type: 'pie', |
||||||
|
center: ['50%', '50%'], |
||||||
|
radius: ['24%', '45%'], |
||||||
|
clockwise: true, |
||||||
|
avoidLabelOverlap: true, |
||||||
|
hoverOffset: 15, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
color: function (params) { |
||||||
|
return colorList[params.dataIndex] |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
position: 'outside', |
||||||
|
formatter: '{a|{b}:{d}%}\n{hr|}', |
||||||
|
rich: { |
||||||
|
hr: { |
||||||
|
backgroundColor: 't', |
||||||
|
borderRadius: 3, |
||||||
|
width: 3, |
||||||
|
height: 3, |
||||||
|
padding: [3, 3, 0, -12] |
||||||
|
}, |
||||||
|
a: { |
||||||
|
padding: [-30, 15, -20, 15] |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
normal: { |
||||||
|
length: 20, |
||||||
|
length2: 30, |
||||||
|
lineStyle: { |
||||||
|
width: 1 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
data: [{ |
||||||
|
'name': '全部', |
||||||
|
'value': 1.45 |
||||||
|
}, { |
||||||
|
'name': '易耗品', |
||||||
|
'value': 2.93 |
||||||
|
}, { |
||||||
|
'name': '耐用品', |
||||||
|
'value': 3.15 |
||||||
|
}, |
||||||
|
], |
||||||
|
}] |
||||||
|
}; |
||||||
|
myChart.setOption(option); |
||||||
|
}, |
||||||
|
initEcharts3() { |
||||||
|
var myChart = echarts.init(document.getElementById("echarts3")); |
||||||
|
var data = ["物品1", "物品2", "物品3", "物品4"] |
||||||
|
|
||||||
|
let option = { |
||||||
|
backgroundColor: '#fff', |
||||||
|
color: [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
||||||
|
offset: 0, |
||||||
|
color: "#13ace8" |
||||||
|
}, { |
||||||
|
offset: 1, |
||||||
|
color: "#0167e8" |
||||||
|
}], false)], |
||||||
|
grid: { |
||||||
|
left: '8%', |
||||||
|
right: '10%', |
||||||
|
top: '12%', |
||||||
|
bottom: '18%', |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
show: "true", |
||||||
|
trigger: 'axis', |
||||||
|
axisPointer: { |
||||||
|
type: 'shadow' |
||||||
|
} |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
|
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
lineStyle: { |
||||||
|
color: '#ccc', |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: true, |
||||||
|
color: "#ccc", |
||||||
|
fontSize: 18 |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
type: 'dashed' |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
xAxis: [{ |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
|
||||||
|
type: 'category', |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: true, |
||||||
|
color: '#ccc', |
||||||
|
interval: 0, |
||||||
|
formatter: function (value) { |
||||||
|
return value.split("").join("\n"); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
lineStyle: { |
||||||
|
type: 'dashed' |
||||||
|
} |
||||||
|
}, |
||||||
|
data: data, |
||||||
|
}], |
||||||
|
series: [{ |
||||||
|
name: '违规', |
||||||
|
type: 'bar', |
||||||
|
barWidth: 15, |
||||||
|
label: { |
||||||
|
normal: { |
||||||
|
show: false, |
||||||
|
position: 'right', |
||||||
|
textStyle: { |
||||||
|
color: "#ccc", |
||||||
|
fontSize: 14 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
// barBorderRadius: [0, 0, 5, 0], |
||||||
|
} |
||||||
|
}, |
||||||
|
data: [50, 60, 70, 80] |
||||||
|
}] |
||||||
|
}; |
||||||
|
myChart.setOption(option); |
||||||
|
}, |
||||||
|
initEcharts4(xdata, ydata) { |
||||||
|
var myChart = echarts.init(document.getElementById("echarts4")); |
||||||
|
// var data = ["2022年", "2023年", "2024年", "2025年"] |
||||||
|
var data = xdata |
||||||
|
|
||||||
|
let option = { |
||||||
|
backgroundColor: '#fff', |
||||||
|
color: [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
||||||
|
offset: 0, |
||||||
|
color: "#13ace8" |
||||||
|
}, { |
||||||
|
offset: 1, |
||||||
|
color: "#0167e8" |
||||||
|
}], false)], |
||||||
|
grid: { |
||||||
|
left: '8%', |
||||||
|
right: '10%', |
||||||
|
top: '12%', |
||||||
|
bottom: '18%', |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
show: "true", |
||||||
|
trigger: 'axis', |
||||||
|
axisPointer: { |
||||||
|
type: 'shadow' |
||||||
|
} |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
|
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
lineStyle: { |
||||||
|
color: '#ccc', |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: true, |
||||||
|
color: "#ccc", |
||||||
|
fontSize: 18 |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
type: 'dashed' |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
xAxis: [{ |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
|
||||||
|
type: 'category', |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: true, |
||||||
|
color: '#ccc', |
||||||
|
interval: 0, |
||||||
|
formatter: function (value) { |
||||||
|
return value.split("").join("\n"); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
lineStyle: { |
||||||
|
type: 'dashed' |
||||||
|
} |
||||||
|
}, |
||||||
|
data: data, |
||||||
|
}], |
||||||
|
series: [{ |
||||||
|
name: '价值', |
||||||
|
type: 'bar', |
||||||
|
barWidth: 15, |
||||||
|
label: { |
||||||
|
normal: { |
||||||
|
show: false, |
||||||
|
position: 'right', |
||||||
|
textStyle: { |
||||||
|
color: "#ccc", |
||||||
|
fontSize: 14 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
// barBorderRadius: [0, 0, 5, 0], |
||||||
|
} |
||||||
|
}, |
||||||
|
data: ydata |
||||||
|
}] |
||||||
|
}; |
||||||
|
myChart.setOption(option); |
||||||
|
}, |
||||||
|
|
||||||
|
onSubmit() { |
||||||
|
this.$message({ |
||||||
|
message: '操作成功', |
||||||
|
type: 'success' |
||||||
|
}); |
||||||
|
}, |
||||||
|
changeSelect(value) { |
||||||
|
if (this.value2 == '年度') { |
||||||
|
this.initEcharts4(["2022年", "2023年", "2024年", "2025年"], [23, 78, 87, 90]) |
||||||
|
} |
||||||
|
if (this.value2 == '季度') { |
||||||
|
this.initEcharts4(["一季度", "二季度", "三季度", "四季度"], [23, 28, 97, 40]) |
||||||
|
} |
||||||
|
if (this.value2 == '月份') { |
||||||
|
this.initEcharts4(["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], [23, 28, 97, 40, 32, 56, 78, 69, 45, 32, 98, 84]) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
::v-deep .el-card__body { |
||||||
|
// background: #000; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue