382 lines
10 KiB
Vue
382 lines
10 KiB
Vue
|
<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>
|