This commit is contained in:
parent
ed64ac211e
commit
23e49cdf53
|
|
@ -39,7 +39,7 @@ const getOption = () => {
|
|||
formatter: "{b0}日<br />{a1}:{c1}",
|
||||
},
|
||||
legend: {
|
||||
data: ["骑行次数"],
|
||||
data: ["乘坐人次"],
|
||||
top: "5%",
|
||||
right: "center",
|
||||
textStyle: {
|
||||
|
|
@ -70,7 +70,7 @@ const getOption = () => {
|
|||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "骑行次数/次",
|
||||
name: "乘坐人次",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
|
@ -121,7 +121,7 @@ const getOption = () => {
|
|||
},
|
||||
{
|
||||
yAxisIndex: 0,
|
||||
name: "骑行次数",
|
||||
name: "乘坐人次",
|
||||
type: "line",
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 10,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 260px"></div>
|
||||
<div ref="chart" style="width: 50%; height: 260px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -172,51 +172,51 @@ const getOption1 = () => {
|
|||
const getOption = () => {
|
||||
data.option = {
|
||||
//你的代码
|
||||
legend: [
|
||||
{
|
||||
orient: "vertical",
|
||||
right: "5%",
|
||||
top: "center",
|
||||
type: "scroll",
|
||||
height: "80%",
|
||||
itemWidth: 20, // 可以设置图例标记的宽度
|
||||
itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
|
||||
itemGap: 20,
|
||||
// itemStyle: {
|
||||
// borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
|
||||
// borderWidth: 10, // 图例边框宽度
|
||||
// borderRadius: 20,
|
||||
// legend: [
|
||||
// {
|
||||
// orient: "vertical",
|
||||
// right: "10%",
|
||||
// top: "15%",
|
||||
// type: "scroll",
|
||||
// height: "80%",
|
||||
// itemWidth: 20, // 可以设置图例标记的宽度
|
||||
// itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
|
||||
// itemGap: 20,
|
||||
// // itemStyle: {
|
||||
// // borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
|
||||
// // borderWidth: 10, // 图例边框宽度
|
||||
// // borderRadius: 20,
|
||||
// // },
|
||||
// pageTextStyle: {
|
||||
// color: "#ffffff",
|
||||
// fontSize: 14,
|
||||
// padding: 10,
|
||||
// },
|
||||
pageTextStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 14,
|
||||
padding: 10,
|
||||
},
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 14,
|
||||
padding: 10,
|
||||
rich: {
|
||||
name: {
|
||||
width: 80,
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
data: data.list,
|
||||
// textStyle: {
|
||||
// color: "#ffffff",
|
||||
// fontSize: 14,
|
||||
// padding: 10,
|
||||
// rich: {
|
||||
// name: {
|
||||
// width: 80,
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// data: data.list,
|
||||
|
||||
//格式化图例文本
|
||||
formatter: function (name) {
|
||||
var target;
|
||||
for (var i = 0, l = data.list.length; i < l; i++) {
|
||||
if (data.list[i].name == name) {
|
||||
target = data.list[i].value;
|
||||
}
|
||||
}
|
||||
return `${name}：${target} 人`;
|
||||
},
|
||||
},
|
||||
],
|
||||
// //格式化图例文本
|
||||
// formatter: function (name) {
|
||||
// var target;
|
||||
// for (var i = 0, l = data.list.length; i < l; i++) {
|
||||
// if (data.list[i].name == name) {
|
||||
// target = data.list[i].value;
|
||||
// }
|
||||
// }
|
||||
// return `${name}：${target} 人`;
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
||||
|
|
@ -234,7 +234,7 @@ const getOption = () => {
|
|||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: ["15%", "90%"],
|
||||
center: ["35%", "50%"],
|
||||
center: ["45%", "40%"],
|
||||
label: {
|
||||
position: "inside",
|
||||
formatter(item) {
|
||||
|
|
@ -276,7 +276,7 @@ const getOption = () => {
|
|||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: ["15%", "92%"],
|
||||
center: ["35%", "50%"],
|
||||
center: ["45%", "40%"],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
|
|
|
|||
206
src/view/sy.vue
206
src/view/sy.vue
|
|
@ -230,7 +230,22 @@
|
|||
</div>
|
||||
</div>
|
||||
<ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
|
||||
<div class="bt">
|
||||
<ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
|
||||
<div
|
||||
class="btList"
|
||||
ref="mainRef"
|
||||
@mouseenter="stopAutoScroll"
|
||||
@mouseleave="startAutoScroll"
|
||||
>
|
||||
<div class="btList_item" v-for="(item, index) in btList">
|
||||
<div class="btList_item_color" :style="bt(index)"></div>
|
||||
<div class="btList_item_value">
|
||||
{{ item.name }}：{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table_choose">
|
||||
<div
|
||||
|
|
@ -1053,48 +1068,6 @@ const data = reactive({
|
|||
],
|
||||
});
|
||||
|
||||
// const tableData = ref([
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: true,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: true,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: true,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: false,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: false,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: false,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: false,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: false,
|
||||
// },
|
||||
// ]);
|
||||
const jysyList = ref([
|
||||
{
|
||||
title: "县镇",
|
||||
|
|
@ -1232,9 +1205,25 @@ const getData = async () => {
|
|||
"nl91100",
|
||||
"nl100",
|
||||
];
|
||||
const ageBt = [
|
||||
"nl110",
|
||||
"nl1120",
|
||||
"nl2130",
|
||||
"nl3140",
|
||||
"nl4150",
|
||||
"nl5160",
|
||||
"nl6170",
|
||||
"nl7180",
|
||||
"nl8190",
|
||||
"nl91100",
|
||||
"nl100",
|
||||
];
|
||||
ageGroupKeys.forEach((key) => {
|
||||
data.ageGroup[key] = res.data.rksj[key];
|
||||
});
|
||||
ageBt.forEach((key, index) => {
|
||||
btList.value[index].value = res.data.rksj[key];
|
||||
});
|
||||
}
|
||||
// 年龄比例
|
||||
const ageRatioKeys = [
|
||||
|
|
@ -1334,9 +1323,6 @@ const qyfyList = reactive([
|
|||
img: qyfw4,
|
||||
},
|
||||
]);
|
||||
onBeforeMount(async () => {
|
||||
getData();
|
||||
});
|
||||
|
||||
// 交通事业弹框
|
||||
const showEc = (val) => {
|
||||
|
|
@ -1427,6 +1413,107 @@ const showTab = (val) => {
|
|||
break;
|
||||
}
|
||||
};
|
||||
//自动滚动(饼图)
|
||||
//扇形图颜色数据
|
||||
const colorList = [
|
||||
{ color2: "rgba(90,255,223,1)" },
|
||||
{ color2: "rgba(115,255,145,1)" },
|
||||
{ color2: "rgba(153,255,179,1)" },
|
||||
{ color2: "rgba(193,255,138,1)" },
|
||||
{ color2: "rgba(255,207,74,1)" },
|
||||
{ color2: "rgba(254,178,128,1)" },
|
||||
{ color2: "rgba(151,176,255,1)" },
|
||||
{ color2: "rgba(164,151,255,1)" },
|
||||
{ color2: "rgba(159,110,254,1)" },
|
||||
{ color2: "rgba(180,143,241,1)" },
|
||||
{ color2: "rgba(76,174,254,1)" },
|
||||
];
|
||||
const bt = computed(() => {
|
||||
return function (index) {
|
||||
let str = `--i:${colorList[index].color2}`;
|
||||
return str;
|
||||
};
|
||||
});
|
||||
const btList = ref([
|
||||
{
|
||||
name: "1-10岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "11-20岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "21-30岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "31-40岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "41-50岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "51-60岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "61-70岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "71-80岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "81-90岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "91-100岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "100岁以上人口总数",
|
||||
value: "",
|
||||
},
|
||||
]);
|
||||
const mainRef = ref(null);
|
||||
let isAutoScrolling = true;
|
||||
|
||||
const stopAutoScroll = () => {
|
||||
isAutoScrolling = false;
|
||||
};
|
||||
|
||||
const startAutoScroll = () => {
|
||||
isAutoScrolling = true;
|
||||
autoScroll();
|
||||
};
|
||||
|
||||
const autoScroll = () => {
|
||||
if (!isAutoScrolling) return;
|
||||
|
||||
const mainEl = mainRef.value;
|
||||
mainEl.scrollTop += 1; // 每次滚动的距离
|
||||
|
||||
if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
|
||||
setTimeout(() => {
|
||||
mainEl.scrollTo({ top: 0, behavior: "smooth" });
|
||||
setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
|
||||
}, 1000); // 暂停1秒后开始快速滚回顶部
|
||||
} else {
|
||||
requestAnimationFrame(autoScroll);
|
||||
}
|
||||
};
|
||||
onBeforeMount(async () => {
|
||||
getData();
|
||||
setTimeout(()=>{
|
||||
startAutoScroll();
|
||||
},1000)
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -2356,7 +2443,36 @@ const showTab = (val) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
//饼图list
|
||||
.bt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.btList {
|
||||
width: 45%;
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
.btList_item {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
|
||||
.btList_item_color {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background-color: var(--i);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.btList_item_value {
|
||||
font-size: 18px;
|
||||
margin-top: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btList::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.table {
|
||||
width: 94%;
|
||||
margin-left: 5px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue