公共图表头部组件开发+安装echarts 全局引入

haoxuan

2023-12-01 5b2a25025b4426b969f01883201138a51f8b5837

公共图表头部组件开发+安装echarts 全局引入

 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,44 @@
<template>
  <div class="bar-chart">
    <ChartTitle name="车间正品率"></ChartTitle>
    <div class="bar-contents">

    </div>
  </div>
</template>

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

    };
  },
  mounted() {

  },
  watch: {},
  methods: {
    
  },
};
</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;
  }
}
</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,7 @@
import store from "./store"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

import * as echarts from 'echarts'
Vue.config.productionTip = false

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

Vue.use(echarts)
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"