前端:代码(这个页面是另一个页面应用的组件)
```html
1.存放图表的位置
<template>
<div class="className" ref="ehartContent"></div>
</template>
<script>
export default {
name: 'maritalpie',
components: {},
props: {},
返回需要的数据列表
data() {
return {
worklifePieList:[]
}
},
watch: {},
mounted() {
this.init()
},
beforeDestroy() {},
methods: {
调用接口
init(){
this.getAxios(`/Echarts/WorklifePie`).then(res=>{
this.worklifePieList=res
调用图表刷新
this.drawChart()
})
},
图表整体方法(官网上可以直接引用)
drawChart() {
实例化
var myChart = this.$echarts.init(this.$refs.ehartContent)
var option = {
title: {
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
工具功能,可以下载图片,看数据
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: '工作年限状态公布',
type: 'pie',
color:['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#fb7293'],
radius: '70%',
center: ['50%', '50%'],
返回数据
data:this.worklifePieList,
emphasis: {
样式
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
调用
myChart.setOption(option)
}
}
}
</script>
<style lang="scss">
.className {
height: 600px;
background-color: whitesmoke;
border-radius: 0px,0px,10px,10px;
box-shadow: black;
padding: 10px;
}
</style>
后端:coreMvc框架
```html
/// <summary>
/// 婚姻状态分布
/// </summary>
/// <returns></returns>
public static List<DataResult> MaritalPie(IDatabase db,int tenantId, string fieldName)
{
//fieldName = "MaritalStatus";
List<DataResult> result = new List<DataResult>();
result.Add(new DataResult { name = "未婚", value = 0 });
result.Add(new DataResult { name = "已婚", value = 0 });
result.Add(new DataResult { name = "离异", value = 0 });
result.Add(new DataResult { name = "丧偶", value = 0 });
result.Add(new DataResult { name = "未知", value = 0 });
//List<StaffInfo> staffs = db.Fetch<StaffInfo>("SELECT t1.* FROM HR_StaffInfos t1 LEFT JOIN HR2_Staffs t2 ON t1.StaffId = t2.Id WHERE t1.TenantId = @0 AND t2.StaffStatus = 1", tenantId);
List<HrVData> staffs = HrVData.GetListByVule(db, tenantId, fieldName);
foreach (var item in staffs)
{
if (item.DataValue == "未婚")
{
int count = Convert.ToInt32(result[0].value);
count++;
result[0].value = count;
}
else if (item.DataValue == "已婚")
{
int count = Convert.ToInt32(result[1].value);
count++;
result[1].value = count;
}
else if (item.DataValue == "离异")
{
int count = Convert.ToInt32(result[2].value);
count++;
result[2].value = count;
}
else if (item.DataValue == "丧偶")
{
int count = Convert.ToInt32(result[3].value);
count++;
result[3].value = count;
}
else if (item.DataValue == null || item.DataValue == "" )
{
int count = Convert.ToInt32(result[4].value);
count++;
result[4].value = count;
}
}
return result;
}
/// <summary>
/// 图表
/// </summary>
/// <param name="db"></param>
/// <param name="tenantId"></param>
/// <param name="fieldName"></param>
/// <returns></returns>
public static List<HrVData> GetListByVule(IDatabase db, int tenantId, string fieldName)
{
var field = HRDPField.GetListByName(db, tenantId, fieldName);
if (field==null)
{
return new List<HrVData>();
}
var groupId = field.GroupId;
var fieldId = field.Id;
var sql1 = Sql.Builder.Append(@"SELECT t3.DataValue as DataValue FROM users t4
left join hr2_staffs t1 on t4.Id=t1.userId and IFNULL(t1.StaffStatus,0)!=2
left join hr2_vrow t2 on t1.id = t2.BizItemId and t2.GroupId = @1
LEFT JOIN hr2_vdata t3 on t3.ROWID = t2.id and t3.FieldId = @2
where t4.tenantId = @0 and t4.status>0 and
IFNULL(t4.UserType,0)=0 and IFNULL(t4.IsDeleted,0)=0 and t4.loginName!='admin'
", tenantId, groupId, fieldId);
// var sql1 = Sql.Builder.Append(@"SELECT t3.DataValue as DataValue FROM users t4
//left join hr2_staffs t1 on t4.Id=t1.userId
// left join hr2_vrow t2 on t1.id = t2.BizItemId
// LEFT JOIN hr2_vdata t3 on t3.ROWID = t2.id
// where t1.tenantId = @0 and t2.GroupId = @1 and
// IFNULL(t4.UserType,0)=0 and IFNULL(t1.StaffStatus,0)!=2 and t3.FieldId = @2", tenantId, groupId, fieldId);
return db.Fetch<HrVData>(sql1);
}