1

src/view/analyze.vue

@@ -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;

src/view/echart_analyze/right1.vue

@@ -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>

src/view/echart_analyze/right2.vue

@@ -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>