liuguocan
2023-11-28 ed2117c738eedd3143d3b2ad6b0d40b2116afcf6
admin-web/src/views/dashboard/components/LBSLTJ.vue
File was renamed from admin-web/src/views/dashboard/components/GDLX.vue
@@ -1,14 +1,19 @@
<template>
  <div style="width: 100%">
      <div id="main3" />
    <p style="text-align: center;font-size: 16px;font-weight: 600">工单类型</p>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="font-18 font-bold">类别数量统计</span>
      </div>
      <div id="LBSLTJ" style="height: 300px"/>
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import * as dash from "@/api/dashboard/dash";
export default {
  name: 'GDLX',
  name: 'LBSLTJ',
  props: {
    activeId: {
      type: String,
@@ -23,13 +28,8 @@
  },
  mounted() {
    this.getCenterLine();
    // 监听屏幕宽度变化:当浏览器发生resize事件的时候,触发echart的resize事件,重绘canvas
    window.addEventListener('resize', () => {
      this.changeWidth();
    });
  },
  methods: {
    getCenterLine() {
      // getCenterLine({
      //   id: this.activeId,
@@ -39,8 +39,12 @@
      //   endDay: this.value2 ? this.value2[1] : null
      // }).then(res => {
      //   const data = res.data
      var chartDom = document.getElementById('main3');
      var chartDom = document.getElementById('LBSLTJ');
      this.myChart = echarts.init(chartDom);
      // 监听屏幕宽度变化:当浏览器发生resize事件的时候,触发echart的resize事件,重绘canvas
      window.addEventListener('resize', () => {
        this.changeWidth();
      });
      this.options = {
        color: [ '#1877FF','#5EDEA5','#F7BE12','#55C6E1','#ED653B'],
        tooltip: {
@@ -49,27 +53,17 @@
            type: 'shadow',
          },
        },
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   left: 'right',
        //   top: 'center',
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        legend: {
          orient: 'vertical',
          right: 0,
          top: 60,
          bottom: 20,
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%','65%'],
            minAngle: 2, // 最小的扇区角度(0~360),用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            itemStyle: {
@@ -88,9 +82,9 @@
              }
            },
            data: [
              { value: 1048, name: '计划工单' },
              { value: 735, name: '故障工单' },
              { value: 580, name: '日常工单' },
              { value: 100, name: '等级一' },
              { value: 100, name: '等级二' },
              { value: 100, name: '等级三' },
            ]
          }]
@@ -104,7 +98,7 @@
};
</script>
<style lang="scss" scoped>
#main3 {
#main2 {
  width: 100%;
  height: 300px;
}