echarts 饼图格式化金额或其它数据

<template>
  <div>
    <Card class="tableCard">
    	<Row>
            <Col span="2">
              &nbsp;
            </Col>
            <Col span="20">
                <div
                    ref="myPiepagetwo"
                    id="myPiepagetwo"
                    style="height: 300px;width: 100%"
                ></div>
            </Col>
          </Row>
    </Card>
  </div>
</template>
<script>
import echarts from "echarts";
import {
  moneyFormat,
  dateFormat,
  replaceComma,
} from "@/util/common"; // 金额格式化
export default {
  name: "riskReportPdf",
  data() {
    return {
      myPiepagetOneOption: {
        title: {
          text: '总交易金额(元)',
          // subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',

        },
        legend: {
          bottom: 10,
          left: 'center',
         // data: ['对公付款', '对私付款']
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            label: {
              show: true,
              position: "", // 数值显示在内部
              formatter: function (c) {
                return c.value;
              }, // 格式化
              fontSize: 12,
            },
            data: []
          }
        ]
      },
      
    }
  },
    mounted() {
    // 查询方法
    this.initDealNum();
    },
    methods: {
    initDealNum() {
    	this.$net
          .send({
            server: XXXXXX,
            data: {‘查询参数’},
          })
          .then((data) => {
            if (data.code === "200") {
              let page1Data = data.data
              // 交易金额
              this.initDealAmtEcharts(data)
            } else {
              this.$Modal.error({
                title: "错误信息",
                content: data.msg,
              });
            }
          });
    },
     // 交易金额
    initDealAmtEcharts(data) {
    	// div 标签+
      const myChart = echarts.init(this.$refs.myPiepagetwo);
      let columnarOption3 = JSON.parse(JSON.stringify(this.myPiepagetOneOption));
      let a1 = {value: data.data[0].totlAmt, name: data.data[0].tranTypDesc}
      let a2 = {value: data.data[1].totlAmt, name: data.data[1].tranTypDesc}
      columnarOption3.series[0].data.push(a1);
      columnarOption3.series[0].data.push(a2);
		// 格式化函数
      columnarOption3.series[0].label.formatter= function (params) {
       let aa = moneyFormat(params.value);
        return aa;
      }
      myChart.setOption(columnarOption3);
      myChart.resize();
    },
    },
    /**
 * 新格式化金额(保留2位小数)传参,不四舍五入
 */
 export function moneyFormat (money, len) {
    // money:要格式化的数字
    // len:保留几位小数
    if (isEmpty(money)){
        return '0.00';
    }
    len = len || 2
    let arr = (money + '').split('.')
    let intStr = arr[0] ? arr[0] : 0
    let floatStr = arr[1] ? arr[1]  : 0
    if (floatStr == 0) {
      floatStr = 0
      for (var i = 0; i < len - 1; i++) {
        floatStr += '0'
      }
    } else {
       if(floatStr.toString().split('').length < len){
        let subLen = len - floatStr.toString().split('').length;
            for (let i = 0; i < subLen; i++) {
              floatStr += '0'
            }
        //    floatStr = floatStr + '0'
       }else{
        floatStr = floatStr.toString().substring(0, len)
       }

    }
    money = (intStr + '.' + floatStr).replace(/(\d{1,3})(?=(?:\d{3})+\.)/g, '$1,')
    return money
  };
}
  
</script>

重点是:在series插入label
columnarOption3.series[0].label.formatter= function (params) {
let aa = moneyFormat(params.value);
return aa;
}

金额格式化

相关推荐

  1. Vue2 Echarts 3D

    2024-04-02 21:00:05       29 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-02 21:00:05       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-02 21:00:05       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-02 21:00:05       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-02 21:00:05       18 阅读

热门阅读

  1. P1719 最大加权矩形

    2024-04-02 21:00:05       9 阅读
  2. C++中string非成员函数重载

    2024-04-02 21:00:05       15 阅读
  3. 两两交换链表中的节点

    2024-04-02 21:00:05       13 阅读
  4. 2024.2.15力扣每日一题——二叉树的层序遍历2

    2024-04-02 21:00:05       15 阅读
  5. Android invalidate、postInvalidate、requestLayout的区别

    2024-04-02 21:00:05       12 阅读