大屏

huanghongfeng

2024-07-04 08dd2afd7a9614dad029e94918516b068d413cac

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/bottom/bottomLeftChart/chart.vue

@@ -1,18 +1,14 @@
<template>
  <div>
    <!-- å¹´åº¦å¼€å·¥çŽ‡ -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="480px"
    ></Echart>
    <Echart :options="options" id="bottomLeftChart" height="480px"></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
  data() {
    return {
      options: {},
    };
@@ -28,7 +24,7 @@
  },
  watch: {
    cdata: {
      handler (newData) {
      handler(newData) {
        this.options = {
          title: {
            text: "",
@@ -50,11 +46,9 @@
              color: "#B4B4B4"
            },
            top: "0%",
            left:"15%"
            
          },
          grid: {
            x: "8%",
            x: "12%",
            width: "90%",
            y: "4%"
          },
@@ -113,14 +107,22 @@
            {
              name: "出库量",
              type: "bar",
              barWidth: 40,
              barWidth: 25,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#956FD4" },
                    { offset: 1, color: "#3EACE5" }
                  ])
                  ]),
                  label: {
                    show: true, // æ˜¾ç¤ºæ ‡ç­¾
                    position: 'top', // æ ‡ç­¾ä½ç½®ï¼Œå¯ä»¥è®¾ç½® 'top', 'insideTop', 'inside', 'insideBottom' ç­‰
                    formatter: '{c}', // æ ‡ç­¾å†…容格式器，{c} è¡¨ç¤ºæ•°æ®å€¼
                    fontSize: 14, // æ ‡ç­¾æ–‡å­—大小，默认为 12
                    fontWeight: 'bold', // æ ‡ç­¾æ–‡å­—粗细，默认为 'normal'
                    color: '#ffffff' // æ ‡ç­¾æ–‡å­—颜色，默认为 '#333'
                  }
                }
              },
              data: newData.barData
@@ -128,8 +130,7 @@
            {
              name: "入库量",
              type: "bar",
              barGap: "-100%",
              barWidth: 40,
              barWidth: 25,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
@@ -137,7 +138,15 @@
                    { offset: 0, color: "rgba(156,107,211,0.8)" },
                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                    { offset: 1, color: "rgba(156,107,211,0.2)" }
                  ])
                  ]),
                  label: {
                    show: true, // æ˜¾ç¤ºæ ‡ç­¾
                    position: 'top', // æ ‡ç­¾ä½ç½®ï¼Œå¯ä»¥è®¾ç½® 'top', 'insideTop', 'inside', 'insideBottom' ç­‰
                    formatter: '{c}', // æ ‡ç­¾å†…容格式器，{c} è¡¨ç¤ºæ•°æ®å€¼
                    fontSize: 14, // æ ‡ç­¾æ–‡å­—大小，默认为 12
                    fontWeight: 'bold', // æ ‡ç­¾æ–‡å­—粗细，默认为 'normal'
                    color: '#ffffff' // æ ‡ç­¾æ–‡å­—颜色，默认为 '#333'
                  }
                }
              },
              z: -12,