惠企服务饼图

src/views/compositeIndex/components/companyCar.vue

@@ -40,6 +40,7 @@
         </div>
       </div>
     </div>
+    <div class="car_chart"></div>
   </div>
 </template>
 <script>
@@ -239,5 +240,11 @@ export default {
       }
     }
   }
+  .car_chart {
+    margin-left: 1vw;
+    width: 22vw;
+    height: 18vh;
+    border: 0.1px solid #495e70;
+  }
 }
 </style>

src/views/compositeIndex/components/companyService.vue

@@ -12,39 +12,206 @@
     <div class="service_type">
       <div class="month_service">
         <div class="month_service_text">当月服务</div>
-        <div class="month_service_value">123</div>
+        <div class="month_service_value">69</div>
       </div>
       <div class="season_service">
         <div class="season_service_text">季度服务</div>
-        <div class="season_service_value">123</div>
+        <div class="season_service_value">387</div>
       </div>
       <div class="year_service">
         <div class="year_service_text">年度服务</div>
-        <div class="year_service_value">123</div>
+        <div class="year_service_value">1976</div>
       </div>
     </div>
     <!-- 服务echarts表 -->
     <div class="service_echarts">
-      <div class="left_chart"></div>
-      <div class="right_chart"></div>
+      <div :id="left_id" class="left_chart"></div>
+      <div :id="right_id" class="right_chart"></div>
     </div>
     <div class="chart_num">
       <div class="left_chart_num">
         <div class="chart_num_text">惠企服务总量</div>
-        <div class="chart_num_value">1222</div>
+        <div class="chart_num_value">850</div>
       </div>
       <div class="right_chart_num">
         <div class="chart_num_text">请求受理总量</div>
-        <div class="chart_num_value">1222</div>
+        <div class="chart_num_value">997</div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import HighCharts from "highcharts";
 export default {
   name: "CompanyService",
   data() {
-    return {};
+    return {
+      left_id: "left_chart",
+      right_id: "right_chart",
+      option: {
+        chart: {
+          type: "pie", //饼图
+          backgroundColor: "rgba(0, 0, 0, 0)", //去掉白色背景
+          options3d: {
+            enabled: true, //使用3d功能
+            alpha: 45, //延y轴向内的倾斜角度
+          },
+        },
+        title: {
+          text: "", //图表的标题文字 这个得加上，不然头部会默认有字
+        },
+        subtitle: {
+          text: "", //副标题文字
+        },
+        tooltip: {
+          formatter: function () {
+            return (
+              this.point.name +
+              '<br/><span style="color:' +
+              this.color +
+              '">\u25CF</span>占比：<b>' +
+              this.percentage.toFixed(2) +
+              "%</b>"
+            );
+          },
+          style: {
+            color: "#000",
+            fontSize: 10,
+          },
+        },
+        // 去掉底部水印的文字
+        credits: {
+          enabled: false,
+        },
+        // 更改图例文字颜色
+        legend: {
+          itemStyle: { color: "#cfcfcf" },
+        },
+        plotOptions: {
+          pie: {
+            borderColor: "#000",
+            borderWidth: 1,
+            allowPointSelect: true, //每个扇块能否选中
+            cursor: "pointer", //鼠标指针
+            colors: ["#66C3FF", "#4D74FF", "#ECDE3D", "#37FDC7","#6633f0","#E04234"],
+            depth: 35, //饼图的厚度
+            showInLegend: false, //显示图例
+            // innerSize: 100,
+            dataLabels: {
+              enabled: false, //是否显示饼图的线形tip
+              format: "{point.name}",
+              style: {
+                //样式配置
+                textOutline: "none", //去掉文字白边
+                color: "#dfe9f9",
+                fontSize: 11,
+              },
+            },
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            data: [],
+          },
+        ],
+      },
+      right_option: {
+        chart: {
+          type: "pie", //饼图
+          backgroundColor: "rgba(0, 0, 0, 0)", //去掉白色背景
+          options3d: {
+            enabled: true, //使用3d功能
+            alpha: 45, //延y轴向内的倾斜角度
+          },
+        },
+        title: {
+          text: "", //图表的标题文字 这个得加上，不然头部会默认有字
+        },
+        subtitle: {
+          text: "", //副标题文字
+        },
+        tooltip: {
+          formatter: function () {
+            return (
+              this.point.name +
+              '<br/><span style="color:' +
+              this.color +
+              '">\u25CF</span>占比：<b>' +
+              this.percentage.toFixed(2) +
+              "%</b>"
+            );
+          },
+          style: {
+            color: "#000",
+            fontSize: 10,
+          },
+        },
+        // 去掉底部水印的文字
+        credits: {
+          enabled: false,
+        },
+        // 更改图例文字颜色
+        legend: {
+          itemStyle: { color: "#cfcfcf" },
+        },
+        plotOptions: {
+          pie: {
+            borderColor: "#000",
+            borderWidth: 1,
+            allowPointSelect: true, //每个扇块能否选中
+            cursor: "pointer", //鼠标指针
+            colors: ["#66C3FF", "#4D74FF", "#ECDE3D"],
+            depth: 35, //饼图的厚度
+            showInLegend: false, //显示图例
+            // innerSize: 100,
+            dataLabels: {
+              enabled: false, //是否显示饼图的线形tip
+              format: "{point.name}",
+              style: {
+                //样式配置
+                textOutline: "none", //去掉文字白边
+                color: "#dfe9f9",
+                fontSize: 11,
+              },
+            },
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.init_left_chart()
+    this.init_right_chart()
+  },
+  methods: {
+    init_left_chart() {
+      let data = [
+        ["人员背景审核", 331],
+        ["重点人员审核", 221],
+        ["警情通报", 120],
+        ["道路拥堵提醒", 98],
+        ["网络反诈提醒", 60],
+        ["企业纠纷提醒", 20],
+      ];
+      this.option.series[0].data = data;
+      HighCharts.chart(this.left_id, this.option);
+    },
+    init_right_chart() {
+      let data = [
+        ["业务咨询", 532],
+        ["法律服务", 231],
+        ["证照办理", 234],
+      ];
+      this.right_option.series[0].data = data;
+      HighCharts.chart(this.right_id, this.right_option);
+    },
   },
 };
 </script>
@@ -173,12 +340,10 @@ export default {
     .left_chart {
       width: 12vw;
       height: 13vh;
-      border: 0.1px solid #495e70;
     }
     .right_chart {
       width: 12vw;
       height: 13vh;
-      border: 0.1px solid #495e70;
     }
   }
   .chart_num {

src/views/compositeIndex/components/employee.vue

@@ -141,7 +141,7 @@ export default {
             fontSize: 10,
           },
         },
-        // 去掉右底部的文字
+        // 去掉底部水印的文字
         credits: {
           enabled: false,
         },

src/views/compositeIndex/components/endanger.vue

@@ -10,17 +10,144 @@
     </div>
     <!-- 危化物品表 -->
     <div class="chart_box">
-        <div id="barchart"></div>
+      <div :id="id" style="height: 23vh"></div>
     </div>
   </div>
 </template>
 <script>
+// import * as echarts from "echarts";
+import HighCharts from "highcharts";
+import { indexGoods } from "@/api/safetyIndex";
 export default {
   name: "Endanger",
   data() {
-    return {};
+    return {
+      id: "danger_chart",
+      option: {
+        chart: {
+          backgroundColor: "rgba(0,0,0,0)",
+          type: "column",
+          options3d: {
+            enabled: true,
+            alpha: 16, //俯瞰角度
+            beta: 10, //旋转角度
+            depth: 0, //景深
+          },
+        },
+        title: {
+          text: "",
+          style: {
+            color: "#8fe3fd",
+            fontSize: "18px",
+          },
+        },
+        subtitle: {
+          text: "",
+        },
+        // 去掉底部水印的文字
+        credits: {
+          enabled: false,
+        },
+        exporting: {
+          enabled: false, //隐藏导出按钮
+        },
+        plotOptions: {
+          column: {
+            borderWidth: 0,
+            //borderColor: "",//去边框
+            //shadow: false,		//去阴影
+            dataLabels: {
+              //柱状图数据标签
+              enabled: false, //是否显示数据标签
+              color: "#8fe3fd", //数据标签字体颜色
+              style: {
+                fontSize: "8px",
+              },
+              formatter: function () {
+                //格式化输出显示
+                return this.y;
+              },
+            },
+          },
+        },
+        xAxis: {
+          gridLineWidth: 0,
+          categories: ["放射源", "易制毒", "易制爆", "民爆"],
+          labels: {
+            style: {
+              color: "#8fe3fd",
+              fontSize: "12px",
+            },
+          },
+        },
+        yAxis: {
+          min: 0,
+          gridLineWidth: "0px",
+          title: {
+            text: "",
+            style: {
+              color: "#8fe3fd",
+              fontSize: "12px",
+            },
+          },
+          labels: {
+            style: {
+              color: "#8fe3fd",
+              fontSize: "12px",
+            },
+          },
+        },
+        series: [
+          {
+            name: '<b style="color:#8fe3fd; font-size: 12px">存储</b>',
+            color: "#6633f0",
+            data: [],
+          },
+          {
+            name: '<b style="color:#8fe3fd; font-size: 12px">生产</b>',
+            color: "#3ccee5",
+            data: [],
+          },
+          {
+            name: '<b style="color:#8fe3fd; font-size: 12px">购买</b>',
+            color: "#34E0B2",
+            data: [],
+          },
+          {
+            name: '<b style="color:#8fe3fd; font-size: 12px">销售</b>',
+            color: "#E0D234",
+            data: [],
+          },
+          {
+            name: '<b style="color:#8fe3fd; font-size: 12px">使用</b>',
+            color: "#E04234",
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      indexGoods().then((res) => {
+        let chart_list = res.data;
+        console.log("chart_list", chart_list);
+        let data_one = [Number(chart_list[0].storage), Number(chart_list[1].storage), Number(chart_list[2].storage), Number(chart_list[3].storage)];
+        let data_two = [Number(chart_list[0].produce), Number(chart_list[1].produce), Number(chart_list[2].produce), Number(chart_list[3].produce)];
+        let data_three = [Number(chart_list[0].purchase), Number(chart_list[1].purchase), Number(chart_list[2].produce), Number(chart_list[3].produce)];
+        let data_four = [Number(chart_list[0].sale), Number(chart_list[1].sale), Number(chart_list[2].produce), Number(chart_list[3].produce)];
+        let data_five = [Number(chart_list[0].use), Number(chart_list[1].use), Number(chart_list[2].produce), Number(chart_list[3].produce)];
+        this.option.series[0].data = data_one;
+        this.option.series[1].data = data_two;
+        this.option.series[2].data = data_three;
+        this.option.series[3].data = data_four;
+        this.option.series[4].data = data_five;
+        HighCharts.chart(this.id, this.option);
+      });
     },
-  methods:{
   },
 };
 </script>
@@ -64,7 +191,6 @@ export default {
     margin-left: 1vw;
     width: 22vw;
     height: 22vh;
-    border: 0.1px solid #495e70;
   }
 }
 </style>

src/views/safetyIndex/wupin.vue

@@ -186,6 +186,7 @@ export default {
         getindexGoods() {
             indexGoods().then(res => {
                 this.fangkeList = res.data
+                console.log('resssss',res.data);
                 this.fangkeList.forEach(item => {
                     if (item.goodsType == 1) {
                         this.fsyData = item