lab-ops-ui-web/src/views/workbench/components/eacharts_x.vue

<template>

  <!-- eacharts 图表 -->
  <div class="bar_charts" id="bar_echart"></div>

</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: "",
    },
    echartData: {
      type: Array,
      default: {}
    },

  },
  watch: {
    echartData(val) {
      this.pieInfo = val
      this.$nextTick(() => {
        this.maintenanceInit()
      })
    }
  },
  data() {
    return {
      form: {
        searchTime: "",
        startTime: "",
        endTime: "",
      },
      calendarShow: false,
      mode: "range",
      upkeepStatInfo: {},
      pieInfo: [],//饼图数据
    };
  },
  mounted() {
  },
  methods: {
    // 维修统计柱状图
    maintenanceInit() {
      let data = [{
        name: '姓名1',
        value: (Math.random() * 10).toFixed(0),
        sum: 10
      },
      {
        name: '姓名1',
        value: (Math.random() * 10).toFixed(0),
        sum: 10
      },
      {
        name: '姓名1',
        value: (Math.random() * 10).toFixed(0),
        sum: 10
      },
      {
        name: '姓名1',
        value: (Math.random() * 10).toFixed(0),
        sum: 10
      },
      {
        name: '姓名1',
        value: (Math.random() * 10).toFixed(0),
        sum: 10
      },

      ];
      let opt = {
        index: 0
      }
      let color = ['#FC619D', '#FF904D', '#48BFE3'];
      let getArrByKey = (data, k) => {
        let key = k || "value";
        let res = [];
        if (data) {
          data.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      };
      var myChart = this.$echarts.init(document.getElementById('bar_echart'));
      let opts = {
        grid: {
          top: '2%',
          bottom: -15,
          right: 30,
          left: -30,
          containLabel: true
        },
        xAxis: {
          show: false
        },
        yAxis: [{
          triggerEvent: true,
          show: true,
          inverse: true,
          data: getArrByKey(data, 'name'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            color: '#666',
            align: 'left',
            margin: 80,
            fontSize: 13,
            formatter: function (value, index) {
              if (opt.index === 0 && index < 3) {
                return '{idx' + index + '|' + (1 + index) + '} {title|' + value + '}'
              } else if (opt.index !== 0 && (index + opt.index) < 9) {
                return '{idx|0' + (1 + index + opt.index) + '} {title|' + value + '}'
              } else {
                return '{idx|' + (1 + index + opt.index) + '} {title|' + value + '}'
              }
            },
            rich: {
              idx0: {
                color: '#FB375E',
                backgroundColor: '#FFE8EC',
                borderRadius: 100,
                padding: [5, 8]
              },
              idx1: {
                color: '#FF9023',
                backgroundColor: '#FFEACF',
                borderRadius: 100,
                padding: [5, 8]
              },
              idx2: {
                color: '#01B599',
                backgroundColor: '#E1F7F3',
                borderRadius: 100,
                padding: [5, 8]
              },
              idx: {
                color: '#333',
                borderRadius: 100,
                padding: [5, 8]
              },
              title: {
                width: 165
              }
            }
          },
        }, {
          triggerEvent: true,
          show: false,
          inverse: true,
          data: getArrByKey(data, 'name'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            color: '#666',
            align: 'left',
            margin: 20,
            fontSize: 13,

          }
        }],
        series: [{
          name: '条',
          type: 'bar',
          yAxisIndex: 0,
          data: data,
          barWidth: 10,
          itemStyle: {
            color: (val) => {
              if (val.dataIndex < 3 && opt.index === 0) {
                return color[val.dataIndex];
              } else {
                return '#1990FF'
              }
            },
            barBorderRadius: 30,
          }
        }]
      };
      //4.使用刚指定的配置项和数据显示图表。
      myChart.setOption(opts);
    },

  },
};
</script>
<style lang="scss" scoped>
.bar_charts {
  width: 100%;
  height: 100%;
}
</style>