新增日期选择
This commit is contained in:
parent
60f976adbc
commit
d53d4564ed
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
"@jiaminghi/data-view": "^2.10.0",
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
|
"@vuepic/vue-datepicker": "^7.4.0",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"echarts-gl": "^2.0.9",
|
"echarts-gl": "^2.0.9",
|
||||||
|
@ -827,6 +828,21 @@
|
||||||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
|
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
|
||||||
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
|
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@vuepic/vue-datepicker": {
|
||||||
|
"version": "7.4.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@vuepic/vue-datepicker/-/vue-datepicker-7.4.0.tgz",
|
||||||
|
"integrity": "sha512-dXYzbcnRet9b+Dkh+f8rhMnjj5QXgejJTQp+ZRALgwP2oeli2c8e4VvJ0NVxoc7QTU8D5x5Et8NP51C450Pkvg==",
|
||||||
|
"dependencies": {
|
||||||
|
"date-fns": "^2.30.0",
|
||||||
|
"date-fns-tz": "^1.3.7"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.12.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": ">=3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@xmldom/xmldom": {
|
"node_modules/@xmldom/xmldom": {
|
||||||
"version": "0.8.10",
|
"version": "0.8.10",
|
||||||
"resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
|
"resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
|
||||||
|
@ -951,6 +967,25 @@
|
||||||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
|
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
|
||||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||||
},
|
},
|
||||||
|
"node_modules/date-fns": {
|
||||||
|
"version": "2.30.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz",
|
||||||
|
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.21.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.11"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/date-fns-tz": {
|
||||||
|
"version": "1.3.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
|
||||||
|
"integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"date-fns": ">=2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/delayed-stream": {
|
"node_modules/delayed-stream": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
"@jiaminghi/data-view": "^2.10.0",
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
|
"@vuepic/vue-datepicker": "^7.4.0",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"echarts-gl": "^2.0.9",
|
"echarts-gl": "^2.0.9",
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 956 KiB After Width: | Height: | Size: 196 KiB |
|
@ -0,0 +1,230 @@
|
||||||
|
<script lang="ts">
|
||||||
|
/*
|
||||||
|
一个根节点时,禁用组件根节点自动继承 attribute,必须使用这种写法!然后在要继承 attribute 的节点上绑定 v-bind="$attrs" 即可
|
||||||
|
多个根节点时,只需在要继承 attribute 的节点上绑定 v-bind="$attrs" 即可
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
inheritAttrs: false,
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import VueDatePicker from "@vuepic/vue-datepicker";
|
||||||
|
import "@vuepic/vue-datepicker/dist/main.css";
|
||||||
|
import { computed, onMounted, ref } from "vue";
|
||||||
|
interface Props {
|
||||||
|
width?: number; // 日期选择器宽度
|
||||||
|
mode?: "time" | "date" | "week" | "month" | "year"; // 选择器模式,可选:时间time,日期date,周week,月month,年year
|
||||||
|
range: boolean; // 多选
|
||||||
|
// format?: string; // 日期展示格式,(y: 年, M: 月, d: 天, H: 时, m: 分, s: 秒)
|
||||||
|
showTime?: boolean; // 是否增加时间选择
|
||||||
|
showToday?: boolean; // 是否展示”今天“按钮
|
||||||
|
multiCalendars?: boolean; // 范围选择器是否使用双日期面板
|
||||||
|
// flow?: any[] // 定义选择顺序 ("calendar" | "time" | "month" | "year" | "minutes" | "hours" | "seconds")[]
|
||||||
|
// dark?: boolean // 样式主题是否使用黑色
|
||||||
|
modelType?: "timestamp" | "format"; // v-model 值类型,可选时间戳(timestamp)、字符串(format),mode为week和year时,该配置不生效
|
||||||
|
}
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
width: 290,
|
||||||
|
mode: "date",
|
||||||
|
/* format default
|
||||||
|
Single picker: 'MM/dd/yyyy HH:mm'
|
||||||
|
Range picker: 'MM/dd/yyyy HH:mm - MM/dd/yyyy HH:mm'
|
||||||
|
Month picker: 'MM/yyyy'
|
||||||
|
Time picker: 'HH:mm'
|
||||||
|
Time picker range: 'HH:mm - HH:mm'
|
||||||
|
*/
|
||||||
|
// format: "yyyy/MM/dd - yyyy/MM/dd",
|
||||||
|
showTime: false,
|
||||||
|
showToday: false,
|
||||||
|
multiCalendars: false,
|
||||||
|
range: false,
|
||||||
|
// flow: () => [],
|
||||||
|
// dark: false,
|
||||||
|
modelType: "format",
|
||||||
|
});
|
||||||
|
const time = computed(() => {
|
||||||
|
return props.mode === "time";
|
||||||
|
});
|
||||||
|
const week = computed(() => {
|
||||||
|
return props.mode === "week";
|
||||||
|
});
|
||||||
|
const month = computed(() => {
|
||||||
|
return props.mode === "month";
|
||||||
|
});
|
||||||
|
const year = computed(() => {
|
||||||
|
return props.mode === "year";
|
||||||
|
});
|
||||||
|
const format = (date: Date) => {
|
||||||
|
let day = date.getDate();
|
||||||
|
let month = date.getMonth() + 1;
|
||||||
|
let year = date.getFullYear();
|
||||||
|
return `${year}-${month.toString().padStart(2, "0")}-${day
|
||||||
|
.toString()
|
||||||
|
.padStart(2, "0")}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const datepicker = ref(null);
|
||||||
|
|
||||||
|
const date = ref("");
|
||||||
|
const startDate = ref("");
|
||||||
|
const endDate = ref("");
|
||||||
|
|
||||||
|
const handleDate = (e: any) => {
|
||||||
|
startDate.value = format(e[0]);
|
||||||
|
endDate.value = format(e[1]);
|
||||||
|
emit("changeTime", {
|
||||||
|
startDate: startDate.value,
|
||||||
|
endDate: endDate.value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const emit = defineEmits(["changeTime"]);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
handleDate([new Date(), new Date()]);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="m-datepicker" :style="`width: ${width}px;`">
|
||||||
|
<VueDatePicker
|
||||||
|
ref="datepicker"
|
||||||
|
locale="zh-CN"
|
||||||
|
v-model="date"
|
||||||
|
:multiCalendars="multiCalendars"
|
||||||
|
:range="range"
|
||||||
|
:month-change-on-scroll="false"
|
||||||
|
:enable-time-picker="showTime"
|
||||||
|
:time-picker="time"
|
||||||
|
:week-picker="week"
|
||||||
|
:month-picker="month"
|
||||||
|
:year-picker="year"
|
||||||
|
now-button-label="今天"
|
||||||
|
:show-now-button="showToday"
|
||||||
|
:auto-apply="true"
|
||||||
|
:dark="true"
|
||||||
|
:day-names="['一', '二', '三', '四', '五', '六', '日']"
|
||||||
|
v-bind="$attrs"
|
||||||
|
@update:model-value="handleDate"
|
||||||
|
>
|
||||||
|
<template #trigger>
|
||||||
|
<div class="trigger">
|
||||||
|
<span>{{ startDate }}</span>
|
||||||
|
<img class="icon" src="/src/assets/head_img/icon.png" alt="" />
|
||||||
|
<span>{{ endDate }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</VueDatePicker>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.m-datepicker {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trigger {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
.icon {
|
||||||
|
width: 0.8rem;
|
||||||
|
height: 2rem;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-size: 1rem !important;
|
||||||
|
border: 1px solid rgba(0, 168, 255, 0.88);
|
||||||
|
border-radius: 2rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.dp__theme_dark) {
|
||||||
|
--dp-background-color: #2c79af !important;
|
||||||
|
--dp-text-color: #fff;
|
||||||
|
--dp-hover-color: rgba(0, 168, 255, 1);
|
||||||
|
--dp-hover-text-color: #fff;
|
||||||
|
--dp-hover-icon-color: #959595;
|
||||||
|
--dp-primary-color: rgba(0, 168, 255, 1);
|
||||||
|
--dp-primary-disabled-color: #ccc;
|
||||||
|
--dp-primary-text-color: #fff;
|
||||||
|
--dp-secondary-color: #a9a9a9;
|
||||||
|
--dp-border-color: #2d2d2d;
|
||||||
|
--dp-menu-border-color: #2d2d2d;
|
||||||
|
--dp-border-color-hover: #aaaeb7;
|
||||||
|
--dp-disabled-color: #737373;
|
||||||
|
--dp-disabled-color-text: #d0d0d0;
|
||||||
|
--dp-scroll-bar-background: #212121;
|
||||||
|
--dp-scroll-bar-color: #484848;
|
||||||
|
--dp-success-color: #00701a;
|
||||||
|
--dp-success-color-disabled: #428f59;
|
||||||
|
--dp-icon-color: #959595;
|
||||||
|
--dp-danger-color: #e53935;
|
||||||
|
--dp-marker-color: #e53935;
|
||||||
|
--dp-tooltip-color: #3e3e3e;
|
||||||
|
--dp-highlight-color: rgb(0 92 178 / 20%);
|
||||||
|
--dp-range-between-dates-background-color: var(--dp-hover-color, #484848);
|
||||||
|
--dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);
|
||||||
|
--dp-range-between-border-color: var(--dp-hover-color, #fff);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.dp__btn.dp__month_year_select) {
|
||||||
|
padding: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(button) {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.dp__overlay_container.dp__container_block) {
|
||||||
|
height: 200px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.dp__cell_inner.dp__pointer.dp__range_between) {
|
||||||
|
border: none;
|
||||||
|
background-color: rgba(91, 219, 246, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(:root) {
|
||||||
|
/*General*/
|
||||||
|
--dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
|
||||||
|
oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||||
|
--dp-border-radius: 50%; /*Configurable border-radius*/
|
||||||
|
--dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/
|
||||||
|
--dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
|
||||||
|
|
||||||
|
/*Sizing*/
|
||||||
|
--dp-button-height: 35px; /*Size for buttons in overlays*/
|
||||||
|
--dp-month-year-row-height: 35px; /*Height of the month-year select row*/
|
||||||
|
--dp-month-year-row-button-size: 35px; /*Specific height for the next/previous buttons*/
|
||||||
|
--dp-button-icon-height: 20px; /*Icon sizing in buttons*/
|
||||||
|
--dp-cell-size: 35px; /*Width and height of calendar cell*/
|
||||||
|
--dp-cell-padding: 5px; /*Padding in the cell*/
|
||||||
|
--dp-common-padding: 10px; /*Common padding used*/
|
||||||
|
--dp-input-icon-padding: 35px; /*Padding on the left side of the input if icon is present*/
|
||||||
|
--dp-input-padding: 6px 30px 6px 12px; /*Padding in the input*/
|
||||||
|
--dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
|
||||||
|
--dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
|
||||||
|
--dp-row-margin: 5px 0; /*Adjust the spacing between rows in the calendar*/
|
||||||
|
--dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
|
||||||
|
--dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
|
||||||
|
--dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
|
||||||
|
--dp-time-inc-dec-button-size: 32px; /*Sizing for arrow buttons in the time picker*/
|
||||||
|
--dp-menu-padding: 6px 8px; /*Menu padding*/
|
||||||
|
|
||||||
|
/*Font sizes*/
|
||||||
|
--dp-font-size: 1rem; /*Default font-size*/
|
||||||
|
--dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
|
||||||
|
--dp-time-font-size: 0.8rem; /*Font size in the time picker*/
|
||||||
|
|
||||||
|
/*Transitions*/
|
||||||
|
--dp-animation-duration: 0.1s; /*Transition duration*/
|
||||||
|
--dp-menu-appear-transition-timing: cubic-bezier(
|
||||||
|
0.4,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1
|
||||||
|
); /*Timing on menu appear animation*/
|
||||||
|
--dp-transition-timing: ease-out; /*Timing on slide animations*/
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -3,6 +3,8 @@ import { reactive, ref, provide, nextTick, onMounted } from "vue";
|
||||||
import areaList from "./areaList.vue";
|
import areaList from "./areaList.vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import mitt from "@/utils/mitt";
|
import mitt from "@/utils/mitt";
|
||||||
|
import datePicker from "./datePicker.vue";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
const info = reactive({
|
const info = reactive({
|
||||||
address: '泸县',
|
address: '泸县',
|
||||||
|
@ -58,13 +60,29 @@ const logout = () => {
|
||||||
router.push('/login')
|
router.push('/login')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const weather = ref("暂无天气信息")
|
||||||
|
const initWeather = (city = 510500) => {
|
||||||
|
axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=5731d3b4c3f34e09226e084ce556e259`).then((res) => {
|
||||||
|
if (res.data.status == 1) {
|
||||||
|
weather.value = res.data.lives[0].weather;
|
||||||
|
}
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择时间
|
||||||
|
const changeTime = (e) => {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
mitt.emit('map_info', info);
|
mitt.emit('map_info', info);
|
||||||
|
|
||||||
// 每秒钟更新一次时间
|
// 每秒钟更新一次时间
|
||||||
setInterval(updateClock, 1000);
|
setInterval(updateClock, 1000);
|
||||||
|
|
||||||
|
initWeather();
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -76,8 +94,9 @@ onMounted(() => {
|
||||||
src="/src/assets/head_img/logo.png"
|
src="/src/assets/head_img/logo.png"
|
||||||
@click="navToDelivery"
|
@click="navToDelivery"
|
||||||
/>
|
/>
|
||||||
<div class="item">{{ nowTime[0] }}</div>
|
<datePicker multiCalendars range @changeTime="changeTime" />
|
||||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
<!-- <div class="item">{{ nowTime[0] }}</div> -->
|
||||||
|
<img class="icon" src="/src/assets/head_img/icon.png" alt="" />
|
||||||
<div class="item">{{ nowTime[1] }}</div>
|
<div class="item">{{ nowTime[1] }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="head-title">吟龙养殖溯源系统可视化大屏</div>
|
<div class="head-title">吟龙养殖溯源系统可视化大屏</div>
|
||||||
|
@ -95,7 +114,7 @@ onMounted(() => {
|
||||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<img src="/src/assets/head_img/weather.png" alt="" />
|
<img src="/src/assets/head_img/weather.png" alt="" />
|
||||||
多云
|
{{ weather }}
|
||||||
</div>
|
</div>
|
||||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||||
<div class="item" @click="logout">
|
<div class="item" @click="logout">
|
||||||
|
@ -116,6 +135,7 @@ onMounted(() => {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
font-size: 1rem;
|
||||||
.img {
|
.img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -10%;
|
bottom: -10%;
|
||||||
|
@ -137,6 +157,7 @@ onMounted(() => {
|
||||||
line-height: 50rpx;
|
line-height: 50rpx;
|
||||||
}
|
}
|
||||||
.left {
|
.left {
|
||||||
|
align-self: flex-end;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -151,6 +172,7 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
|
align-self: flex-end;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
|
|
|
@ -8,14 +8,28 @@ const initCircle = () => {
|
||||||
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
|
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
|
||||||
|
|
||||||
let data = [
|
let data = [
|
||||||
{ value: 400, name: '种类: 本地鸡' },
|
{ value: 400, name: '本地鸡' },
|
||||||
{ value: 435, name: '种类: 鸭' },
|
{ value: 435, name: '鸭' },
|
||||||
{ value: 580, name: '种类: 鹅' },
|
{ value: 580, name: '鹅' },
|
||||||
{ value: 884, name: '种类: 猪' },
|
{ value: 884, name: '猪' },
|
||||||
]
|
]
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: "item",
|
||||||
|
backgroundColor: 'rgba(0, 156, 255, 0.6)', //设置背景颜色
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
borderColor: "rgba(0, 156, 255, 1)",
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
shadowStyle: {
|
||||||
|
color: 'rgba(255,255,255, .2)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
return params.data.name + ': ' + params.data.value;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
color: color,
|
color: color,
|
||||||
legend: {
|
legend: {
|
||||||
|
@ -27,6 +41,9 @@ const initCircle = () => {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: "#fff"
|
||||||
},
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
return '种类: ' + params;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in New Issue