首页样式

src/views/home/components/LossSum.vue

@@ -0,0 +1,163 @@
+<template>
+  <ModelBox name='1-1'>
+    <div class='loss-sum'>
+      <SwitchBtn class='switch-btn' @chooseBtn='chooseBtn'/>
+      <div id='lossSum' style='width: 584px; height: 270px;'></div>
+    </div>
+  </ModelBox>
+</template>
+<script>
+import * as echarts from 'echarts';
+import ModelBox from './ModelBox.vue';
+import SwitchBtn from './SwitchBtn.vue';
+export default {
+  name: 'LossSum',
+  components: {
+    ModelBox,
+    SwitchBtn
+  },
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    this.getChart()
+  },
+  methods: {
+    getChart() {
+      var chartDom = document.getElementById('lossSum');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        color: ['#FFCE6A', '#96F0B1', '#63BDFF', '#288AFF', '#AC8BFF', '#7164FF', '#3B2BFD'],
+        legend: {
+          top:18,
+          right:5,
+          itemWidth:8,
+          itemHeight:8,
+          textStyle:{
+            color: '#8C8C8C',
+            fontSize: '14px'
+          }
+        },
+        grid: {
+          top: 50,
+          left: 10,
+          right: 5,
+          bottom: 5,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: function(params) {
+            let result = `<span>${params[0].name}</span><br/>`;
+            params.forEach(item => {
+              result += `<div style="display:flex;align-items:center;">
+                <span style="display:inline-block;width:8px;height:8px;background:${item.color};margin-right:5px;"></span>
+                <span style="display:inline-block;margin-right:20px;">${item.seriesName}</span>
+                <span style="font-weight:bold;">${item.value}</span><br/>
+              </div>`;
+            });
+            return result;
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show:true,
+            lineStyle:{
+              color: 'rgba(0,0,0,0.45)'
+            }
+          },
+          axisTick: {
+            show:false
+          },
+          data:['A1', 'A2', 'A3', 'A4', 'A5']
+        },
+        yAxis: {
+          name:'单位/片',
+          nameTextStyle:{
+            color: 'rgba(0,0,0,0.45)',
+            fontSize: '14px'
+          },
+          axisLine: {
+            show:true,
+            lineStyle:{
+              color: 'rgba(0,0,0,0.45)'
+            }
+          }
+        },
+        series: [
+          {
+            name: '包装',
+            type: 'bar',
+            barGap: '30%',
+            barWidth: 8,
+            data: [433, 858, 937, 926, 928]
+          },
+          {
+            name: '上片',
+            type: 'bar',
+            barGap: '30%',
+            barWidth: 8,
+            data: [831, 734, 551, 864, 810]
+          },
+          {
+            name: '磨边',
+            type: 'bar',
+            barGap: '30%',
+            barWidth: 8,
+            data: [864, 652, 825, 810, 810]
+          },
+          {
+            name: '打孔',
+            type: 'bar',
+            barGap: '30%',
+            barWidth: 8,
+            data: [724, 539, 391, 810, 810]
+          },
+          {
+            name: '丝印',
+            type: 'bar',
+            barGap: '30%',
+            barWidth: 8,
+            data: [831, 734, 551, 864, 810]
+          },
+          {
+            name: '镀膜',
+            type: 'bar',
+            barGap: '30%',
+            barWidth: 8,
+            data: [864, 652, 825, 810, 810]
+          },
+          {
+            name: '钢化',
+            type: 'bar',
+            barGap: '30%',
+            barWidth: 8,
+            data: [433, 858, 937, 926, 928]
+          },
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    chooseBtn(val) {
+      console.log(val)
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.loss-sum {
+  position: relative;
+  .switch-btn {
+    position: absolute;
+    right: -3px;
+    top: -27px;
+  }
+}
+</style>