lanzhouYC/components/lnventoryEcharts.vue

<template>
  <div :id="id" :perCent="perCent" class="lnventoryEcharts"></div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true,
      default: true,
    },
    perCent: {
      type: String,
      required: true,
      default: true,
    },
    totalweight: {
      type: String,
      required: true,
      default: true,
    },
    ALLBrandWeight: {
      type: String,
      required: true,
      default: true,
    },
  },
  data() {
    return {};
  },
  watch: {
    perCent: {
      handler: function (newV) {
        this.getLoadEcharts();
      },
    },
    totalweight: {
      handler: function (newV) {
        this.getLoadEcharts();
      },
    },
    ALLBrandWeight: {
      handler: function (newV) {
        this.getLoadEcharts();
      },
    },
  },
  mounted() {
    this.getLoadEcharts();
  },
  methods: {
    getLoadEcharts() {
      var myChart = this.$echarts.init(document.getElementById(this.id));
      let color = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          //color为渐变色
          offset: 0,
          color: "rgb(9,13,255)",
        },
        {
          offset: 1,
          color: "rgb(24,200,252)",
        },
      ]);
      var option = {
        title: [
          {
            text: (this.perCent * 100).toFixed(0) + "%",
            // text: "50%",
            left: "center",
            top: "center",
            textStyle: {
              fontSize: 20,
              color: "rgb(24,200,252)",
              foontWeight: "600",
              background: "rgba(9,119,150,0.3)",
            },
          },
        ],
        tooltip: {
          show: true,
          trigger: "item",
          // transitionDuration: 0,
          position: "center",
          formatter: function (params) {
            console.log(params, "parsmasfdfasf---0-");
            if (params.dataIndex == 0) {
              return "";
            } else {
              return params.value + "Kg";
            }
          },
        },
        legend: {
          top: "5%",
          left: "center",
        },
        color: [
          "rgba(24,55,123,0.7)",
          "rgb(24,55,123,0.7)",
          "rgb(24,55,123,0.7)",
          "rgb(24,55,123,0.7)",
          "rgb(24,55,123,0.7)",
          "rgb(24,55,123,0.7)",
        ],
        series: [
          {
            name: "",
            type: "pie",
            hoverAnimation: false,
            radius: ["70%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            silent: true,
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgb(24,55,123,0.7)',
            // },
            itemStyle: {
              borderRadius: 10,
              borderColor: "rgb(2,20,42,1)",
              borderWidth: 1,
            },
            label: {
              show: false,
              position: "center",
            },

            labelLine: {
              show: false,
            },

            data: [
              // { value: 2567 },
              // { value: 2567 },
              // { value: 2567 },
              // { value: 2567 },
              // { value: 2567 },
            ],
          },
          {
            name: "库存数量",
            type: "pie",
            legendHoverLink: true,
            hoverAnimation: true,
            silent: false,
            radius: ["70%", "80%"],
            center: ["50%", "50%"],
            labelLine: {
              //删除指示线
              show: false,
            },
            animation: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: "rgb(2,20,42,1)",
              borderWidth: 2,
            },

            emphasis: {
              show: true,
              disable: true,
              scale: false, //不缩放
              scaleSize: 500, //为了防止失效直接设置未0
              label: {
                show: true,
                position: "center",
                borderWidth: 12,
                textStyle: {
                  fontSize: "18",
                  fontWeight: "bold",
                },
                // formatter: function (params) {
                //   console.log(params, "parsmasfdfasf---0-");
                //   if (params.dataIndex == 0) {
                //     return "";
                //   } else {
                //     return params.value;
                //   }
                // },
              },
            },
            data: [
              {
                // value: 2567 * 5 * 10 - 2567 * 5 * this.perCent * 10,
                value: 2567 * 5 * 10 - 2567 * 5 * this.perCent * 10,
                // value: this.perCent,
                // value: this.totalweight,
                // value: 100,
                // label: {
                //   show: false,
                //   position: "center",
                //   borderWidth: 20,
                //   textStyle: {
                //     fontSize: "18",
                //     fontWeight: "bold",
                //   },
                // },
                itemStyle: {
                  normal: {
                    color: "rgba(255,255,255,0)",
                  },
                },
                index: 0,
              },
              {
                value: this.totalweight,
                // value: 580*5-580*5*this.totalweight,
                // value: this.ALLBrandWeight,
                // value: 100,
                itemStyle: {
                  normal: {
                    color: color,
                  },
                },
                index: 1,
              },
            ],
            // data:this.totalweight
          },
          {
            name: "库存数量",
            type: "pie",
            hoverAnimation: false,
            // startAngle: 80,
            radius: ["50%"],
            // hoverAnimation: false,
            // animation: false,
            center: ["50%", "50%"],
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: "18",
            //   },
            // },
            label: {
              show: true,
              position: "center",
              borderWidth: 20,
              textStyle: {
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            itemStyle: {
              color: "rgba(9,119,150,0.3)",
            },
            data: [
              // {
              //   value: 2567 * 5 * 10 - 2567 * 5 * this.perCent * 10,
              //   // value: this.perCent,
              //   // value: this.totalweight,
              //   // value: 100,
              //   itemStyle: {
              //     normal: {
              //       color: "rgba(255,255,255,0)",
              //     },
              //   },
              // },
              // {
              // value:
              2567 * 5 * this.perCent * 10,
              // value: 580*5-580*5*this.totalweight,
              // value: this.ALLBrandWeight,
              // value: 100,
              // itemStyle: {
              //   normal: {
              //     color: color,
              //   },
              // },
              // },
            ],
          },
          {
            name: "",
            type: "pie",
            startAngle: 80,
            hoverAnimation: false,
            radius: ["10%"],
            hoverAnimation: false,
            animation: false,
            center: ["50%", "13%"],
            itemStyle: {
              color: "rgb(21,165,252)",
            },
            data: [100],
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click", function (param) {
        //这个params可以获取你要的图中的当前点击的项的参数
        console.log("param", param);
      });
    },
  },
};
</script>

<style scoped>
/* .lnventory {
 width: 110px;
    height: 100px;
    overflow: hidden;
    background: transparent;
} */
.lnventoryEcharts {
  width: 100% !important;
  height: 100% !important;
}
</style>