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> |