sen-yu-new-web/src/views/reportForms/dye-loss-table/someoneLossChart.vue

<template>
  <!-- 染损报表 中的 指定供应商 -->
  <div id="someoneLossChart" :style="{ width: '100%', height: '600px' }"></div>
</template>

<script>
import * as echarts from 'echarts' //必须有
export default {
  name: 'someoneLossChart', // 未筛选供应商，所有供应商染损分析图
  data() {
    return {}
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const option = {
        title: {
          type: 'category',
          text: '物料染损分析图(指定供应商)'
        },
        tooltip: {},
        legend: {
          data: ['损耗']
        },
        xAxis: {
          data: this.list.oooo
        },
        yAxis: {
          type: 'value',
          name: '(%)'
        },
        series: [
          {
            name: '损耗',
            type: 'line',
            smooth: true,
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      //深色 ,'dark'
      const myChart = echarts.init(document.getElementById('someoneLossChart')) // 图标初始化
      myChart.setOption(option) // 渲染页面

      //随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }

/deep/ .ant-table-footer .ant-table.body {
  // overflow: hidden !important;
}
/deep/ .ant-table.ant-table-bordered .ant-table-footer {
  border: none;
  padding: 0;
}
#myChart {
  h6 {
    font-size: 16px;
    font-weight: 700;
  }
}
</style>