提交首页统计代码-liyuchen
This commit is contained in:
parent
b897b3bc61
commit
efbd270626
|
|
@ -16,3 +16,13 @@ export function review(data) {
|
|||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页 dashborad
|
||||
*/
|
||||
export function statistics(){
|
||||
return request({
|
||||
url: '/api/'+moduleName+'/ui/disasterInfo/statistics',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<div class="flex-auto">
|
||||
<span class="font30">{{ v.num1 }}</span>
|
||||
<span class="ml5 font16"
|
||||
:style="{ color: v.color1 }">{{ v.num2 }}%</span>
|
||||
:style="{ color: v.color1 }">{{ v.num2 }}</span>
|
||||
<div class="mt10">{{ v.num3 }}</div>
|
||||
</div>
|
||||
<div class="home-card-item-icon flex"
|
||||
|
|
@ -114,7 +114,7 @@ import * as echarts from 'echarts';
|
|||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
|
||||
import {statistics} from '/@/api/disasterInfo/index.js';
|
||||
// 定义变量内容
|
||||
const homeLineRef = ref();
|
||||
const homePieRef = ref();
|
||||
|
|
@ -125,6 +125,7 @@ const storesThemeConfig = useThemeConfig();
|
|||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state = reactive({
|
||||
|
||||
global: {
|
||||
homeChartOne: null,
|
||||
homeChartTwo: null,
|
||||
|
|
@ -134,8 +135,8 @@ const state = reactive({
|
|||
},
|
||||
homeOne: [
|
||||
{
|
||||
num1: '125,12',
|
||||
num2: '-12.32',
|
||||
num1: '',
|
||||
num2: '',
|
||||
num3: 'Number of Disaster Response Applications',
|
||||
num4: 'fa fa-meetup',
|
||||
color1: '#FF6462',
|
||||
|
|
@ -143,8 +144,8 @@ const state = reactive({
|
|||
color3: '--el-color-primary',
|
||||
},
|
||||
{
|
||||
num1: '653,33',
|
||||
num2: '+42.32',
|
||||
num1: '',
|
||||
num2: '',
|
||||
num3: 'Actual times of disaster response',
|
||||
num4: 'iconfont icon-ditu',
|
||||
color1: '#6690F9',
|
||||
|
|
@ -152,8 +153,8 @@ const state = reactive({
|
|||
color3: '--el-color-success',
|
||||
},
|
||||
{
|
||||
num1: '125,65',
|
||||
num2: '+17.32',
|
||||
num1: '',
|
||||
num2: '',
|
||||
num3: 'User Visits',
|
||||
num4: 'iconfont icon-zaosheng',
|
||||
color1: '#6690F9',
|
||||
|
|
@ -161,8 +162,8 @@ const state = reactive({
|
|||
color3: '--el-color-warning',
|
||||
},
|
||||
{
|
||||
num1: '520,43',
|
||||
num2: '-10.01',
|
||||
num1: '',
|
||||
num2: '',
|
||||
num3: 'Data downloads',
|
||||
num4: 'fa fa-github-alt',
|
||||
color1: '#FF6462',
|
||||
|
|
@ -235,7 +236,9 @@ const state = reactive({
|
|||
});
|
||||
|
||||
// 折线图
|
||||
const initLineChart = () => {
|
||||
const initLineChart = (xData,data) => {
|
||||
console.log(xData)
|
||||
console.log(data)
|
||||
if (!state.global.dispose.some((b) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
|
||||
state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
|
||||
const option = {
|
||||
|
|
@ -247,25 +250,25 @@ const initLineChart = () => {
|
|||
},
|
||||
grid: { top: 70, right: 20, bottom: 30, left: 30 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { data: ['预购队列', '最新成交价'], right: 0 },
|
||||
legend: { data: ['响应量'], right: 0 },
|
||||
xAxis: {
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
data: xData,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '价格',
|
||||
name: '响应量',
|
||||
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '预购队列',
|
||||
name: '响应量',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
|
||||
data: data,
|
||||
lineStyle: { color: '#fe9a8b' },
|
||||
itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
|
||||
areaStyle: {
|
||||
|
|
@ -275,57 +278,21 @@ const initLineChart = () => {
|
|||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '最新成交价',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
|
||||
lineStyle: { color: '#9E87FF' },
|
||||
itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#9E87FFb3' },
|
||||
{ offset: 1, color: '#9E87FF03' },
|
||||
]),
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.5,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#9E87FF' },
|
||||
{ offset: 0.4, color: '#9E87FF' },
|
||||
{ offset: 0.5, color: '#fff' },
|
||||
{ offset: 0.7, color: '#fff' },
|
||||
{ offset: 0.8, color: '#fff' },
|
||||
{ offset: 1, color: '#fff' },
|
||||
],
|
||||
},
|
||||
borderColor: '#9E87FF',
|
||||
borderWidth: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
state.global.homeChartOne.setOption(option);
|
||||
state.myCharts.push(state.global.homeChartOne);
|
||||
};
|
||||
//homePieRef 灾害发生区域占比 饼图
|
||||
const initPieChart = () => {
|
||||
const initPieChart = (data) => {
|
||||
if (!state.global.dispose.some((b) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
|
||||
state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme));
|
||||
var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
|
||||
var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
|
||||
var data = [];
|
||||
for (var i = 0; i < getname.length; i++) {
|
||||
data.push({ name: getname[i], value: getvalue[i] });
|
||||
}
|
||||
// var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
|
||||
// var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
|
||||
// var data = [];
|
||||
// for (var i = 0; i < getname.length; i++) {
|
||||
// data.push({ name: getname[i], value: getvalue[i] });
|
||||
// }
|
||||
const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
|
||||
const option = {
|
||||
backgroundColor: state.charts.bgColor,
|
||||
|
|
@ -387,11 +354,6 @@ const initPieChart = () => {
|
|||
type: 'pie',
|
||||
radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
},
|
||||
label: { show: true },
|
||||
labelLine: { show: true },
|
||||
data: data,
|
||||
|
|
@ -402,15 +364,16 @@ const initPieChart = () => {
|
|||
state.myCharts.push(state.global.homeChartTwo);
|
||||
};
|
||||
//homePieRef2 灾害类型占比 饼图
|
||||
const initPieChart2 = () => {
|
||||
const initPieChart2 = (data) => {
|
||||
console.log("pie2",data)
|
||||
if (!state.global.dispose.some((b) => b === state.global.homeChartFour)) state.global.homeChartFour.dispose();
|
||||
state.global.homeChartFour = markRaw(echarts.init(homePieRef2.value, state.charts.theme));
|
||||
var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
|
||||
var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
|
||||
var data = [];
|
||||
for (var i = 0; i < getname.length; i++) {
|
||||
data.push({ name: getname[i], value: getvalue[i] });
|
||||
}
|
||||
// var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
|
||||
// var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
|
||||
// var data = [];
|
||||
// for (var i = 0; i < getname.length; i++) {
|
||||
// data.push({ name: getname[i], value: getvalue[i] });
|
||||
// }
|
||||
const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
|
||||
const option = {
|
||||
backgroundColor: state.charts.bgColor,
|
||||
|
|
@ -472,11 +435,6 @@ const initPieChart2 = () => {
|
|||
type: 'pie',
|
||||
radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
},
|
||||
label: { show: true },
|
||||
labelLine: { show: true },
|
||||
data: data,
|
||||
|
|
@ -487,9 +445,9 @@ const initPieChart2 = () => {
|
|||
state.myCharts.push(state.global.homeChartFour);
|
||||
};
|
||||
// 柱状图
|
||||
const initBarChart = () => {
|
||||
const initBarChart = (xData,yData) => {
|
||||
if (!state.global.dispose.some((b) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
|
||||
state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme));
|
||||
state.global.homeCharThree = echarts.init(homeBarRef.value, state.charts.theme);
|
||||
const option = {
|
||||
backgroundColor: state.charts.bgColor,
|
||||
title: {
|
||||
|
|
@ -497,29 +455,19 @@ const initBarChart = () => {
|
|||
x: 'left',
|
||||
textStyle: { fontSize: '15', color: state.charts.color },
|
||||
},
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 },
|
||||
tooltip: { trigger: 'item', formatter: '{c}' },
|
||||
legend: { data: ['申请量'], top: 0 },
|
||||
grid: { top: 70, right: 80, bottom: 30, left: 80 },
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1km', '2km', '3km', '4km', '5km', '6km'],
|
||||
data: xData,
|
||||
boundaryGap: true,
|
||||
axisTick: { show: false },
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '供回温度(℃）',
|
||||
nameLocation: 'middle',
|
||||
nameTextStyle: { padding: [3, 4, 50, 6] },
|
||||
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: state.charts.color, formatter: '{value} ' },
|
||||
},
|
||||
{
|
||||
name: '压力值(Mpa)',
|
||||
nameLocation: 'middle',
|
||||
nameTextStyle: { padding: [50, 4, 5, 6] },
|
||||
splitLine: { show: false },
|
||||
|
|
@ -530,71 +478,10 @@ const initBarChart = () => {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: '供温',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: true,
|
||||
// 矢量画五角星
|
||||
symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
|
||||
symbolSize: 12,
|
||||
yAxisIndex: 0,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(250,180,101,0.3)' },
|
||||
{ offset: 1, color: 'rgba(250,180,101,0)' },
|
||||
]),
|
||||
shadowColor: 'rgba(250,180,101,0.2)',
|
||||
shadowBlur: 20,
|
||||
},
|
||||
itemStyle: { color: '#FF8000' },
|
||||
// data中可以使用对象，value代表相应的值，另外可加入自定义的属性
|
||||
data: [
|
||||
{ value: 1, stationName: 's1' },
|
||||
{ value: 3, stationName: 's2' },
|
||||
{ value: 4, stationName: 's3' },
|
||||
{ value: 9, stationName: 's4' },
|
||||
{ value: 3, stationName: 's5' },
|
||||
{ value: 2, stationName: 's6' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '回温',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: true,
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 12,
|
||||
yAxisIndex: 0,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(199, 237, 250,0.5)' },
|
||||
{ offset: 1, color: 'rgba(199, 237, 250,0.2)' },
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#3bbc86',
|
||||
},
|
||||
data: [
|
||||
{ value: 31, stationName: 's1' },
|
||||
{ value: 36, stationName: 's2' },
|
||||
{ value: 54, stationName: 's3' },
|
||||
{ value: 24, stationName: 's4' },
|
||||
{ value: 73, stationName: 's5' },
|
||||
{ value: 22, stationName: 's6' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '压力值(Mpa)',
|
||||
name: '申请量',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
yAxisIndex: 1,
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(108,80,243,0.3)' },
|
||||
|
|
@ -603,14 +490,7 @@ const initBarChart = () => {
|
|||
//柱状图圆角
|
||||
borderRadius: [30, 30, 0, 0],
|
||||
},
|
||||
data: [
|
||||
{ value: 11, stationName: 's1' },
|
||||
{ value: 34, stationName: 's2' },
|
||||
{ value: 54, stationName: 's3' },
|
||||
{ value: 39, stationName: 's4' },
|
||||
{ value: 63, stationName: 's5' },
|
||||
{ value: 24, stationName: 's6' },
|
||||
],
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -627,6 +507,81 @@ const initEchartsResizeFun = () => {
|
|||
}
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 设置表头
|
||||
* @param data
|
||||
*/
|
||||
const setHeadData = (data) => {
|
||||
state.homeOne[0].num1 = data.applyCount
|
||||
state.homeOne[1].num1 = data.actResponseNum
|
||||
state.homeOne[2].num1 = data.visitCount
|
||||
state.homeOne[3].num1 = data.downloadCount
|
||||
}
|
||||
/**
|
||||
* 设置发生区域灾害占比
|
||||
* @param data
|
||||
*/
|
||||
const setDisasterArea = (data) => {
|
||||
let arr = [];
|
||||
for(let [k , v] of Object.entries(data)){
|
||||
arr.push({ name: k, value: v});
|
||||
}
|
||||
initPieChart(arr);
|
||||
}
|
||||
/**
|
||||
* 设置灾害响应月份分布量
|
||||
* @param data
|
||||
*/
|
||||
const setResponseDisaster = (data) => {
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
data.forEach(item=>{
|
||||
for(let [k , v] of Object.entries(item)){
|
||||
xData.push(k);
|
||||
yData.push(v.value);
|
||||
}
|
||||
})
|
||||
initLineChart(xData,yData);
|
||||
}
|
||||
/**
|
||||
* 设置灾害申请月份分布量
|
||||
* @param data
|
||||
*/
|
||||
const setApplyDisaster = (data) => {
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
data.forEach(item=>{
|
||||
for(let [k , v] of Object.entries(item)){
|
||||
xData.push(k);
|
||||
yData.push(v.value);
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
initBarChart(xData,yData);
|
||||
}, 1000);
|
||||
}
|
||||
/**
|
||||
* 设置灾种数量占比
|
||||
* @param data
|
||||
*/
|
||||
const setDisasterType = (data) => {
|
||||
let arr = [];
|
||||
for(let [k , v] of Object.entries(data)){
|
||||
arr.push({ name: k, value: v});
|
||||
}
|
||||
initPieChart2(arr)
|
||||
}
|
||||
//获取控制台数据
|
||||
const getDashBoradData = () => {
|
||||
statistics().then(res=>{
|
||||
console.log(res);
|
||||
setHeadData(res.header);
|
||||
setDisasterArea(res.country);
|
||||
setResponseDisaster(res.responseMonth);
|
||||
setApplyDisaster(res.applyMonth);
|
||||
setDisasterType(res.disasterNum);
|
||||
})
|
||||
}
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResize = () => {
|
||||
window.addEventListener('resize', initEchartsResizeFun);
|
||||
|
|
@ -634,6 +589,7 @@ const initEchartsResize = () => {
|
|||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initEchartsResize();
|
||||
getDashBoradData();
|
||||
});
|
||||
// 由于页面缓存原因，keep-alive
|
||||
onActivated(() => {
|
||||
|
|
@ -655,13 +611,13 @@ watch(
|
|||
state.charts.bgColor = isIsDark ? 'transparent' : '';
|
||||
state.charts.color = isIsDark ? '#dadada' : '#303133';
|
||||
setTimeout(() => {
|
||||
initLineChart();
|
||||
//initLineChart();
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
initPieChart();
|
||||
//initPieChart();
|
||||
}, 700);
|
||||
setTimeout(() => {
|
||||
initPieChart2();
|
||||
//initPieChart2();
|
||||
}, 700);
|
||||
setTimeout(() => {
|
||||
initBarChart();
|
||||
|
|
|
|||
Loading…
Reference in New Issue