xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-06-14 16:17:10 +08:00
parent 4c91185c73 5b4d028b28
commit f446f1edb3
3 changed files with 98 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/headerBg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 120 KiB

After

Width:  |  Height:  |  Size: 126 KiB

4
src/view/analyze.vue
View File

@ -119,8 +119,8 @@
<i></i>
</div>
</div>
<img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" />
<!-- <right2></right2> -->
<!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
<right2></right2>
</div>
<div class="flex1">
<div class="yd_title right_3">

144
src/view/echart_analyze/right2.vue
View File

@ -31,7 +31,7 @@ const colors = [
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)",
@ -52,7 +52,7 @@ const colors = [
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)",
@ -66,10 +66,9 @@ const colors = [
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];
const maxList = [90, 90, 90, 90, 90, 90, 90];
const valueList = [20, 53, 47, 65, 29, 11, 50];
// 注册5个面图形:左侧、前面、右面、上面、下面
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
@ -83,8 +82,8 @@ const CubeLeft_1 = echarts.graphic.extendShape({
// 会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 c1 = [shape.x - 7, shape.y - 14];
const c2 = [xAxisPoint[0] - 7, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
@ -103,8 +102,8 @@ const CubeFront_1 = echarts.graphic.extendShape({
// 会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 c1 = [shape.x + 2, shape.y];
const c2 = [xAxisPoint[0] + 2, xAxisPoint[1]];
const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
@ -121,10 +120,10 @@ const CubeRight_1 = echarts.graphic.extendShape({
},
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]];
const c0 = [shape.x + 2, shape.y];
const c1 = [shape.x + 15, shape.y - 14];
const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] + 2, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@ -140,9 +139,9 @@ const CubeTop_1 = echarts.graphic.extendShape({
},
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];
const c1 = [shape.x + 2, shape.y];
const c2 = [shape.x + 15, shape.y - 14];
const c3 = [shape.x - 7, shape.y - 14];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@ -161,9 +160,9 @@ const CubeBottom_1 = echarts.graphic.extendShape({
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];
const c1 = [xAxisPoint[0] + 2, xAxisPoint[1]];
const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] - 7, xAxisPoint[1] - 14];
ctx
.moveTo(c0[0], c0[1])
@ -181,31 +180,72 @@ echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}:{c1}",
},
grid: {
left: 10,
right: 40,
right: 0,
bottom: 20,
top: 20,
containLabel: true,
},
xAxis: {
type: "category",
data: ["小奔通", "两慢病", "水费", "就业招工", "零工市场匹配",'医保','交通出行'],
axisLine: {
show: false,
},
offset: 10,
xAxis: [
{
type: "category",
data: [
"小奔通",
"两慢病",
"水费",
"就业招工",
"零工市厂匹配",
"医保",
"交通出行",
],
axisLine: {
show: false,
},
offset: 10,
axisTick: {
show: false,
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: "#fff",
fontSize: 16,
formatter: function (value) {
return value.length > 2 ? value.slice(0, 2) + "..." : value;
},
},
},
axisLabel: {
show: true,
color: "#fff",
fontSize: 16,
align: "left",
{
type: "category",
data: [
"小奔通",
"两慢病",
"水费",
"就业招工",
"零工市厂匹配",
"医保",
"交通出行",
],
axisLine: {
show: false,
},
offset: 10,
axisTick: {
show: false,
},
axisLabel: {
show: false,
color: "#fff",
fontSize: 16,
},
},
},
],
yAxis: {
min: 0,
max: 100,
@ -312,19 +352,7 @@ const option = {
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: [
@ -404,6 +432,26 @@ const option = {
data: valueList,
},
//顶部字体
{
type: "bar",
xAxisIndex: 1,
label: {
show: true,
fontSize: 18,
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
itemStyle: {
color: "rgba(221, 242, 255, 0)",
},
data: valueList.map((item) => item + 5),
barWidth: 20,
},
],
};