yudao-dev/src/views/home/components/LossSum.vue

<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>