设备负荷对比分析的组件开发

haoxuan

2023-12-01 ac5ea4c47689788facb2471995621c720a06abc8

 src/views/cockpitPage/components/DeviceChart.vue

@@ -1,6 +1,11 @@
<template>
  <div class="bar-chart">
    <ChartTitle name="设备负荷对比分析"></ChartTitle>
    <div class="top-view">
      <img src="/cockpitPage/machine-top.png" alt="" />
      <div class="top-title">
        <span>设备负荷对比分析</span>
      </div>
    </div>
    <div class="bar-contents">
      <div class="chart" ref="chart"></div>
    </div>
@@ -8,19 +13,17 @@
</template>

<script>
import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
//引入echart
import * as echarts from 'echarts'
export default {
  components: {
    ChartTitle,
  },
  props: {},
  data() {
    return {
      chartData:{
        datax:['产品1', '产品2', '产品3', '产品4','产品5', '产品6'],
        datay:[120, 200, 150, 380, 470, 150, 230],
        datax: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6'],
        datay: [10, 20, 15, 38, 47, 50, 20],
      }
    };
  },
@@ -56,7 +59,7 @@
                  // show: true, //显示滚动条
                  start:0,
                  end: 100,
                  xAxisIndex: 0,
              yAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  // handleSize: 8
@@ -66,7 +69,7 @@
                  type: 'inside',
                  // show: true,
                  // realtime : true,
                  xAxisIndex: 0,
              yAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  start: 0,
@@ -113,11 +116,11 @@
              xAxis: [
                {
                  type: '',
                  name: '单位：件',
              name: '',
                  // min: data.yAxis[0].min?data.yAxis.min:0,
                  minInterval: 1,//坐标轴是整数
                  max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//数据最大值加3
                  interval: Math.ceil(eval( `Math.max(${data.datay})`)/7)*7 / 7,
              interval: Math.ceil(eval(`Math.max(${data.datay})`) / 6) * 6 / 6,
                  position: 'left',
                  axisLine: {
                    show: true,
@@ -143,7 +146,7 @@
                    textStyle: {
                      color: '#00FFFF'
                    },
                    
                formatter: '{value}%'
                  }
                },
              ],
@@ -151,7 +154,12 @@
                {
                  type: 'bar',
                  name: '',
                  barWidth: '20%',
              barWidth: '15',
              label:{
                show:true,
                position:'right',
                color: '#00FFFF'
              },
                  itemStyle: {
                    normal: {
                      //柱形图圆角，初始化效果
@@ -186,11 +194,33 @@
  width:100%;
  height:calc(100% - 0px);
  padding:0px 0 0;
  .bar-contents{
    width:100%;
    height:calc(100% - 60px);
    border:1px solid #00FFFF;
    box-sizing: border-box;
  position: relative;
  .top-view {
      height:38px;
      margin-top: -1px;
      margin-left: -1px;
      position: relative;
      left:0;
      top:0;
      .top-title {
        width: calc(100% - 10px);
        margin: auto;
        height:38px;
        line-height:38px;
        position:absolute;
        top:0;
        left:10px;
        color: #01f7fd;
        font-size: 14px;
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
      }
    }
  .bar-contents {
    width: 100%;
    height: calc(100% - 40px);
    .chart{
        width: 100%;
        height:100%;