vue 之 echarts饼形图 如何显示负数份额

vue 之 echarts饼形图 如何显示负数份额

饼形图组件

<template>
  <div class="financial_expenses_bar">
    <div class="chart" ref="pie_chart"></div>
  </div>
</template>

<script>
export default {
  name: "FinancialExpensesBar",
  components: {},
  props: {
    barChartData: {
      type: Array,
      default() {
        return [];
      },
    },
    barChartColor: {
      type: Array,
      default() {
        return [];
      },
    },
    barChartRadius: {
      type: Array,
      default() {
        return ["50%", "50%"];
      },
    },
  },
  mounted() {
    this.getPieChatr();
  },
  // 监听传递进来的数据 为了更新 eachrts上的数据 因为在mounted需要除此下次
  watch: {
    barChartData() {
      this.getPieChatr();
    },
    barChartColor() {
      this.getPieChatr();
    },
  },
  methods: {
    getPieChatr() {
      let pieChartSimple = this.$echarts.init(this.$refs.pie_chart);

      let changeData = this.barChartData.map((item) => {
        let changeItem = {};
        this.$deepCopy(changeItem, item);
        return changeItem;
      });
      changeData.map((item) => {
        for (let key in item) {
          if (item[key] < 0) {
            item[key] = JSON.stringify(Math.abs(item[key]));
          }
        }
      });
      let that = this;

      //02：配置配置项和数据
      let option = {
        color: this.barChartColor, // 饼形图的颜色数据
        series: [
          {
            name: "余额",
            type: "pie",
            center: ["50%", "45%"],
            radius: this.barChartRadius,
            avoidLabelOverlap: false,
            label: {
              color: "#000",
              show: true,
              position: "outer",
              width: 10,
              height: 0,
              lineHeight: 0,
              labelLine: {
                length: 2,
                length2: 10,
              },
              formatter: function (p) {
                let value =
                  that.barChartData[p.dataIndex].value > 0
                    ? p.value * 1
                    : p.value * -1;
								let name = that.barChartData[p.dataIndex].name;
								let str = "{top|" + name  + "}\n {bottom|" + value + "}"
									return str;
              },

              align: "center",
              rich: {
                top: {
                  color: "#333",
                  fontSize: 12,
                  verticalAlign: "bottom",
                  padding: [3, 3, 0, 3],
                  align: "center",
                },
                bottom: {
                  color: "#333",
                  fontSize: 12,
                  padding: [0, 3, 3, 3],
                  verticalAlign: "top",
                  align: "center",
                },
              },
            },
            labelLine: {
              show: false,
            },
            // 饼形图数据
            data: changeData,
          },
        ],
      };

      //03:使用指定的配置项给实例对象，用于数据显示图表。
      pieChartSimple.setOption(option);
      //4:让图表跟随屏幕自适应
      window.addEventListener("resize", function () {
        pieChartSimple.resize();
      });
    },
  },
};
</script>
<style  lang="scss" scoped>
.financial_expenses_bar {
  height: 290px;
  width: 100%;
  background: #fff;

  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>

深拷贝对象

const deepCopy = (newobj, oldobj) => {
	for (let k in oldobj) {
		let item = oldobj[k];
		if (item instanceof Array) {
			newobj[k] = [];
			deepCopy(newobj[k], item);
		} else if (item instanceof Object) {
			newobj[k] = {};
			deepCopy(newobj[k], item);
		} else {
			newobj[k] = item;
		}
	}
}

传入的数据

• barChartData

 [
    {
      "name": "T",
      "value": "-1.15%"
    },
    {
      "name": "新",
      "value": "1.98%"
    }
  ]

• 。。。