mm

src/views/dashboard-screen/syjhdxqk/1.js

@@ -0,0 +1,211 @@
+const data = [{
+  name: '第一季度',
+  value: 40
+}, {
+  name: '第二季度',
+  value: 30
+}, {
+  name: '第三季度',
+  value: 20
+}, {
+  name: '第四季度',
+  value: 10
+}]
+const name = data.map((item) => item.name)
+const value = data.map((item) => item.value)
+const sum = value.reduce((a, b) => {
+  return a + b
+})
+const colors = [
+  [
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(82, 113, 195)' }, {
+      offset: 1,
+      color: 'rgb(120, 142, 237)'
+    }], false),
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(81, 129, 192)' }, {
+      offset: 1,
+      color: 'rgb(123, 148, 234)'
+    }], false),
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(89, 137, 188)' }, {
+      offset: 1,
+      color: 'rgb(113, 173, 229)'
+    }], false),
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(88, 166, 191)' }, {
+      offset: 1,
+      color: 'rgb(128, 230, 226)'
+    }], false),
+
+
+
+
+  ],
+  ['rgb(41, 73, 110)',
+    'rgb(41, 73, 110)',
+    'rgb(41, 73, 110)',
+    'rgb(41, 73, 110)'
+  ]
+]
+const series = []
+const yAxis = []
+for (let i = 0; i < data.length; i++) {
+  series.push({
+    name: '',
+    type: 'pie',
+    clockWise: false, // 顺时加载
+    hoverAnimation: false, // 鼠标移入变大
+    radius: [90 - i * 10 + '%', 86 - i * 10 + '%'],
+    center: ['50%', '50%'],
+    label: {
+      show: false
+    },
+    itemStyle: {
+      label: {
+        show: false
+      },
+      labelLine: {
+        show: false
+      },
+      borderRadius: 60, // 设置每一段子项目的圆角
+
+
+
+
+    },
+    data: [{
+      value: data[i].value,
+      name: data[i].name
+    },
+      {
+        value: sum - data[i].value,
+        name: '',
+        itemStyle: {
+          color: 'transparent',
+          borderRadius: 60, // 设置每一段子项目的圆角
+
+        },
+        tooltip: {
+          show: false
+        },
+        hoverAnimation: false
+      }
+    ]
+  })
+  series.push({
+    name: '',
+    type: 'pie',
+    silent: true,
+    z: 1,
+    clockWise: false, // 顺时加载
+    hoverAnimation: false, // 鼠标移入变大
+    radius: [90 - i * 10 + '%', 86 - i * 10 + '%'],
+    center: ['50%', '50%'],
+    label: {
+      show: false
+    },
+    itemStyle: {
+      label: {
+        show: false
+      },
+      labelLine: {
+        show: false
+      },
+      borderRadius: 60, // 设置每一段子项目的圆角
+
+    },
+    data: [{
+      value: 7.5,
+      itemStyle: {
+        color: colors[1][i]
+      },
+      tooltip: {
+        show: false
+      },
+      hoverAnimation: false
+    },
+      {
+        value: 2.5,
+        itemStyle: {
+          color: 'rgba(0,0,0,0)',
+          borderWidth: 0,
+          borderRadius: 60, // 设置每一段子项目的圆角
+        },
+        tooltip: {
+          show: false
+        },
+        hoverAnimation: false
+      }
+    ]
+  })
+  yAxis.push(((data[i].value / sum) * 100).toFixed(2) + '%')
+}
+option = {
+  backgroundColor: '#012248',
+  color: colors[0],
+  legend: {
+    show: true,
+    icon: 'circle',
+    top: "15%",
+    left: "60%",
+    width:"40%",
+    height:"60%",
+    data: name,
+    orient: 'vertical',
+    formatter: (name) => {
+      return (
+        '{title|' + name + '}   {value|' + data.find((item) => {
+          return item.name === name
+        }).value + '}'
+      )
+    },
+    textStyle: {
+      rich: {
+        title: {
+          fontSize: 14,
+          lineHeight: 30,
+          color: 'rgb(0, 178, 246)'
+        },
+        value: {
+          fontSize: 14,
+          lineHeight: 30,
+          color: '#fff'
+        }
+      }
+    }
+  },
+  tooltip: {
+    show: true,
+    trigger: 'item',
+    formatter: '{a}<br>{b}:{c}({d}%)'
+  },
+  grid: {
+    top: "3%",
+    left: "50%",
+    width:"40%",
+    height:"21%",
+    containLabel: false
+  },
+  yAxis: [{
+    type: 'category',
+    inverse: true,
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      interval: 0,
+      inside: true,
+      textStyle: {
+        color: '#fff',
+        fontSize: 14
+      },
+      show: true
+    },
+    data: yAxis
+  }],
+  xAxis: [{
+    show: false
+  }],
+  series: series
+}

src/views/dashboard-screen/syjhdxqk/index.vue

@@ -20,6 +20,7 @@ export default {
   methods: {
     getOption() {
       const baseWidth = 20
+      const offsetWidth = 15
       this.option = {
         backgroundColor: 'rgb(2, 10, 33)',
         color: [],
@@ -73,7 +74,7 @@ export default {
             symbol: 'rect',
 
             symbolSize: ['100%', '100%'],
-            symbolOffset: [-baseWidth, 0],
+            symbolOffset: [-offsetWidth, 0],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
 
@@ -105,7 +106,7 @@ export default {
             type: 'pictorialBar',
             symbol: 'triangle',
             symbolRotate: 180,
-            symbolOffset: [-baseWidth, '96%'],
+            symbolOffset: [-offsetWidth, '96%'],
             symbolSize: ['100%', 12],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
@@ -121,7 +122,7 @@ export default {
             symbol: 'triangle',
             symbolRotate: 180,
             symbolSize: [baseWidth, 12],
-            symbolOffset: [-baseWidth, '-0%'],
+            symbolOffset: [-offsetWidth, '-0%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
             itemStyle: {
@@ -135,7 +136,7 @@ export default {
             symbol: 'rect',
 
             symbolSize: [baseWidth, '100%'],
-            symbolOffset: [-baseWidth, 0],
+            symbolOffset: [-offsetWidth, 0],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
             itemStyle: {
@@ -162,7 +163,7 @@ export default {
               show: true,
               distance: 10,
               color: '#fff',
-              position: [-25, -20]
+              position: [-baseWidth + 5, -20]
             },
             zlevel: -1
 
@@ -177,7 +178,7 @@ export default {
             symbolRotate: 180,
 
             symbolSize: [baseWidth, 12],
-            symbolOffset: [-baseWidth, '0%'],
+            symbolOffset: [-offsetWidth, '0%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
 
@@ -196,7 +197,7 @@ export default {
             symbol: 'rect',
 
             symbolSize: [baseWidth, '100%'],
-            symbolOffset: [baseWidth, '0%'],
+            symbolOffset: [offsetWidth, '0%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
 
@@ -231,7 +232,7 @@ export default {
             symbolRotate: 180,
 
             symbolSize: [baseWidth, 12],
-            symbolOffset: [baseWidth, '96%'],
+            symbolOffset: [offsetWidth, '96%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
 
@@ -249,7 +250,7 @@ export default {
             symbolRotate: 180,
 
             symbolSize: [baseWidth, 12],
-            symbolOffset: [baseWidth, '0%'],
+            symbolOffset: [offsetWidth, '0%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
 
@@ -264,7 +265,7 @@ export default {
             symbol: 'rect',
 
             symbolSize: [baseWidth, '100%'],
-            symbolOffset: [baseWidth, '0%'],
+            symbolOffset: [offsetWidth, '0%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
 
@@ -292,7 +293,7 @@ export default {
               show: true,
               distance: 10,
               color: '#fff',
-              position: [35, -20]
+              position: [baseWidth - 5, -20]
             },
             zlevel: -1
 
@@ -306,7 +307,7 @@ export default {
             symbolRotate: 180,
 
             symbolSize: [baseWidth, 12],
-            symbolOffset: [baseWidth, '0%'],
+            symbolOffset: [offsetWidth, '0%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,