|
|
@@ -0,0 +1,261 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="spatial-analysis-statistic">
|
|
|
+ <div class="title">{{ title }}</div>
|
|
|
+ <div class="total-num">
|
|
|
+ <div class="label">总次数：</div>
|
|
|
+ <div class="data">{{ totalNum }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="echart-container" id="defect-column" ref="domRef"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ onMounted,
|
|
|
+ ref,
|
|
|
+ watch,
|
|
|
+ getCurrentInstance,
|
|
|
+ shallowRef,
|
|
|
+ onUnmounted,
|
|
|
+} from 'vue';
|
|
|
+import moment from 'moment';
|
|
|
+import { queryApiUseCountDays } from '/@/api/interface/interface';
|
|
|
+import {GetSRResourceGroup} from '/@/api/dashboard/index';
|
|
|
+const props = {
|
|
|
+ type: {
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'InterfaceEveryday',
|
|
|
+ components: {},
|
|
|
+ props,
|
|
|
+ setup(props) {
|
|
|
+ const data = reactive({
|
|
|
+ title: '组件支撑次数',
|
|
|
+ interval: null,
|
|
|
+ });
|
|
|
+ const totalNum = ref(1260);
|
|
|
+ const domRef = ref(null);
|
|
|
+ const { proxy } = getCurrentInstance();
|
|
|
+ const echarts = proxy.$echarts;
|
|
|
+ const mychart = shallowRef(null);
|
|
|
+ /**
|
|
|
+ * 查询统计数据
|
|
|
+ */
|
|
|
+ const queryData = async () => {
|
|
|
+ // const res = await queryApiUseCountDays()
|
|
|
+ // const res1 = await GetSRResourceGroup()
|
|
|
+ // console.log(res1)
|
|
|
+ let xAxisData = []
|
|
|
+ let seriesData = [40,35,42,45,48]
|
|
|
+ totalNum.value = seriesData.reduce((a, b) => a + b, 0)
|
|
|
+ // if (res.dateArr) {
|
|
|
+ // res.list.map(item => {
|
|
|
+ // seriesData.push(parseInt(item))
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ if (seriesData.length < 1) return;
|
|
|
+ const option = getOption(seriesData);
|
|
|
+ mychart.value.setOption(option, true);
|
|
|
+ };
|
|
|
+
|
|
|
+ const setEcharts = (option) => {
|
|
|
+ if (mychart.value) mychart.value.clear();
|
|
|
+ mychart.value = echarts.init(domRef.value);
|
|
|
+ //const option = getOption(seriesData,xAxisData);
|
|
|
+ window.onresize = () => {
|
|
|
+ mychart.value.resize();
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
+ const getOption = (seriesData) => {
|
|
|
+ const maxValue = Math.max.apply(null, seriesData);
|
|
|
+ const xAxisData = ['地图浏览工具', '服务加载工具', 'GIS功能工具', '空间分析工具', '三维可视化效果工具'];
|
|
|
+ const colorList = [
|
|
|
+ {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(6,113,221,1)', // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(6,113,221,0.9)', // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(6,113,221,0)', // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(237,172,75,1)', // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(237,172,75,0.9)', // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(237,172,75,0.2)', // 100% 处的颜色 'rgba(6,113,221,0.2)'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ return {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'none', // 'shadow',
|
|
|
+ },
|
|
|
+ formatter: (params) => {
|
|
|
+ return params[0].name + ': ' + params[0].value + '次';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '1%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ data: xAxisData,
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLine: { show: false },
|
|
|
+ axisLabel: {
|
|
|
+ interval:0,
|
|
|
+ // rotate:15,
|
|
|
+ color: '#000',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(222, 222, 222, 1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: {
|
|
|
+ splitLine: { show: false },
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLine: { show: false },
|
|
|
+ axisLabel: { show: true },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '调用次数',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '12',
|
|
|
+ data: seriesData,//[60, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220],
|
|
|
+ itemStyle: {
|
|
|
+ // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
|
|
+ normal: {
|
|
|
+ // 柱形图圆角，初始化效果
|
|
|
+ borderRadius: [15, 15, 0, 0],
|
|
|
+ color: (params) => {
|
|
|
+ let color = colorList[0];
|
|
|
+ if (params.data === maxValue) color = colorList[1];
|
|
|
+ return color;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ barGap: '0%',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ animationDuration: 0,//这里两个动画设置可以让图表更顺滑
|
|
|
+ animationEasing: 'cubicInOut'//这里两个动画设置可以让图表更顺滑
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ setEcharts();
|
|
|
+ queryData();
|
|
|
+ if (data.interval) return;
|
|
|
+ data.interval = setInterval(() => {
|
|
|
+ queryData();
|
|
|
+ }, 3000);
|
|
|
+ });
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ if (data.interval) clearInterval(data.interval);
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ totalNum,
|
|
|
+ domRef,
|
|
|
+ mychart,
|
|
|
+ ...toRefs(data),
|
|
|
+ queryData,
|
|
|
+ setEcharts,
|
|
|
+ getOption,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.spatial-analysis-statistic {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 1rem;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 1.2rem;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-size: 1.012rem;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: normal;
|
|
|
+ letter-spacing: 0em;
|
|
|
+ color: #3d3d3d;
|
|
|
+ margin-bottom: 1.2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-num {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-family: 思源黑体;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3D3D3D;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data {
|
|
|
+ font-family: 思源黑体;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #0671DD;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .echart-container {
|
|
|
+ height: calc(100% - 2.4rem);
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
XiaXxxxxx