You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
891 lines
23 KiB
891 lines
23 KiB
4 months ago
|
<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>
|