This commit is contained in:
姚宇浩 2024-06-14 10:51:07 +08:00
parent ea78a2e144
commit 10f1e67719
5 changed files with 576 additions and 21 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -18,7 +18,6 @@
<i></i>
</div>
</div>
</div>
<div class="flex1">
<div class="yd_title center_1">
@ -37,6 +36,7 @@
<i></i>
</div>
</div>
<right1></right1>
</div>
<div class="flex1">
<div class="yd_title right_2">
@ -45,6 +45,8 @@
<i></i>
</div>
</div>
<img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" />
<!-- <right2></right2> -->
</div>
<div class="flex1">
<div class="yd_title right_3">
@ -53,6 +55,7 @@
<i></i>
</div>
</div>
<img src="@/assets/images/sjfx/map.png" alt="" class="map" />
</div>
</div>
</div>
@ -60,15 +63,13 @@
<script setup>
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";
onMounted(() => {
onMounted(() => {});
});
onBeforeMount(() => {
});
onBeforeMount(() => {});
</script>
<style lang="scss" scoped>
@ -131,9 +132,6 @@ onBeforeMount(() => {
background-size: 100% 100%;
}
.center_0 {
background-image: url(@/assets/images/sjfx/bft.png);
background-repeat: no-repeat;
@ -163,10 +161,6 @@ onBeforeMount(() => {
background-size: 100% 100%;
}
.yd_title {
box-sizing: border-box;
width: 98%;
@ -290,7 +284,6 @@ onBeforeMount(() => {
}
}
.mechanism {
background-image: url(@/assets/YLTitle/titleImg10.png);
background-repeat: no-repeat;
@ -301,12 +294,15 @@ onBeforeMount(() => {
padding: 12px 0;
}
.map {
width: 560px;
height: 268px;
margin-top: 12px;
}
.right3d{
width: 560px;
height: 220px;
}
/* 滚动条整体部分 */
.rolling::-webkit-scrollbar {
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>