williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

质量管理

Browse Source
This commit is contained in:
熊丽君
2021-12-10 19:19:57 +08:00
parent 3559204535
commit 2c509f3c1c
43 changed files with 4049 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
src/views/bigScreen/qualityManage/bottom1.vue Normal file
View File

@ -0,0 +1,382 @@
<template>
<div>
<container4 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>
</container4>
</div>
</template>
<script>
import container4 from "../components/container4/index.vue";
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
mixins: [resize],
name: 'bottom1',
components: {
container4,
},
data () {
return {
dateRange: [],
chart: null,
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);
}
return res;
}
},
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)',
},
// label: {
// show : true,
// position : 'top',
// formatter : "{c}",
// textStyle : {
// color: '#fff'
// }
// }
},
{
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: ['55%', '65%'],
// center: ['75%', '50%'],
// roseType: 'area',
// itemStyle: {
// borderRadius: 5,
// color: 'rgb(245,217,126)',
// },
// data: [
// { value: 30, name: '目标' },
// ],
// label: {
// formatter: '{b}：{c}',
// },
// labelLine: {
// showAbove: true,
// length: -60,
// length2: 145,
// }
// // label: {
// // fontSize: 14,
// // position: 'outer',
// // alignTo: 'edge',
// // margin: 10,
// // },
// // labelLine: {
// // showAbove: true,
// // }
// },
//进度线
// {
// type: "pie",
// radius: ['55%', '65%'],
// center: ['75%', '50%'],
// itemStyle: {
// borderRadius: 5,
// color: 'rgb(245,217,126)',
// },
// hoverAnimation: false,
// clockwise: false,
// data: [
// {
// name: "",
// value: 80, //进度
// labelLine: {
// show: false
// },
// 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)"
// }
// }
// }
// ],
// label: {
// formatter: '{b}：{c}',
// },
// labelLine: {
// showAbove: true,
// length: -60,
// length2: 145,
// }
// },
{
name: '利润',
type: 'pie',
hoverAnimation: false,
radius: ['55%', '65%'],
center: ['75%', '50%'],
labelLine: {
length: 30
},
label: {
formatter: '{b}：{c}',
borderWidth: 1,
borderRadius: 4,
alignTo: 'edge',
margin: '10'
},
itemStyle: {
borderRadius: 5,
color: 'rgb(116,212,184)'
},
data: [
{ value: 10, name: '利润' },
{
//画剩余的刻度圆环
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)"
}
}
}
],
},
{
name: '目标',
type: 'pie',
hoverAnimation: false,
radius: ['40%', '50%'],
center: ['75%', '50%'],
labelLine: {
length: 30
},
label: {
formatter: '{b}：{c}',
borderWidth: 1,
borderRadius: 4,
alignTo: 'edge',
margin: '10'
},
itemStyle: {
borderRadius: 5,
color: 'rgb(245,217,126)'
},
data: [
{ value: 80, name: '目标' },
{
//画剩余的刻度圆环
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)"
}
}
}
],
},
{
name: '收入',
type: 'pie',
hoverAnimation: false,
radius: ['70%', '80%'],
center: ['75%', '50%'],
labelLine: {
length: 30
},
label: {
formatter: '{b}：{c}',
borderWidth: 1,
borderRadius: 4,
alignTo: 'edge',
margin: '10'
},
itemStyle: {
borderRadius: 5,
color: 'rgb(170,202,253)'
},
data: [
{ value: 60, name: '收入' },
{
//画剩余的刻度圆环
name: "",
value: 60,
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 () {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy () {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart () {
this.chart = echarts.init(this.$refs.chart, 'macarons');
this.chart.setOption(this.option);
}
}
}
</script>
<style lang="scss" scoped>
</style>