package.json

@@ -27,7 +27,7 @@
    "cropperjs": "^1.5.13",
    "d3-force": "^3.0.0",
    "dayjs": "^1.11.7",
    "echarts": "^5.4.1",
    "echarts": "^5.4.3",
    "element-ui": "^2.15.12",
    "faker": "^4.1.0",
    "file-saver": "^2.0.5",

 public/cockpitPage/title-left.png

 src/components/cockpitPage/BackgroundBoardLayout.vue

@@ -166,6 +166,5 @@
}
.right-bottom-block {
  height: 35%;
  background: #dd355f;
}
</style>

 src/components/cockpitPage/BarChart.vue

New file
@@ -0,0 +1,186 @@
<template>
  <div class="bar-chart">
    <ChartTitle name="车间正品率"></ChartTitle>
    <div class="bar-contents">
      <div class="chart" ref="chart"></div>
    </div>
  </div>
</template>

<script>
import ChartTitle from "@/components/cockpitPage/ChartTitle.vue";
//引入echart
import * as echarts from 'echarts'
export default {
  components: {
    ChartTitle,
  },
  props: {},
  data() {
    return {

    };
  },
  mounted() {
    let chartData={
      datax:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datay:[120, 200, 150, 80, 70, 110, 130]
    }
    this.pieChart('chart',chartData)
  },
  watch: {},
  methods: {
    //在职
    pieChart(chartName,data){
          let chartDom = this.$refs[chartName]
          let myChart = echarts.init(chartDom);
          let option;
          if(data){
            option = {
              color:['#618DF8'],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'none'
                }
              },
              grid: {
                right: "11%",
                bottom:'21%',
              },
              dataZoom: [
                {
                  type: 'inside',
                  // show: true, //显示滚动条
                  start:0,
                  end: 100,
                  xAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  // handleSize: 8
                },
                {
                  //   type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
                  type: 'inside',
                  // show: true,
                  // realtime : true,
                  xAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  start: 0,
                  end: 100
                },
              ],
              legend: {
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 35,//间距
                // data:data.legend?[
                //   {
                //     name:data.legend.data[0],
                //     icon: 'roundRect',
                //   },
                // ]:[]
              },
              xAxis: [
                {
                  type: 'category',
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color:'#EAEAEA',
                    }
                  },
                  axisLabel:{
                    rotate:45,
                    margin: 12,
                    show: true,
                    textStyle: {
                      color: '#9B9B9B'
                    },
                  },
                  data: data.datax?data.datax:[],
                }
              ],
              yAxis: [
                {
                  type: '',
                  name: 'yyy',
                  // 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})`)/5)*5 / 5,
                  position: 'left',
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color:'#EAEAEA',
                    }
                  },
                  nameTextStyle:{
                    color:"#9B9B9B",
                  },
                  splitLine: {
                    show: true,
                    lineStyle: {
                      // 使用深浅的间隔色
                      color: '#EAEAEA',
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#9B9B9B'
                    },
                    formatter: ''
                  }
                }
              ],
              series:[
                {
                  type: '',
                  name: 'y',
                  barWidth: '20%',
                  itemStyle: {
                    normal: {
                      //柱形图圆角，初始化效果
                      barBorderRadius:[4, 4, 0, 0],
                    }
                  },
                  data: data.datay,
                }
              ]
            };

            option && myChart.setOption(option);
          }else{
            option={};
            myChart.setOption(option,true);
          }
        },
  },
};
</script>

<style scoped lang="scss">
.bar-chart{
  width:100%;
  height:calc(100% - 10px);
  padding:10px 0 0;
  .bar-contents{
    width:100%;
    height:calc(100% - 60px);
    border:1px solid #00FFFF;
    box-sizing: border-box;
    .chart{
        width: 100%;
        height:100%;
      }
  }
}
</style>

 src/components/cockpitPage/ChartTitle.vue

New file
@@ -0,0 +1,53 @@
<template>
  <div class="chart-title">
    <div class="title-left-tip">
      <img src="/cockpitPage/title-left.png" alt="">
    </div>
    <div class="title-bg">{{ name }}</div>
  </div>
</template>

<script>

export default {
  props: {
    name:{
      type: [String],
      default: () => {
        return '';
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.chart-title{
  width:100%;
  height:40px;
  margin-bottom:20px;
  font-size:18px;
  color:#00FFFF;
  position:relative;
  .title-left-tip{
    position:absolute;
    left:0;
    top:0;
  }
  .title-bg{
    width:100%;
    height:30px;
    padding-left:20px;
    display:inline-block;
    line-height:30px;
    margin-top:5px;
    background:linear-gradient(to right,#081630,#076C80);
  }
}
</style>

 src/main.js

@@ -4,7 +4,6 @@
import store from "./store"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

Vue.config.productionTip = false

// import Element from "element-ui"
@@ -14,7 +13,6 @@
import { preventReClick } from "@/api/global-directives";
Vue.use(preventReClick);
Vue.use(ElementUI)

new Vue({
  router,
  store,

 src/views/cockpitPage/index.vue

@@ -1,12 +1,18 @@
<template>
  <BackgroundBoardLayout></BackgroundBoardLayout>
  <BackgroundBoardLayout>
    <template #rightBlock3>
      <BarChart @should-reload="reloadAllData"></BarChart>
    </template>
  </BackgroundBoardLayout>
</template>

<script>
import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue";
import BarChart from "@/components/cockpitPage/BarChart.vue";
export default {
  components: {
    BackgroundBoardLayout,
    BarChart,
  },
  props: {},
  data() {

 yarn.lock

@@ -5445,13 +5445,13 @@
    jsbn "~0.1.0"
    safer-buffer "^2.1.0"

echarts@^5.4.1:
  version "5.4.1"
  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz"
  integrity sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==
echarts@^5.4.3:
  version "5.4.3"
  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz"
  integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
  dependencies:
    tslib "2.3.0"
    zrender "5.4.1"
    zrender "5.4.4"

editorconfig@^0.15.3:
  version "0.15.3"
@@ -14224,9 +14224,9 @@
    normalize-path "^1.0.0"
    strip-indent "^2.0.0"

zrender@5.4.1:
  version "5.4.1"
  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz"
  integrity sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==
zrender@5.4.4:
  version "5.4.4"
  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz"
  integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
  dependencies:
    tslib "2.3.0"