gx

src/view/analyze.vue

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

src/view/echart_analyze/right2.vue

@@ -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 maxList = [90, 90, 90, 90, 90, 90, 90];
-const valueList = [20, 53, 47, 65, 29,11,50];
+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 c1 = [shape.x - 7, shape.y - 14];
-    const c2 = [xAxisPoint[0] - 2, xAxisPoint[1] - 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 c1 = [shape.x + 2, shape.y];
-    const c2 = [xAxisPoint[0] + 18, xAxisPoint[1]];
+    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 c0 = [shape.x + 2, shape.y];
-    const c1 = [shape.x + 36, shape.y - 14];
+    const c1 = [shape.x + 15, shape.y - 14];
-    const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
+    const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
-    const c3 = [xAxisPoint[0] + 18, xAxisPoint[1]];
+    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 c1 = [shape.x + 2, shape.y];
-    const c2 = [shape.x + 36, shape.y - 14];
+    const c2 = [shape.x + 15, shape.y - 14];
-    const c3 = [shape.x - 2, 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 c1 = [xAxisPoint[0] + 2, xAxisPoint[1]];
-    const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
+    const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
-    const c3 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 7, xAxisPoint[1] - 14];
 
     ctx
       .moveTo(c0[0], c0[1])
@@ -181,16 +180,29 @@ 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: {
+  xAxis: [
+    {
       type: "category",
-    data: ["小奔通", "两慢病", "水费", "就业招工", "零工市场匹配",'医保','交通出行'],
+      data: [
+        "小奔通",
+        "两慢病",
+        "水费",
+        "就业招工",
+        "零工市厂匹配",
+        "医保",
+        "交通出行",
+      ],
       axisLine: {
         show: false,
       },
@@ -203,9 +215,37 @@ const option = {
         show: true,
         color: "#fff",
         fontSize: 16,
-      align: "left",
+        formatter: function (value) {
+          return value.length > 2 ? value.slice(0, 2) + "..." : value;
         },
       },
+    },
+    {
+      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,
+    },
   ],
 };