mm

src/router/index.js

@@ -91,7 +91,7 @@ export const constantRoutes = [
     children: [
       {
         path: '',
-        component: () => import('@/views/dashboard-screen/index'), // Parent router-view
+        component: () => import('@/views/dashboard-screen/jryl/index'), // Parent router-view
         name: 'fault',
         meta: { title: '大屏', pages: ['pc:catenary:jlgz'] }
       }

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

@@ -0,0 +1,278 @@
+<template>
+  <div class="chart-wrap">
+    <v-chart autoresize :option="option"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'Jryl',
+  data() {
+    return {
+      option: {}
+    }
+  },
+  created() {
+    this.getOption()
+  },
+
+  methods: {
+    getOption() {
+      var xData2 = ['变电', '电力']
+      var data = [
+        [50, 50, 50],
+        [100, 100, 100],
+        [80, 80, 80]
+      ]
+      const sealingData = []
+      const gapPerSize = 5
+      const gapData = data.map(() => [gapPerSize, gapPerSize, gapPerSize])
+
+      data.forEach((item, index) => {
+        let sealingBeforeItem = item
+        let sealingStart = [0, 0, 0]
+        let sealingEnd = sealingBeforeItem
+        if (index > 0) {
+          sealingBeforeItem = sealingData[index - 1][1]
+          sealingStart = sealingBeforeItem.map((d) => {
+            return d + gapPerSize
+          })
+          sealingEnd = sealingBeforeItem.map((d, dIndex) => {
+            return d + gapPerSize + item[dIndex]
+          })
+        }
+        sealingData[index] = [sealingStart, sealingEnd]
+        // const gapItem = item.map(n => {
+        //   return n + gapPerSize
+        // })
+        // gapData.push(gapItem)
+      })
+      window['sealingData'] = sealingData
+      var barWidth = 30
+      this.option = {
+        backgroundColor: '#021132',
+        tooltip: {
+          trigger: 'item'
+        },
+        grid: {
+          left: 100,
+          bottom: 100
+        },
+        xAxis: {
+
+          type: 'value'
+
+        },
+        yAxis: {
+          data: xData2,
+          type: 'category',
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
+
+        },
+        series: [
+          { // bar1
+            name: 'bar1',
+            type: 'bar',
+            stack: 'total',
+            barWidth: barWidth,
+            itemStyle: { // lenged文本
+              opacity: 1,
+              color: function(params) {
+                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                  offset: 0,
+                  color: 'rgba(135, 49, 17,.4)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgb(135, 49, 17)' // 100% 处的颜色
+                }], false)
+              }
+            },
+            data: data[1]
+          },
+          { // gapBar
+            name: 'gapBar',
+            type: 'bar',
+            barWidth: barWidth,
+            stack: 'total',
+            z: 0,
+            itemStyle: {
+              color: 'rgba(255,0,0,1)',
+              opacity: 0.7
+            },
+            data: gapData[0]
+          },
+          { // bar2
+            name: 'bar2',
+            type: 'bar',
+            stack: 'total',
+            barWidth: barWidth,
+            itemStyle: { // lenged文本
+              opacity: 0.7,
+              color: function(params) {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(138, 138, 36,.4)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgb(138, 138, 36)' // 100% 处的颜色
+                }], false)
+              }
+            },
+            data: data[1]
+          },
+          { // gapBar
+            name: 'gapBar',
+            type: 'bar',
+            barWidth: barWidth,
+            stack: 'total',
+            z: 0,
+            itemStyle: {
+              color: 'rgba(255,0,0,1)',
+              opacity: 0.7
+            },
+            data: gapData[1]
+          },
+          { // bar2
+            name: 'bar3',
+            type: 'bar',
+            stack: 'total',
+            barWidth: barWidth,
+            itemStyle: { // lenged文本
+              opacity: 0.7,
+              color: function(params) {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(60, 151, 171,.4)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgb(60, 151, 171)' // 100% 处的颜色
+                }], false)
+              }
+            },
+            data: data[2]
+          },
+          // { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
+          //   type: 'bar',
+          //   barWidth: barWidth,
+          //   barGap: '-100%',
+          //   stack: '广告',
+          //   itemStyle: {
+          //     color: 'transparent'
+          //   },
+          //   data: data1
+          // },
+          { // 上半截柱子顶部圆片
+            'name': '',
+            'type': 'pictorialBar',
+            'symbolSize': [15, barWidth],
+            'symbolOffset': [5, 0],
+            'symbolRotate': 180,
+            'z': 12,
+            'symbolPosition': 'end',
+            itemStyle: {
+              color: '#163F7A',
+              opacity: 1
+            },
+            label: {
+              show: true,
+              position: 'top',
+              fontSize: 16,
+              color: '#fff'
+            },
+            'data': data[0]
+          },
+          { // 下半截柱子顶部圆片
+            'name': '',
+            'type': 'pictorialBar',
+            'symbol': 'circle',
+            'symbolRotate': 180,
+            'symbolSize': [15, barWidth],
+            'symbolOffset': [10, 0],
+            'z': 12,
+            itemStyle: {
+              opacity: 1,
+              color: function(params) {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#FF9A22' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#FFD56E' // 100% 处的颜色
+                }], false)
+              }
+            },
+            label: {
+              show: true,
+              position: 'top',
+              fontSize: 16,
+              color: '#fff'
+              // formatter:(item)=>{
+              //     console.log(item)
+              //     return 'ssss'
+              // }
+            },
+            'symbolPosition': 'end',
+            'data': data[1]
+          },
+          { // 下半截柱子底部圆片
+            'name': '',
+            'type': 'pictorialBar',
+            'symbolSize': [15, barWidth],
+            'symbolRotate': 180,
+            'symbolOffset': [-5, 0],
+            'z': 12,
+            itemStyle: {
+              opacity: 1,
+              color: function(params) {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#FF9A22' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#FFD56E' // 100% 处的颜色
+                }], false)
+              }
+            },
+            'data': [1, 1, 1, 1, 1]
+          }
+
+        ]
+      }
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+
+$xHeight: 120px;
+.chart-wrap {
+  width: 100%;
+  height: 100%;
+
+  .left-bar {
+    width: 35px;
+    display: inline-block;
+  }
+
+  .right-conent {
+    width: calc(100% - 35px);
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: auto $xHeight;
+  }
+
+}
+</style>

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

@@ -12,6 +12,7 @@
 <script>
 // import { getPie3D, getParametricEquation } from 'chart.js' // 工具类js，页面路径自己修改
 import * as echarts from 'echarts'
+import { param } from '@/utils'
 
 export default {
   name: 'Chart',
@@ -200,6 +201,7 @@ export default {
             typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
 
             seriesItem.itemStyle = itemStyle
+            // seriesItem.itemStyle = pieData[i].itemStyle
           }
           series.push(seriesItem)
         }
@@ -211,13 +213,47 @@ export default {
           console.log(series[i])
           series[i].pieData.startRatio = startValue / sumValue
           series[i].pieData.endRatio = endValue / sumValue
-          series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value)
+          series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, true, false, k, 1)
 
           startValue = endValue
 
           legendData.push(series[i].name)
         }
 
+        // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+        series.push({
+          name: 'mouseoutSeries',
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          itemStyle: {
+            opacity: 1,
+            color: 'rgba(255,255,255,0.02)'
+          },
+          parametricEquation: {
+            u: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20
+            },
+            v: {
+              min: 0,
+              max: Math.PI,
+              step: Math.PI / 1.4
+            },
+            x: function(u, v) {
+              return Math.sin(v) * Math.sin(u) + Math.sin(u)
+            },
+            y: function(u, v) {
+              return Math.sin(v) * Math.cos(u) + Math.cos(u)
+            },
+            z: function(u, v) {
+              return Math.cos(v) > 0 ? 0.1 : -0.1
+            }
+          }
+        })
         // 准备待返回的配置项，把准备好的 legendData、series 传入。
         const option = {
           tooltip: {
@@ -227,9 +263,19 @@ export default {
               }
             }
           },
+          // visualMap: {
+          //   show: false,
+          //   dimension: 2,
+          //   min: -1,
+          //   max: 1,
+          //   inRange: {
+          //     // color: ['#000de4', '#4575b4', '#74add1',]
+          //   }
+          // },
           legend: {
             data: legendData,
             position: 'right',
+            selectedMode: false,
             right: '5%',
             top: '10%',
             // height: '',
@@ -239,6 +285,30 @@ export default {
               fontSize: this.EchartfontSize(14)
             }
           },
+          labelLine: {
+            show: true,
+            lineStyle: {
+              // color: '#7BC0CB'
+            }
+          },
+          label: {
+            show: true,
+            position: 'outside',
+            textStyle: {
+              color: '#ffffff',
+              fontSize: this.EchartfontSize(200)
+            }
+            // rich: {
+            //   b: {
+            //     color: '#7BC0CB',
+            //     fontSize: this.EchartfontSize(20),
+            //     lineHeight: this.EchartfontSize(100)
+            //   },
+            //   c: {
+            //     fontSize: this.EchartfontSize(20)
+            //   }
+            // }
+          },
           xAxis3D: {
             min: -1,
             max: 1
@@ -251,59 +321,101 @@ export default {
             min: -1,
             max: 1
           },
-          labelLine: {
-            show: true,
-            lineStyle: {
-              color: '#ffffff'
-            }
-          },
-          label: {
-            show: true,
-            position: 'outside',
-          },
           grid3D: {
+            top: '-10%',
             show: false,
-            boxHeight: 10,
+            boxHeight: 20,
             environment: undefined,
             viewControl: {
-              distance: 200,
+              distance: 260,
               alpha: 25,
-              beta: 130
+              // beta: 130,
+              beta: 0,
+              rotateSensitivity: 0, // 设置为0无法旋转
+              zoomSensitivity: 0, // 设置为0无法缩放
+              panSensitivity: 0, // 设置为0无法平移
+              autoRotate: false // 自动旋转
             }
-
           },
           series: series
         }
         return option
       }
 
-      // 传入数据生成 option
-      this.option = getPie3D([{
-        name: '已消除',
+      const optionData = [{
+        name: '完成',
         value: 3,
         itemStyle: {
           opacity: 0.5,
-          color: 'rgba(0,127,244,.8)'
+          color: 'rgba(33,229,248,0.8)'
         }
-      },
 
-      {
-        name: '未消除',
+      }, {
+        name: '剩余',
         value: 1,
         itemStyle: {
           opacity: 0.5,
-          color: 'rgba(209,126,23,.8)'
+          color: 'rgba(217,187,62,0.8)'
         }
       }
 
-      ], 2)
+      ]
+
+      // 传入数据生成 option
+      this.option = getPie3D(optionData, 0)
+
+      this.option.series.push({
+        name: '', // 自己根据场景修改
+        type: 'pie',
+        hoverAnimation: false, // 悬停不放大
+        labelLine: {
+          length: this.EchartfontSize(30),
+          length2: this.EchartfontSize(20)
+        },
+        label: {
+          position: 'outside',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: this.EchartfontSize(13)
+          },
+          formatter: (params) => {
+            const arr = [
+              `{a|${params.name}}`,
+              `{b|${params.value}}`
+            ]
+            return arr.join(' ')
+          },
+          rich: {
+            a: {
+              color: '#ffffff',
+              fontSize: this.EchartfontSize(13)
+            },
+            b: {
+              color: 'rgba(33,229,248)',
+              fontSize: this.EchartfontSize(13),
+              verticalAlign: 'top',
+              align: 'center'
+
+            }
+          }
+
+        },
+        startAngle: 25, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['50%', '50%'],
+        center: ['50%', '58%'],
+        data: optionData,
+        itemStyle: {
+          opacity: 0 // 这里必须是0，不然2d的图会覆盖在表面
+        }
+      })
     }
 
   }
 }
 </script>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
 .chart-container {
   position: relative;
   width: 100%;
@@ -325,13 +437,13 @@ export default {
     left: 0;
     right: 0;
     top: 0;
-    bottom: -1vw;
+    bottom: -5vw;
     z-index: 1;
     width: 100%;
     background-repeat: no-repeat;
     background-image: url('/static/images/chart_opacity_bg.png');
-    background-size: 60% 80%;
-    background-position: center 70%;
+    background-size: 22vh 15vh;
+    background-position: center 28%;
   }
 }
 </style>