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

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

• • 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.((item) => {let changeItem = {};this.$deepCopy(changeItem, item);return changeItem;});((item) => {for (let key in item) {if (item[key] < 0) {item[key] = JSO.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: #,fontSize: 12,verticalAlign: bottom,padding: [, , 0, ],align: center,},bottom: {color: #,fontSize: 12,padding: [0, , , ],verticalAlign: top,align: center,},},},labelLine: {show: false,},// 饼形图数据data: changeData,},],};//0:使用指定的配置项给实例对象，用于数据显示图表。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>

ct 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%}]

• 。。。