326 lines
6.5 KiB
Vue
326 lines
6.5 KiB
Vue
<template>
|
||
<div>
|
||
<container2 title="经营责任书完成概况">
|
||
<div class="wrap">
|
||
<el-row class="content1">
|
||
<el-col :span="24">
|
||
<div id="left1" ref="left1" class="chart1"></div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="box">
|
||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||
<span>总完成任务/完成率</span>
|
||
<i class="num">55/80%</i>
|
||
<progressBar :percentage="70" />
|
||
</div>
|
||
</div>
|
||
</container2>
|
||
<container2 title="收入概况" style="margin-top: 10px">
|
||
<div style="height: 100%; width: 100%" ref="left2"></div>
|
||
<!-- <div class="wrap">
|
||
<el-row class="content2">
|
||
<el-col :span="24" style="height: 100%">
|
||
<div id="left2" ref="left2" class="chart2"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</div> -->
|
||
</container2>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import rocketTit from '../components/rocketTit/index.vue'
|
||
import container2 from './components/container2/index.vue'
|
||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||
import colorList from '@/utils/colorPalette'
|
||
// import {Liquid} from '@antv/g2plot';
|
||
// import resize from '../../dashboard/mixins/resize'
|
||
import echarts from 'echarts'
|
||
require('echarts/theme/macarons') // echarts theme
|
||
export default {
|
||
// mixins: [resize],
|
||
name: 'left1',
|
||
components: {
|
||
rocketTit,
|
||
container2,
|
||
bigScreenTabs,
|
||
progressBar,
|
||
},
|
||
data() {
|
||
return {
|
||
data: [
|
||
{ value: 154, name: '类别一' },
|
||
{ value: 775, name: '类别二' },
|
||
{ value: 679, name: '类别三' },
|
||
{ value: 679, name: '类别四' },
|
||
{ value: 679, name: '类别五' },
|
||
{ value: 679, name: '类别六' },
|
||
{ value: 679, name: '类别七' },
|
||
{ value: 679, name: '类别八' },
|
||
],
|
||
colorList,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.initChart()
|
||
this.initLine()
|
||
})
|
||
},
|
||
beforeDestroy() {},
|
||
methods: {
|
||
initChart() {
|
||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||
this.setOptions()
|
||
},
|
||
setOptions() {
|
||
const calcAverageValue = (data, name) => {
|
||
const items = data.filter(d => d.name === name)
|
||
return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-'
|
||
}
|
||
this.chart.setOption({
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||
},
|
||
color: this.colorList,
|
||
legend: {
|
||
data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
|
||
orient: 'vertical',
|
||
// left: '60%',
|
||
right: '2%',
|
||
y: 'center',
|
||
textStyle: {
|
||
//图例文字的样式
|
||
color: '#fff',
|
||
fontSize: 16,
|
||
},
|
||
// formatter: value => {
|
||
// return value + calcAverageValue(this.data, value)
|
||
// },
|
||
},
|
||
series: [
|
||
{
|
||
name: '概括',
|
||
type: 'pie',
|
||
radius: [0, '85%'],
|
||
center: ['35%', '50%'],
|
||
label: {
|
||
formatter: '',
|
||
position: 'inner',
|
||
fontSize: 14,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: this.data,
|
||
},
|
||
],
|
||
})
|
||
},
|
||
initLine() {
|
||
this.chart = echarts.init(this.$refs.left2)
|
||
this.setOptions2()
|
||
},
|
||
setOptions2() {
|
||
this.chart.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: '{a1}<br/>{b1}：{c1}',
|
||
},
|
||
legend: {
|
||
data: ['收入', '实际', '目标'],
|
||
textStyle: {
|
||
color: '#fff', //legend字体颜色
|
||
},
|
||
// selectedMode: false,
|
||
},
|
||
grid: {
|
||
containLabel: true,
|
||
left: 20,
|
||
right: 10,
|
||
top: 30,
|
||
bottom: 50,
|
||
},
|
||
xAxis: {
|
||
data: [
|
||
'2021-01',
|
||
'2021-02',
|
||
'2021-03',
|
||
'2021-04',
|
||
'2021-05',
|
||
'2021-06',
|
||
'2021-07',
|
||
'2021-08',
|
||
'2021-09',
|
||
'2021-10',
|
||
'2021-11',
|
||
'2021-12',
|
||
],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
dataZoom: {
|
||
type: 'slider',
|
||
start: 0,
|
||
end: 50,
|
||
},
|
||
color: ['#ccc', 'red'],
|
||
yAxis: [
|
||
{
|
||
name: '件',
|
||
splitLine: {
|
||
show: true,
|
||
// 改变轴线颜色
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: ['rgba(255, 255, 255,.5)'],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
min: 0,
|
||
max: 100,
|
||
interval: 20,
|
||
axisLabel: {
|
||
formatter: '{value} %',
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '收入',
|
||
type: 'bar',
|
||
z: '-1',
|
||
barGap: '-75%',
|
||
barWidth: 30,
|
||
itemStyle: {
|
||
color: 'rgba(85, 197, 162, .3)',
|
||
},
|
||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||
},
|
||
{
|
||
name: '实际',
|
||
type: 'bar',
|
||
barWidth: 15,
|
||
position: [0, 0],
|
||
itemStyle: {
|
||
color: 'rgba(90, 216, 166, 0.85)',
|
||
},
|
||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||
},
|
||
{
|
||
name: '目标',
|
||
type: 'scatter',
|
||
symbol: 'rect',
|
||
symbolSize: [30, 4],
|
||
symbolOffset: [3, 0],
|
||
position: [0, 0],
|
||
itemStyle: {
|
||
color: '#F6D97E',
|
||
},
|
||
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
||
},
|
||
],
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
width: 100%;
|
||
.box {
|
||
padding: 0 0 5px 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
.num {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content1 {
|
||
// height: 200px;
|
||
height: 100%;
|
||
|
||
.chart1 {
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
height: 192px;
|
||
background: transparent;
|
||
}
|
||
}
|
||
|
||
.num {
|
||
font-size: 30px;
|
||
font-family: Roboto-BlackItalic, Roboto;
|
||
font-weight: normal;
|
||
color: #91d5fe;
|
||
vertical-align: sub;
|
||
// margin-right: 3px;
|
||
}
|
||
|
||
.content2 {
|
||
padding: 20px;
|
||
flex: 1;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.chart2 {
|
||
height: 100%;
|
||
}
|
||
|
||
.tit {
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
line-height: 22px;
|
||
position: relative;
|
||
padding-left: 15px;
|
||
}
|
||
.tit::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 0px;
|
||
width: 4px;
|
||
height: 16px;
|
||
background: #00ffff;
|
||
}
|
||
}
|
||
</style>
|