图标样式

src/App.vue

@@ -11,7 +11,7 @@ export default {
 </script>
 <style lang="scss">
 #app {
-  background-color: rgba(4, 16, 36,1);
+  background-color: rgba(1, 84, 120, 1);
 
 }
 </style>

src/views/cockpitNew/tdsc.vue

@@ -28,7 +28,10 @@
       </div>
 
     </div>
-    <div id="echart" style="width: 280px; height: 230px;">
+    <div id="echart">
+
+    </div>
+    <div class="legend">
 
     </div>
   </div>
@@ -60,9 +63,7 @@ export default {
         { name: '商业', value: 30 },
         { name: '租赁', value: 40 },
         { name: '自用', value: 50 },
-        { name: '办公', value: 20 },
-        // { name: '餐饮', value: 16 },
-        // { name: '住宿', value: 24 },
+        { name: '住宿', value: 24 },
       ]
       for (var i = 0; i < data.length; i++) {
         for (var j = i + 1; j < data.length; j++) {
@@ -83,7 +84,7 @@ export default {
         value.pm = pm[index]
       })
       console.log('ssss', data)
-      const colors = ['#FF0000', '#00FF00', '#FFFF00', '#FF00FF', '#00FFFF', '#0000FF']
+      const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
       const chartData = data.map((item, index) => ({
         value: item.value,
         name: item.name,
@@ -129,35 +130,38 @@ export default {
         backgroundColor: 'rgba(1,1,1,0)',
         title: {
           show: true,
-          text: sum,
-          subtext: '总建筑面积平方米',
+          // text: sum
+          text: '收储来源',
+          // subtext: '收储来源',
           x: '49%',
           y: '32%',
           itemGap: 6,
           textStyle: {
             color: '#fff',
-            fontSize: 12,
+            fontSize: 11,
             fontWeight: '400',
-            lineHeight: 6,
+            lineHeight: 8,
           },
           subtextStyle: {
             color: '#fff',
             fontSize: 8,
             fontWeight: '400',
-            lineHeight: 6,
+            lineHeight: 8,
           },
           textAlign: 'center',
         },
 
+        // 图例
         legend: {
-          orient: 'vertical',
-          icon: 'circle',
+          show: false,
+          orient: 'horizontal',
+          icon: 'rect',
           textStyle: {
             color: '#f2f2f2',
             fontSize: '12px',
           },
-          top: '70%',
-          left: '40%',
+          top: '10%',
+          left: '80%',
           itemGap: 14,
           itemHeight: 14,
           itemWidth: 14,
@@ -170,8 +174,12 @@ export default {
               console.log('dddd', selectedItem)
               const p = ((value / sum) * 100).toFixed(2);
               const area = `${value}m²`;
+              // console.log(`{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `);
+
               return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
             } else {
+              console.log(name);
+
               return name;
             }
           },
@@ -412,4 +420,32 @@ export default {
     color: #68F4FB;
   }
 }
+
+#echart {
+  width: 280px;
+  height: 230px;
+  width: 280px;
+  height: 230px;
+  position: relative;
+  left: -35px;
+  top: 59px;
+}
+
+.legend {
+
+ 
+
+
+  background: no-repeat -10% 69%;
+    background-size: 65%;
+    // background-image: url(/static/images/cockpitNew/legend.png);
+  background-image: url("/static/images/cockpitNew/legend.png");
+
+    position: absolute;
+    top: 46%;
+    left: 31%;
+    width: 520px;
+    height: 132px;
+
+}
 </style>