This commit is contained in:
parent
ea78a2e144
commit
10f1e67719
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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) {
|
||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||
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) {
|
||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||
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) {
|
||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||
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>
|
||||
Loading…
Reference in New Issue