生命线热力热线提交

src/views/industry/lookall.vue

@@ -286,7 +286,7 @@
 
     <!--省长热线、市长热线、热力热线-->
     <!--总览-->
-    <div class="hotlineAll" style="display: none">
+    <div class="hotlineAll" style="">
       <div class="titleBar" data-text="统计总览"></div>
       <div class="zonglan">
         <div class="zongShu">
@@ -305,8 +305,7 @@
           </div>
         </div>
       </div>
-      <div style="width: 100%; height: 290px; color: #fff">
-        图表位置
+      <div id="zonglan" style="width: 100%; height: 290px;">
       </div>
       <div class="titleBar" data-text="未形成工单"></div>
       <div class="unformed">
@@ -336,7 +335,7 @@
 
     </div>
     <!--热线-->
-    <div class="hotlineBig">
+    <div class="hotlineBig" style="display: none">
       <div class="titleBar" data-text="省长热线"></div>
       <div class="zonglan">
         <div class="zongShu">
@@ -1288,6 +1287,7 @@
 			this.getWeather();
 			// 初始化地图数据
 			this.getSuperMapUrl();
+      this.zonglanEcharts();
 			this.selectTaskList();
 			this.selectFocusList();
 			this.heatingViewEventList();
@@ -1304,6 +1304,191 @@
 			}, 2000)
 		},
 		methods: {
+      zonglanEcharts(){
+        var myChart = echarts.init(document.getElementById("zonglan"));
+        let dashedPic =
+          "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC";
+        let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF"];
+        let chartData = [
+          {
+            name: "质量诉求",
+            value: 13211,
+            unit: "元",
+          },
+          {
+            name: "报修类",
+            value: 42111,
+            unit: "元",
+          },
+          {
+            name: "业务咨询类",
+            value: 81711,
+            unit: "元",
+          },
+        ];
+        let arrName = [];
+        let arrValue = [];
+        let sum = 0;
+        let pieSeries = [],
+          lineYAxis = [];
+
+        // 数据处理
+        chartData.forEach((v, i) => {
+          arrName.push(v.name);
+          arrValue.push(v.value);
+          sum = sum + v.value;
+        });
+
+        // 图表option整理
+        chartData.forEach((v, i) => {
+          pieSeries.push({
+            name: "学历",
+            type: "pie",
+            clockWise: false,
+            hoverAnimation: false,
+            radius: [65 - i * 15 + "%", 57 - i * 15 + "%"],
+            center: ["30%", "50%"],
+            label: {
+              show: false,
+            },
+            data: [
+              {
+                value: v.value,
+                name: v.name,
+              },
+              {
+                value: sum - v.value,
+                name: "",
+                itemStyle: {
+                  color: "rgba(0,0,0,0)",
+                },
+              },
+            ],
+          });
+          pieSeries.push({
+            name: "",
+            type: "pie",
+            silent: true,
+            z: 1,
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [65 - i * 15 + "%", 57 - i * 15 + "%"],
+            center: ["30%", "50%"],
+            label: {
+              show: false,
+            },
+            data: [
+              {
+                value: 7.5,
+                itemStyle: {
+                  color: "#E3F0FF",
+                },
+              },
+              {
+                value: 2.5,
+                name: "",
+                itemStyle: {
+                  color: "rgba(0,0,0,0)",
+                },
+              },
+            ],
+          });
+          v.percent = ((v.value / sum) * 100).toFixed(1) + "%";
+          lineYAxis.push({
+            value: i,
+            textStyle: {
+              rich: {
+                circle: {
+                  color: color[i],
+                  padding: [0, 5],
+                },
+              },
+            },
+          });
+        });
+
+        let option = {
+          color: color,
+          grid: {
+            top: "15%",
+            bottom: "62%",
+            left: "30%",
+            containLabel: false,
+          },
+          yAxis: [
+            {
+              type: "category",
+              inverse: true,
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                formatter: function (params) {
+                  let item = chartData[params];
+                  console.log(item);
+                  return (
+                    "{line|}{circle|●}{name|" +
+                    item.name +
+                    "}{bd||}{percent|" +
+                    item.percent +
+                    "}{value|" +
+                    item.value +
+                    "}{unit|元}"
+                  );
+                },
+                interval: 0,
+                inside: true,
+                textStyle: {
+                  color: "#333",
+                  fontSize: 14,
+                  rich: {
+                    line: {
+                      width: 150,
+                      height:4,
+                      backgroundColor: '#ccdbf4',
+                    },
+                    name: {
+                      color: "#fff",
+                      fontSize: 14,
+                    },
+                    bd: {
+                      color: "#fff",
+                      padding: [0, 5],
+                      fontSize: 14,
+                    },
+                    percent: {
+                      color: "#fff",
+                      fontSize: 14,
+                    },
+                    value: {
+                      color: "#fff",
+                      fontSize: 16,
+                      fontWeight: 500,
+                      padding: [0, 0, 0, 20],
+                    },
+                    unit: {
+                      fontSize: 14,
+                      color: "#fff",
+                    },
+                  },
+                },
+                show: true,
+              },
+              data: lineYAxis,
+            },
+          ],
+          xAxis: [
+            {
+              show: false,
+            },
+          ],
+          series: pieSeries,
+        };
+        myChart.setOption(option);
+      },
 			goToHomePage() {
 				window.location.href = '/homePage';
 			},
@@ -3447,60 +3632,6 @@
 					}, 2000) // 每隔 2000 毫秒切换一次
 				})
 			},
-			/**
-			 * 数据完整度
-			 */
-			heatingDataCompleteness() {
-				let that = this
-				heatingDataCompleteness().then(res => {
-					that.heatInfo = res.data
-					const seriesData = []
-					for (const item of res.data) {
-						seriesData.push({
-							name: item.name,
-							value: (item.value == '数据不完整' ? 0 : 1)
-						})
-					}
-					let myChart4 = echarts.init(document.getElementById('assessment-and-evaluation'))
-					let option4 = {
-						tooltip: {
-							show: true,
-							trigger: 'item',
-							formatter: '{b} : {c} ({d}%)'
-						},
-						series: [{
-							type: 'pie',
-							radius: ['60%', '50%'],
-							center: ['60%', '40%'],
-							hoverAnimation: false,
-							z: 10,
-							itemStyle: {},
-							label: {
-								show: false
-							},
-							data: seriesData,
-							labelLine: {
-								show: false
-							}
-						}]
-					}
-					myChart4.setOption(option4)
-					// 获取数据的总长度，用于循环
-					let dataLength4 = option4.series[0].data.length
-					// 设置一个计数器
-					let currentIndex4 = -1
-					// 使用 setInterval 实现自动轮播
-					setInterval(function() {
-						// 显示 tooltip 自动轮播效果
-						currentIndex4 = (currentIndex4 + 1) % dataLength4
-						myChart4.dispatchAction({
-							type: 'showTip',
-							seriesIndex: 0,
-							dataIndex: currentIndex4
-						})
-					}, 2000) // 每隔 2000 毫秒切换一次
-				})
-			},
 			// 左侧视窗伸缩
 			viewLeftInsideAndOut() {
 				if (this.viewLeftSideStatus == 'inside') {