Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
duanxiaohai 2024-06-14 11:32:00 +08:00
commit b5a1405079
6 changed files with 579 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 419 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -66,6 +66,9 @@
<!-- <div class="minPie"> <!-- <div class="minPie">
<Pie3dMt :list="minData.minPieData1"></Pie3dMt> <Pie3dMt :list="minData.minPieData1"></Pie3dMt>
</div> --> </div> -->
<div style="widtgh:100%;height:500px;">
<img src="../assets/images/sjfx/minImg.jpg" style="width:100%;height:100%;" alt="">
</div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title center_1"> <div class="yd_title center_1">
@ -85,6 +88,7 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<right1></right1>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title right_2"> <div class="yd_title right_2">
@ -93,6 +97,8 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" />
<!-- <right2></right2> -->
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title right_3"> <div class="yd_title right_3">
@ -101,6 +107,7 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<img src="@/assets/images/sjfx/map.png" alt="" class="map" />
</div> </div>
</div> </div>
</div> </div>
@ -108,6 +115,8 @@
<script setup> <script setup>
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue"; import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
import right2 from "./echart_analyze/right2.vue";
import right1 from "./echart_analyze/right1.vue";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
import Pie3dMt from "./echart_analyze/pie3dMt.vue"; import Pie3dMt from "./echart_analyze/pie3dMt.vue";
import pie3dMt1 from "./echart_analyze/pie3dMt1.vue"; import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
@ -392,6 +401,8 @@ onBeforeMount(() => {});
bottom: 100%; bottom: 100%;
} }
} }
.mechanism { .mechanism {
background-image: url(@/assets/YLTitle/titleImg10.png); background-image: url(@/assets/YLTitle/titleImg10.png);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -402,6 +413,15 @@ onBeforeMount(() => {});
padding: 12px 0; padding: 12px 0;
} }
.map {
width: 560px;
height: 268px;
margin-top: 12px;
}
.right3d{
width: 560px;
height: 220px;
}
/* 滚动条整体部分 */ /* 滚动条整体部分 */
.rolling::-webkit-scrollbar { .rolling::-webkit-scrollbar {
width: 5px; width: 5px;

View File

@ -0,0 +1,141 @@
<template>
<div ref="chart" style="width: 100%; height: 300px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(null); // DOM
const data1 = [
"大街乡",
"社阳乡",
"牧尘畲族乡",
"庙下乡",
"溪口镇",
"罗家乡",
"模环乡",
"横山镇",
"石佛乡",
"詹家镇",
"塔石镇",
"小男孩镇",
"湖镇镇",
"东华街道",
"龙洲街道",
];
const data2 = [
"862772",
"672917",
"302810",
"294100",
"109310",
"91023",
"81232",
"71273",
"69173",
"51861",
"49184",
"31740",
"21307",
"21307",
"20000",
];
let option = {
grid: {
left: "2%",
right: "10%",
bottom: "2%",
top: "4%",
containLabel: true,
},
tooltip: {
trigger: "axis", //axis , item
},
// backgroundColor: '#002D54',
xAxis: {
type: "value",
splitLine: {
lineStyle: {
color: "rgba(77, 128, 254, 0.2)",
type: "line",
},
},
axisTick: {
show: true,
},
splitLine: {
show: false,
},
axisLabel: {
// x
show: false,
textStyle: {
color: "#00c0fa",
fontSize: 19,
},
},
},
yAxis: [
{
type: "category",
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: "#ffffff",
fontSize: "14",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: data1,
},
],
series: [
{
name: "未交医保人员",
type: "bar",
zlevel: 1,
label: {
show: true,
position: "right", //
color: "#ffffff",
fontSize: 12,
distance: 10, //
// formatter: '{c}%' //
}, //
itemStyle: {
normal: {
borderWidth: 1,
// borderColor: "rgba(0, 183, 255, 1)",
borderRadius: [0, 0, 50, 0], //
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 183, 255, 0)" },
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
]),
},
},
barWidth: 10,
data: data2,
},
],
};
onMounted(() => {
var myChart = echarts.init(chart.value);
myChart.setOption(option);
});
</script>
<style scoped></style>

View File

@ -0,0 +1,418 @@
<template>
<div ref="chart" style="width: 96%; height: 240px"></div>
</template>
<script setup>
import { onMounted, onBeforeMount, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const colors = [
{
left: "rgba(234, 162, 57, .16)",
right: "rgba(234, 162, 57, .6)",
top: "rgba(234, 162, 57, 1)",
bottom: "rgba(234, 162, 57, .46)",
front: "rgba(234, 162, 57, .66)",
},
{
left: "rgba(14, 252, 255, .16)",
right: "rgba(14, 252, 255, .6)",
top: "rgba(14, 252, 255, 1)",
bottom: "rgba(14, 252, 255, .46)",
front: "rgba(14, 252, 255, .66)",
},
{
left: "rgba(60, 143, 255, .16)",
right: "rgba(60, 143, 255, .6)",
top: "rgba(60, 143, 255, 1)",
bottom: "rgba(60, 143, 255, .46)",
front: "rgba(60, 143, 255, .66)",
},
{
left: "rgba(234, 162, 57, .16)",
right: "rgba(234, 162, 57, .6)",
top: "rgba(234, 162, 57, 1)",
bottom: "rgba(234, 162, 57, .46)",
front: "rgba(234, 162, 57, .66)",
},
{
left: "rgba(14, 252, 255, .16)",
right: "rgba(14, 252, 255, .6)",
top: "rgba(14, 252, 255, 1)",
bottom: "rgba(14, 252, 255, .46)",
front: "rgba(14, 252, 255, .66)",
},
{
left: "rgba(60, 143, 255, .16)",
right: "rgba(60, 143, 255, .6)",
top: "rgba(60, 143, 255, 1)",
bottom: "rgba(60, 143, 255, .46)",
front: "rgba(60, 143, 255, .66)",
},
{
left: "rgba(234, 162, 57, .16)",
right: "rgba(234, 162, 57, .6)",
top: "rgba(234, 162, 57, 1)",
bottom: "rgba(234, 162, 57, .46)",
front: "rgba(234, 162, 57, .66)",
},
{
left: "rgba(14, 252, 255, .16)",
right: "rgba(14, 252, 255, .6)",
top: "rgba(14, 252, 255, 1)",
bottom: "rgba(14, 252, 255, .46)",
front: "rgba(14, 252, 255, .66)",
},
];
const maxList = [90, 90, 90, 90, 90,90,90];
const valueList = [20, 53, 47, 65, 29,11,50];
// 5:
//c0:c1,c2:c3
// -ok rgba(103, 180, 233, 0.04)
const CubeLeft_1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
// canvasshapecustom
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 20, shape.y];
const c1 = [shape.x - 2, shape.y - 14];
const c2 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
},
});
const CubeFront_1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
// canvasshapecustom
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 20, shape.y];
const c1 = [shape.x + 18, shape.y];
const c2 = [xAxisPoint[0] + 18, xAxisPoint[1]];
const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
},
});
const CubeRight_1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x + 18, shape.y];
const c1 = [shape.x + 36, shape.y - 14];
const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
},
});
const CubeTop_1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const c0 = [shape.x - 20, shape.y];
const c1 = [shape.x + 18, shape.y];
const c2 = [shape.x + 36, shape.y - 14];
const c3 = [shape.x - 2, shape.y - 14];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
},
});
const CubeBottom_1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
// canvasshapecustom
const xAxisPoint = shape.xAxisPoint;
const c0 = [xAxisPoint[0] - 20, xAxisPoint[1]];
const c1 = [xAxisPoint[0] + 18, xAxisPoint[1]];
const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
},
});
echarts.graphic.registerShape("CubeLeft_1", CubeLeft_1);
echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
const option = {
grid: {
left: 10,
right: 40,
bottom: 20,
top: 20,
containLabel: true,
},
xAxis: {
type: "category",
data: ["小奔通", "两慢病", "水费", "就业招工", "零工市场匹配",'医保','交通出行'],
axisLine: {
show: false,
},
offset: 10,
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: "#fff",
fontSize: 16,
align: "left",
},
},
yAxis: {
min: 0,
max: 100,
interval: 20,
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "rgba(255, 255, 255, .16)",
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255, 255, 255, .16)",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
fontSize: 16,
color: "#fff",
},
},
series: [
//
{
type: "custom",
renderItem: function (params, api) {
console.log(api);
const location = api.coord([api.value(0), api.value(1)]);
return {
type: "group",
children: [
{
type: "CubeBottom_1",
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(103, 180, 233, .16)",
},
},
{
type: "CubeLeft_1",
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(103, 180, 233, .04)",
},
},
{
type: "CubeFront_1",
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(103, 180, 233, .16)",
},
},
{
type: "CubeRight_1",
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(103, 180, 233, .08)",
},
},
{
type: "CubeTop_1",
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(103, 180, 233, .26)",
},
},
],
};
},
data: maxList,
},
{
type: "custom",
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
var color =
api.value(1) > 10000
? "red"
: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#5cc4eb",
},
{
offset: 0.8,
color: "#21658c",
},
]);
return {
type: "group",
children: [
{
type: "CubeBottom_1",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: colors[params.dataIndexInside]["bottom"],
},
},
{
type: "CubeLeft_1",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: colors[params.dataIndexInside]["left"],
},
},
{
type: "CubeFront_1",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: colors[params.dataIndexInside]["front"],
},
},
{
type: "CubeRight_1",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: colors[params.dataIndexInside]["right"],
},
},
{
type: "CubeTop_1",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: colors[params.dataIndexInside]["top"],
},
},
],
};
},
data: valueList,
},
],
};
onMounted(() => {
var myChart = echarts.init(chart.value);
myChart.setOption(option);
});
</script>
<style lang="scss" scoped>
</style>