master
parent
3fe155ecda
commit
6b5341ec52
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="chartWrap"
|
||||
:style="{ width: width, height: height,'textAlign':'center',lineHeight: height,color:'#909399'}">
|
||||
<div v-if="showChart" ref="mybar"></div>
|
||||
<div v-else>暂无数据</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons')
|
||||
import resize from './mixins/resize'
|
||||
const animationDuration = 6000
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
//图表数据
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
//图表宽
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%",
|
||||
},
|
||||
//图表高
|
||||
height: {
|
||||
type: String,
|
||||
default: "350px",
|
||||
},
|
||||
//
|
||||
axisPointerType:{
|
||||
type: String,
|
||||
default: "shadow",
|
||||
},
|
||||
//图表颜色
|
||||
colors: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
"#5470c6",
|
||||
"#91cc75",
|
||||
"#fac858",
|
||||
"#ee6666",
|
||||
"#73c0de",
|
||||
"#3ba272",
|
||||
"#fc8452",
|
||||
"#9a60b4",
|
||||
"#ea7ccc",
|
||||
];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: "",
|
||||
showChart: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
// 监听图表变化重新渲染图表
|
||||
handler() {
|
||||
this.initChart(this.$refs.mybar, this.data);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 初始化渲染
|
||||
this.initChart(this.$refs.mybar, this.data);
|
||||
},
|
||||
methods: {
|
||||
initChart(dom, currentData) {
|
||||
if (Object.keys(currentData).length == 0) {
|
||||
console.log("123")
|
||||
this.showChart = false
|
||||
return
|
||||
}
|
||||
//清空重新渲染
|
||||
if (
|
||||
this.myChart != null &&
|
||||
this.myChart != "" &&
|
||||
this.myChart != undefined
|
||||
) {
|
||||
this.myChart.dispose(); //销毁
|
||||
}
|
||||
// this.myChart = this.$echarts.init(dom);
|
||||
this.myChart = echarts.init(this.$el, 'macarons')
|
||||
let option = this.option(currentData);
|
||||
this.myChart.setOption(option);
|
||||
|
||||
|
||||
},
|
||||
option(currentData) {
|
||||
let seriesList = currentData.list.map((item) => {
|
||||
return {
|
||||
name: item.name || "",
|
||||
type: item.type || "line", //不传默认为折线图
|
||||
data: item.data,
|
||||
...item
|
||||
};
|
||||
});
|
||||
// 返回echarts配置参数
|
||||
return {
|
||||
|
||||
grid: {
|
||||
left: '20',
|
||||
right: '20',
|
||||
top: '40',
|
||||
bottom: '20',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
color: this.colors, //自定义颜色
|
||||
legend: {},
|
||||
tooltip: { //提示框浮层内容格式器
|
||||
// trigger: "axis",
|
||||
// formatter: currentData.formatter, //自定义格式
|
||||
trigger: currentData.trigger||'axis',
|
||||
formatter:currentData.formatter,
|
||||
axisPointer: {
|
||||
type: this.axisPointerType,
|
||||
},
|
||||
textStyle: { //提示框内文字样式的设置
|
||||
align: 'left'
|
||||
}
|
||||
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [0, 0, 0, 0]
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: currentData.x, //横坐标数据
|
||||
splitArea: false,
|
||||
splitLine: false,
|
||||
axisLine: {
|
||||
show: currentData.xShow,
|
||||
lineStyle: {
|
||||
color: "#338de3", //x轴线颜色
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
toolbox: {},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate:currentData.rotate||'',
|
||||
show: true,
|
||||
splitNumber: 15,
|
||||
textStyle: {
|
||||
color: "rgba(122,122,122,1)",
|
||||
fontSize: "14",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitArea: false,
|
||||
splitLine: false,
|
||||
// name: currentData.list[0].unit, //单位
|
||||
axisLabel: {
|
||||
formatter: "{value}", //显示格式
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(122,122,122,1)",
|
||||
fontSize: "12",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: currentData.yShow,
|
||||
lineStyle: {
|
||||
color: "#338de3", //y轴线颜色
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
// interval: 0
|
||||
},
|
||||
series: seriesList, //每一条配置
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.chartWrap {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,55 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,298 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="statistics">
|
||||
<!-- <panel-group :totaldata="list" /> -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts"
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import {
|
||||
getChartsHome
|
||||
} from "../../api/dashboard.js"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PanelGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
col: '',
|
||||
line: '',
|
||||
business_data: [],
|
||||
collect_data: [],
|
||||
list: {},
|
||||
customerArr: [],
|
||||
orderArr: [],
|
||||
chartData: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData(val, newval) {
|
||||
if (newval){
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
await getChartsHome().then((res) => {
|
||||
console.log(res);
|
||||
this.list = res.list;
|
||||
this.chartData = res;
|
||||
let _business_data = [];
|
||||
let _collect_data = [];
|
||||
res.business_data.map(item => {
|
||||
_business_data.push(item.server_money_total)
|
||||
_collect_data.push(item.collect_money)
|
||||
})
|
||||
this.business_data = _business_data;
|
||||
this.collect_data = _collect_data;
|
||||
let _customerArr = [];
|
||||
let _orderArr = [];
|
||||
|
||||
res.order_data.map(item => {
|
||||
_customerArr.push(item.active_customer)
|
||||
_orderArr.push(item.order_total)
|
||||
})
|
||||
this.customerArr = _customerArr;
|
||||
this.orderArr = _orderArr;
|
||||
}).catch()
|
||||
},
|
||||
init() {
|
||||
this.col = echarts.init(document.getElementById('col-chart'))
|
||||
this.col.setOption({
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
position: 'bottom'
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['第一周', '第二周', '第三周', '第四周']
|
||||
},
|
||||
series: [{
|
||||
name: '服务金额',
|
||||
type: 'bar',
|
||||
data: this.business_data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(42,182,252)'
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '收款',
|
||||
type: 'bar',
|
||||
data: this.collect_data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(34,228,255)'
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
this.line = echarts.init(document.getElementById('line-chart'))
|
||||
this.line.setOption({
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['活跃客户', '服务订单']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['第一周', '第二周', '第三周', '第四周']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [{
|
||||
name: '活跃客户',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: this.customerArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(42,182,252)'
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '服务订单',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: this.orderArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(34,228,255)'
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
//this.loadData();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
//this.init()
|
||||
|
||||
window.onresize = () => {
|
||||
this.col.resize()
|
||||
this.line.resize()
|
||||
}
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statistics {
|
||||
display: flex;
|
||||
|
||||
margin-top: 20px;
|
||||
|
||||
&-title {
|
||||
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
|
||||
&-top {
|
||||
|
||||
&__num {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 10px;
|
||||
color: rgb(140, 140, 140);
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-left {
|
||||
|
||||
&__num {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 10px;
|
||||
color: rgb(140, 140, 140);
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
|
||||
&__num {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 10px;
|
||||
color: rgb(140, 140, 140);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>div {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
display: flex;
|
||||
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
.chartItem {
|
||||
|
||||
width: 49%;
|
||||
|
||||
.chartItemTitle {
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#col-chart {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
min-height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#line-chart {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
<template>
|
||||
<div style="padding:20px 0">
|
||||
|
||||
<el-row :gutter="20" class='elrows'>
|
||||
<el-col :span="24">
|
||||
<PanelGroup :totaldata="list"></PanelGroup>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="chartSize">
|
||||
<div style="padding:10px;color:#b3241d;font-size:18px">月度上传档案统计</div>
|
||||
<myecharts :width="'100%'" :height="'300px'" :data="overall_month_data"></myecharts>
|
||||
</el-col>
|
||||
<el-col :span="12" class="chartSize">
|
||||
<div style="padding:10px;color:#b3241d;font-size:18px">组织档案统计</div>
|
||||
<myecharts :width="'100%'" :height="'300px'" :data="overall_originze_data"></myecharts>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myecharts from '@/components/myecharts';
|
||||
import PanelGroup from './components/PanelGroup';
|
||||
export default {
|
||||
components: {
|
||||
myecharts,
|
||||
PanelGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: {},
|
||||
overall_month_data: {},
|
||||
overall_originze_data: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
init() {
|
||||
this.overall_month_data = {
|
||||
xShow: true,
|
||||
yShow: true,
|
||||
rotate: 0,
|
||||
// formatter:function(params){
|
||||
// return that.chartFomatter(params)
|
||||
// },
|
||||
x: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
||||
list: [{
|
||||
name: "上传数",
|
||||
data: [3, 10, 12, 4, 20, 13, 1, 21, 8, 2, 1, 14],
|
||||
type: 'bar',
|
||||
barGap: '0%',
|
||||
}]
|
||||
}
|
||||
this.overall_originze_data = {
|
||||
trigger: 'item',
|
||||
xShow: false,
|
||||
yShow: false,
|
||||
list: [{
|
||||
name: '上传数',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
// center:['20%','20%'],
|
||||
data: [{
|
||||
value: 30,
|
||||
name: '集团'
|
||||
},
|
||||
{
|
||||
value: 22,
|
||||
name: '子公司'
|
||||
}
|
||||
],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.elrows {
|
||||
// margin: 0 !important;
|
||||
|
||||
.el-col {
|
||||
padding: 10px !important
|
||||
}
|
||||
|
||||
.chartSize {
|
||||
width: calc(50% - 20px)!important;
|
||||
margin: 10px!important;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue