feat: 圆柱柱状图

src/components/Customize/cylindricalHistogram.vue

@@ -0,0 +1,221 @@
+<!-- 圆柱柱状图 -->
+ <template>
+
+  <div class="wrap-container sn-container">
+    <div class="sn-content">
+      <!-- <div class="sn-title"></div> -->
+      <div class="sn-body">
+        <div class="wrap-container">
+          <div class="chartsdom" id="cylindrical" >
+         </div>
+        </div>
+      </div>
+    </div>
+  </div>
+ </template>
+
+ <script>
+
+ export default {
+  data() {
+    return {
+      option: null
+
+    }
+  },
+  mounted() {
+    this.getEchart();
+  },
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById('cylindrical'));
+      let information = {
+  barWidth: 40,
+  colorArray: {
+    lineColor: 'rgba(199,214,242, 0.2)',
+    labelColor: ' #c7d6f2'
+  },
+  area: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+  dataArray: [210, 200, 255, 320, 200, 255, 210]
+};
+this.option = {
+  // animation: false, //去除加载时缓动动画
+  backgroundColor: '#021032',
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(9,40,84,0.8)',
+    borderColor: 'rgba(9,40,84,0.8)',
+    textStyle: {
+      fontSize: 20,
+      color: '#fff'
+    },
+    axisPointer: {
+      type: 'shadow'
+    },
+    formatter:
+      "{b}<br/>{a}&nbsp;&nbsp;&nbsp;&nbsp;<span style='font-weight:bold'>{c}</span>"
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: information.colorArray.lineColor
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: information.colorArray.labelColor,
+      fontSize: 20,
+      margin: 30
+    },
+    splitLine: {
+      show: true,
+      interval: information.area.length,
+      lineStyle: {
+        color: information.colorArray.lineColor,
+        width: 1
+      }
+    },
+    data: information.area
+  },
+  grid: {
+    left: '6%',
+    right: '6%',
+    bottom: '8%',
+    top: '24%',
+    containLabel: true
+  },
+  yAxis: {
+    type: 'value',
+    axisTick: {
+      show: false
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: information.colorArray.lineColor,
+        width: 2
+      }
+    },
+    axisLabel: {
+      margin: 20,
+      color: information.colorArray.labelColor,
+      fontSize: 20,
+      fontWeight: 400
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: information.colorArray.lineColor,
+        width: 2
+      }
+    }
+  },
+  series: [
+    {
+      name: '报修数量',
+      tooltip: {
+        show: true
+      },
+      type: 'bar',
+      barWidth: information.barWidth, //柱子宽度
+      label: {
+        show: true,
+        position: 'top',
+        padding: 10,
+        fontSize: 20,
+        color: '#00ffff',
+        fontWeight: 'bold'
+      },
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgba(54,131,241, 0.8)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(5,47,121, 0.8)'
+          }
+        ])
+      },
+      data: information.dataArray,
+      legendHoverLink: false
+    },
+    {
+      // 柱子底部椭圆
+      name: '报修数量',
+      tooltip: {
+        show: false
+      },
+      type: 'pictorialBar',
+      itemStyle: {
+        //未填充部分鼠标移上去颜色
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: '#0642a2'
+          },
+          {
+            offset: 1,
+            color: '#073d97'
+          }
+        ])
+      },
+      symbolRotate: 0,
+      symbolSize: [information.barWidth, 20],
+      symbolOffset: [0, 10],
+      symbolPosition: 'start',
+      data: information.dataArray,
+      z: 3
+    },
+    {
+      // 柱子头部椭圆
+      name: '报修数量',
+      tooltip: {
+        show: false
+      },
+      type: 'pictorialBar',
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: '#75aefd'
+          },
+          {
+            offset: 1,
+            color: '#74aefc'
+          }
+        ])
+      },
+      symbolRotate: 0,
+      symbolSize: [information.barWidth, 20],
+      symbolOffset: [0, -10],
+      symbolPosition: 'end',
+      data: information.dataArray,
+      z: 3
+    }
+  ]
+};
+
+ myChart.setOption(this.option,true);
+
+    }
+  },
+  beforeDestroy() {
+
+  }
+};
+ </script>
+
+ <style lang="scss" scoped>
+.sn-container {
+  width: 486px;
+  height: 300px;
+  .chartsdom {
+    width: 100%;
+    height: 100%;
+  }
+}
+ </style>

src/views/page1/index.vue

@@ -2,17 +2,22 @@
   <div class="home-container">
     <div class="wrap" ref="editor">
       <div class="top"></div>
-      <div class="box">一些内容</div>
+      <div class="box">
+
+        <cylindricalHistogram></cylindricalHistogram>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { screenSize } from "@/assets/js/utils";
-
+import cylindricalHistogram from "@/components/Customize/cylindricalHistogram"
 export default {
   name: "Home",
-  components: {},
+  components: {
+    cylindricalHistogram
+  },
   data() {
     return {};
   },