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.
209 lines
7.8 KiB
209 lines
7.8 KiB
import * as echarts from '../../../../ec-canvas/echarts';
|
|
import {commonDemandCountByCategory, countByCategory, event12345Group} from "../../../../utils/statisticsApi";
|
|
|
|
var chart;
|
|
|
|
function initChart(canvas, width, height, dpr) {
|
|
chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr // 像素比
|
|
});
|
|
canvas.setChart(chart);
|
|
|
|
|
|
return 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
|
|
}
|
|
Component({
|
|
properties: {
|
|
typeCondition: {
|
|
type: Number,
|
|
value: 0,
|
|
observer(val) {
|
|
console.log(val, 11)
|
|
this.getData()
|
|
}
|
|
}
|
|
},
|
|
data: {
|
|
ec: {
|
|
lazyLoad: true
|
|
// onInit: initChart
|
|
},
|
|
tabList: [{
|
|
label: "个性需求",
|
|
value: 1
|
|
}, {
|
|
label: '共性需求',
|
|
value: 2
|
|
}],
|
|
tabValue: 1
|
|
},
|
|
lifetimes: {
|
|
ready() {
|
|
this.getData()
|
|
}
|
|
},
|
|
methods: {
|
|
tabChange({detail}) {
|
|
this.setData({
|
|
tabValue: this.data.tabList[detail].value
|
|
})
|
|
this.getData()
|
|
},
|
|
getData() {
|
|
this.selectComponent('#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.data.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;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|