You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
8.6 KiB
237 lines
8.6 KiB
<template>
|
|
<view>
|
|
<Tabs :tabList="tabList" @tabChange="tabChange" />
|
|
|
|
<view class="requirementAnalysis">
|
|
<ec-canvas id="requirementAnalysis" canvas-id="requirementAnalysis" :ec="ec"></ec-canvas>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Tabs from '../../../../components/Tabs';
|
|
import ecCanvas from '../../../../ec-canvas/ec-canvas';
|
|
import * as echarts from '../../../../static/echarts.js';
|
|
import { commonDemandCountByCategory, countByCategory, event12345Group } from '../../../../utils/statisticsApi';
|
|
var chart;
|
|
const formatTime = (date) => {
|
|
const year = date.getFullYear();
|
|
const month = date.getMonth() + 1;
|
|
const day = date.getDate();
|
|
return [year, month, day].map(formatNumber).join('-');
|
|
};
|
|
const formatNumber = (n) => {
|
|
n = n.toString();
|
|
return n[1] ? n : '0' + n;
|
|
};
|
|
export default {
|
|
components: {
|
|
Tabs,
|
|
ecCanvas
|
|
},
|
|
data() {
|
|
return {
|
|
ec: {
|
|
lazyLoad: true
|
|
// onInit: initChart
|
|
},
|
|
|
|
tabList: [
|
|
{
|
|
label: '个性需求',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '共性需求',
|
|
value: 2
|
|
}
|
|
],
|
|
tabValue: 1
|
|
};
|
|
},
|
|
props: {
|
|
typeCondition: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
// 处理小程序 ready 生命周期
|
|
this.$nextTick(() => this.ready());
|
|
},
|
|
methods: {
|
|
ready() {
|
|
this.getData();
|
|
},
|
|
|
|
tabChange({ detail }) {
|
|
this.setData({
|
|
tabValue: this.tabList[detail].value
|
|
});
|
|
this.getData();
|
|
},
|
|
|
|
getData() {
|
|
this.zpSelectComponent('#requirementAnalysis').init((canvas, width, height, dpr) => {
|
|
chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr // 像素比
|
|
});
|
|
|
|
canvas.setChart(chart);
|
|
let params = {
|
|
monthTime: 12
|
|
};
|
|
if (this.tabValue === 1) {
|
|
countByCategory(params).then(({ data }) => {
|
|
data = data.map((item) => {
|
|
return {
|
|
name: item.categoryName,
|
|
value: item.cateTotal
|
|
};
|
|
});
|
|
let color = ['#4F94FF', '#A182FB', '#27D1A7', '#FCBF06', '#FF7108'];
|
|
var option = {
|
|
color,
|
|
tooltip: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#000',
|
|
fontSize: 14
|
|
},
|
|
formatter(params) {
|
|
// console.log(params)
|
|
if (params.name === '') {
|
|
return '';
|
|
}
|
|
return `${params.name} : ${params.percent}%`;
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
center: ['50%', '50%'],
|
|
// 修改为居中
|
|
avoidLabelOverlap: true,
|
|
label: {
|
|
color: '#333333',
|
|
alignTo: 'labelLine',
|
|
formatter: '{num|{c}}\n{name|{b}}',
|
|
minMargin: 5,
|
|
edgeDistance: 10,
|
|
lineHeight: 15,
|
|
rich: {
|
|
num: {
|
|
fontSize: 17,
|
|
color: '#333333'
|
|
},
|
|
zb: {
|
|
fontSize: 14,
|
|
color: '#333333'
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
length: 15,
|
|
length2: 0,
|
|
maxSurfaceAngle: 80
|
|
},
|
|
data: data
|
|
}
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
});
|
|
} else {
|
|
commonDemandCountByCategory(params).then(({ data }) => {
|
|
data = data.map((item) => {
|
|
return {
|
|
name: item.categoryName,
|
|
value: item.cateTotal
|
|
};
|
|
});
|
|
let color = ['#4F94FF', '#A182FB', '#27D1A7', '#FCBF06', '#FF7108'];
|
|
var option = {
|
|
color,
|
|
tooltip: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
},
|
|
formatter(params) {
|
|
// console.log(params)
|
|
if (params.name === '') {
|
|
return '';
|
|
}
|
|
return `${params.name} : ${params.percent}%`;
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
center: ['50%', '50%'],
|
|
// 修改为居中
|
|
avoidLabelOverlap: true,
|
|
label: {
|
|
color: '#333333',
|
|
alignTo: 'labelLine',
|
|
formatter: '{num|{c}}\n{name|{b}}',
|
|
minMargin: 5,
|
|
edgeDistance: 10,
|
|
lineHeight: 15,
|
|
rich: {
|
|
num: {
|
|
fontSize: 17,
|
|
color: '#333333'
|
|
},
|
|
zb: {
|
|
fontSize: 14,
|
|
color: '#333333'
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
length: 15,
|
|
length2: 0,
|
|
maxSurfaceAngle: 80
|
|
},
|
|
data: data
|
|
}
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
});
|
|
}
|
|
return chart;
|
|
});
|
|
}
|
|
},
|
|
created: function () {},
|
|
watch: {
|
|
typeCondition: {
|
|
handler: function (val) {
|
|
console.log(val, 11);
|
|
this.getData();
|
|
},
|
|
|
|
immediate: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
ec-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.requirementAnalysis {
|
|
width: 100%;
|
|
height: 318rpx;
|
|
}
|
|
</style>
|
|
|