chenrui
/
zdxtLawEnforcementCodeView
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

统计分析去掉点击效果

master
蟑螂恶霸 2 years ago
parent
e0747fac1f
commit
4c104d1224
1 changed files with 502 additions and 486 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 160
      src/views/common/analyse.vue

160
src/views/common/analyse.vue
View File

@ -42,47 +42,53 @@
<script setup name="addressEdit"> <script setup name="addressEdit">
import { onBeforeUnmount } from 'vue'; import {onBeforeUnmount} from 'vue';
import util from "@/util/area"; import util from "@/util/area";
import {queryStatisticalData} from '@/api/enforce'; import {queryStatisticalData} from '@/api/enforce';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
const { useCommon, useShopCard } = $globalStore;
const router = useRouter(); const {useCommon, useShopCard} = $globalStore;
const route = useRoute(); const router = useRouter();
let queryaddressId = ref(""); const route = useRoute();
const data = reactive({ let queryaddressId = ref("");
const data = reactive({
searchResult: [], searchResult: [],
areaList: util.areaList, areaList: util.areaList,
addressInfo: {}, addressInfo: {},
areaColumns: ["请选择", "请选择", "请选择"], areaColumns: ["请选择", "请选择", "请选择"],
allTotal: 0, allTotal: 0,
complaintCount: 0 complaintCount: 0
}); });
// 返回 // 返回
const goBack = () => { const goBack = () => {
router.go(-1); router.go(-1);
}; };
onBeforeUnmount(() => { onBeforeUnmount(() => {
// 当前路由不是首页，且用户确认离开时 // 当前路由不是首页，且用户确认离开时
router.replace('/enforceHome'); // 替换到首页 router.replace('/enforceHome'); // 替换到首页
}); });
onUnmounted(() => {
console.log("=============销毁完毕=============")
});
// 保存地址操作 // 保存地址操作
const onSave = () => { const onSave = () => {
router.replace({ name: "addressList" }); router.replace({name: "addressList"});
}; };
// 删除地址操作 // 删除地址操作
const onDelete = () => { const onDelete = () => {
router.replace({ name: "addressList" }); router.replace({name: "addressList"});
}; };
// 修改详细地址 // 修改详细地址
const onChangeDetail = () => {}; const onChangeDetail = () => {
};
const echartInit = (data,targetId) =>{ const echartInit = (data, targetId) => {
var myChart = echarts.init(document.getElementById(targetId)); var myChart = echarts.init(document.getElementById(targetId));
// 指定图表的配置项和数据 // 指定图表的配置项和数据
let option = { let option = {
@ -93,6 +99,7 @@ const echartInit = (data,targetId) =>{
{ {
name: '统计图表', name: '统计图表',
type: 'pie', type: 'pie',
silent: true, // 设置所有的点击事件为静默模式
radius: ['33%', '50%'], radius: ['33%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
@ -126,15 +133,15 @@ const echartInit = (data,targetId) =>{
}, },
// ... 其他配置项 // ... 其他配置项
data: data, data: data,
color: ['#0038bb','#0047eb','#1c60ff','#3f78ff','#6592ff','#8aadff'], color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#8aadff'],
} }
] ]
}; };
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(option);
}; };
const initSchedule = (dataAll,targetId) =>{ const initSchedule = (dataAll, targetId) => {
let _this = this; let _this = this;
var myChartLine = echarts.init(document.getElementById(targetId)); var myChartLine = echarts.init(document.getElementById(targetId));
let myColor = ['#3C83FF'] let myColor = ['#3C83FF']
@ -183,7 +190,7 @@ const initSchedule = (dataAll,targetId) =>{
axisLabel: { axisLabel: {
color: 'rgba(0,0,0,.7)', color: 'rgba(0,0,0,.7)',
fontSize: 14, fontSize: 14,
formatter: function(data) { formatter: function (data) {
var traceValue; var traceValue;
for (var i = 0; i < dataAll.dataX.length; i++) { for (var i = 0; i < dataAll.dataX.length; i++) {
if (data === dataAll.dataX[i]) { if (data === dataAll.dataX[i]) {
@ -234,6 +241,7 @@ const initSchedule = (dataAll,targetId) =>{
{ {
name: '', //系列名称 name: '', //系列名称
type: 'bar', //柱状、条形图 type: 'bar', //柱状、条形图
silent: true, // 设置所有柱子的点击事件为静默模式
barWidth: 15, //柱条的宽度,默认自适应 barWidth: 15, //柱条的宽度,默认自适应
data: dataAll.dataPercent, //系列中数据内容数组 data: dataAll.dataPercent, //系列中数据内容数组
label: { //图形上的文本标签 label: { //图形上的文本标签
@ -241,7 +249,7 @@ const initSchedule = (dataAll,targetId) =>{
position: 'right', //标签的位置 position: 'right', //标签的位置
offset: [0, 40], //标签文字的偏移，此处表示向上偏移40 offset: [0, 40], //标签文字的偏移，此处表示向上偏移40
//formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值 //formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
formatter: function(data) { formatter: function (data) {
//.toFixed(0)去掉小数位，如果为2就是保留两位小数 //.toFixed(0)去掉小数位，如果为2就是保留两位小数
//let b = data.percent.toFixed(0) + "%"; //let b = data.percent.toFixed(0) + "%";
//subText = b; //subText = b;
@ -256,7 +264,7 @@ const initSchedule = (dataAll,targetId) =>{
barBorderRadius: 10, //柱条圆角半径,单位px. barBorderRadius: 10, //柱条圆角半径,单位px.
//此处统一设置4个角的圆角大小; //此处统一设置4个角的圆角大小;
//也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下 //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
color: function(params) { color: function (params) {
let num = myColor.length; //得到myColor颜色数组的长度 let num = myColor.length; //得到myColor颜色数组的长度
return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值 return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值
}, },
@ -268,12 +276,13 @@ const initSchedule = (dataAll,targetId) =>{
{ {
name: '', name: '',
type: 'bar', type: 'bar',
silent: true, // 设置所有柱子的点击事件为静默模式
label: { //图形上的文本标签 label: { //图形上的文本标签
show: true, show: true,
position: 'right', //标签的位置 position: 'right', //标签的位置
offset: [0, 0], //标签文字的偏移，此处表示向上偏移40 offset: [0, 0], //标签文字的偏移，此处表示向上偏移40
//formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值 //formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
formatter: function(data) { formatter: function (data) {
//.toFixed(0)去掉小数位，如果为2就是保留两位小数 //.toFixed(0)去掉小数位，如果为2就是保留两位小数
var traceValue; var traceValue;
for (var i = 0; i < dataAll.dataX.length; i++) { for (var i = 0; i < dataAll.dataX.length; i++) {
@ -323,9 +332,9 @@ const initSchedule = (dataAll,targetId) =>{
] ]
}; };
myChartLine.setOption(option, true); myChartLine.setOption(option, true);
}; };
const initData = (dataX,dataY,dataPercent,targetId) => { const initData = (dataX, dataY, dataPercent, targetId) => {
// var dataX = ['生态环境检查', '卫生健康检查', '商务领域检查', '财务领域检查', '水务领域检查'] // var dataX = ['生态环境检查', '卫生健康检查', '商务领域检查', '财务领域检查', '水务领域检查']
@ -338,19 +347,19 @@ const initData = (dataX,dataY,dataPercent,targetId) => {
dataSum: dataSum, dataSum: dataSum,
dataPercent: dataPercent, dataPercent: dataPercent,
} }
initSchedule(data,targetId); initSchedule(data, targetId);
}; };
onMounted(() => { onMounted(() => {
queryStatisticalData({ queryStatisticalData({
"dataScopeId": useCommon.userId "dataScopeId": useCommon.userId
},success =>{ }, success => {
var arrData = []; var arrData = [];
var arrCompanyData = []; var arrCompanyData = [];
var countTotal= 0; var countTotal = 0;
var userTotal= 0; var userTotal = 0;
//执法类别参数 //执法类别参数
var dataX = []; var dataX = [];
var dataY = []; var dataY = [];
@ -365,13 +374,13 @@ onMounted(() => {
console.log(success.data.item) console.log(success.data.item)
success.data.item.forEach(res =>{ success.data.item.forEach(res => {
countTotal += res.total; countTotal += res.total;
}) })
success.data.lawEnforcer.forEach(res =>{ success.data.lawEnforcer.forEach(res => {
userTotal += res.total; userTotal += res.total;
}) })
success.data.item.forEach(res =>{ success.data.item.forEach(res => {
console.log(res) console.log(res)
arrData.push({ arrData.push({
"name": res.lawEnforcementItem, "name": res.lawEnforcementItem,
@ -382,14 +391,14 @@ onMounted(() => {
dataPercent.push((res.total / countTotal * 100).toFixed(2)); dataPercent.push((res.total / countTotal * 100).toFixed(2));
}) })
success.data.lawEnforcer.forEach(res =>{ success.data.lawEnforcer.forEach(res => {
console.log(res) console.log(res)
userDataX.push(res.lawEnforcer); userDataX.push(res.lawEnforcer);
userDataY.push(res.total); userDataY.push(res.total);
userDataPercent.push((res.total / userTotal * 100).toFixed(2)); userDataPercent.push((res.total / userTotal * 100).toFixed(2));
}) })
console.log(userDataPercent) console.log(userDataPercent)
success.data.enterpriseType.forEach(res =>{ success.data.enterpriseType.forEach(res => {
console.log(res) console.log(res)
arrCompanyData.push({ arrCompanyData.push({
"name": res.dictLabel, "name": res.dictLabel,
@ -408,34 +417,37 @@ onMounted(() => {
}) })
nextTick(() => { nextTick(() => {
echartInit(arrData,'echartRing'); echartInit(arrData, 'echartRing');
//执法类别统计 //执法类别统计
initData(dataX,dataY,dataPercent,"echartLine"); initData(dataX, dataY, dataPercent, "echartLine");
//执法人员 //执法人员
initData(userDataX,userDataY,userDataPercent,"echartLineUser"); initData(userDataX, userDataY, userDataPercent, "echartLineUser");
//企业类型统计 //企业类型统计
echartInit(arrCompanyData,'echartLineCompany'); echartInit(arrCompanyData, 'echartLineCompany');
//本月案件数量 //本月案件数量
echartInit(arrCountData,'echarCount'); echartInit(arrCountData, 'echarCount');
}); });
},error =>{}) }, error => {
})
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.address_edit { .address_edit {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: #ebf3fb; background-color: #ebf3fb;
} }
.warp_body {
.warp_body {
background-image: linear-gradient(to bottom, #ebf3fb, transparent); background-image: linear-gradient(to bottom, #ebf3fb, transparent);
} }
.countbox, .analybox {
.countbox, .analybox {
position: relative; position: relative;
margin: 2% 3%; margin: 2% 3%;
padding: 2% 0 0; padding: 2% 0 0;
@ -444,31 +456,32 @@ onMounted(() => {
background: #fff url("../../assets/images/bg_count.jpg") no-repeat right; background: #fff url("../../assets/images/bg_count.jpg") no-repeat right;
background-size: auto 100%; background-size: auto 100%;
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.countbox span { .countbox span {
display: block; display: block;
margin: 1.75% 4.5%; margin: 1.75% 4.5%;
color: #999; color: #999;
font-size: 0.3rem; font-size: 0.3rem;
line-height: 1.25; line-height: 1.25;
} }
.countbox span.count-tit { .countbox span.count-tit {
color: #666; color: #666;
font-size: 0.45rem; font-size: 0.45rem;
} }
.countbox span.count-tot { .countbox span.count-tot {
font-size: 0.3rem; font-size: 0.3rem;
b { b {
margin-right: 0.15rem; margin-right: 0.15rem;
color: #085dff; color: #085dff;
font-size: 0.85rem; font-size: 0.85rem;
} }
} }
.countbox span.count-com { .countbox span.count-com {
float: right; float: right;
margin-top: -0.1rem; margin-top: -0.1rem;
font-size: 0.3rem; font-size: 0.3rem;
@ -477,28 +490,31 @@ onMounted(() => {
font-size: 0.4rem; font-size: 0.4rem;
font-style: normal; font-style: normal;
} }
b{
b {
margin-right: 5px; margin-right: 5px;
color: #f00; color: #f00;
font-size: 0.6rem; font-size: 0.6rem;
} }
} }
.analybox { .analybox {
height: auto; height: auto;
min-height: 7rem; min-height: 7rem;
background: #fff none; background: #fff none;
.title { .title {
margin: 2% 2.5%; margin: 2% 2.5%;
font-size: 0.4rem; font-size: 0.4rem;
font-weight: 600; font-weight: 600;
} }
} }
.chartbox {
.chartbox {
margin: 2% 5% 3%; margin: 2% 5% 3%;
width: 90%; width: 90%;
height: 7rem; height: 7rem;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save