划分10个区间精确显示金额单位和金额,通过echarts显示金额并控制echarts金额最大值

  通过传入format_amount方法中金额,获取处理后的数据,考虑到单位有万亿元,亿元,万元,元。

const format_amount = (amount) => {
    if (amount >= 1000000000000 && amount < 10000000000000000) {
        return [(amount / 1000000000000).toFixed(2), "万亿元", 'patent_evaluation_price_wmillion'];
    } if (amount >= 100000000 && amount < 1000000000000) {
        return [(amount / 100000000).toFixed(2), "亿元", 'patent_evaluation_price_million'];
    } else if (amount >= 10000 && amount < 100000000) {
        return [(amount / 10000).toFixed(2), "万元", 'patent_evaluation_price_tenyuan'];
    }if (amount < 10000 && amount > 0) {
        return [amount, "元", 'patent_evaluation_price_yuan'];
    }
}

  例如金额分别为 7117559800、94729336

 

 
划分10个区间精确处理金额单位和金额最大值,将获取到的数据传入echarts动态显示
const setPriceChartData = (pr) => {
    // console.log('11111111', pr >= 1000000000000000 && pr < 10000000000000000);
    if(pr >= 1000000000000000 && pr < 10000000000000000) {
            // 1000兆~1京
        const num = (pr / 1000000000000).toFixed(1)
        const arrData = [{
            value: num,
            name: '万亿元'
        }]
        priceZHOption.value.series[0].data = arrData
        priceZHOption.value.series[0].max = 10000
    }else if(pr >= 100000000000000 && pr < 1000000000000000) {
        // 100兆~1000兆
        const num = (pr / 1000000000000).toFixed(1)
        const arrData = [{
            value: num,
            name: '万亿元'
        }]
        priceZHOption.value.series[0].data = arrData
        priceZHOption.value.series[0].max = 1000
    }else if(pr >= 1000000000000 && pr < 100000000000000) {
            // 1兆~100兆
        const num = (pr / 1000000000000).toFixed(1)
        const arrData = [{
            value: num,
            name: '万亿元'
        }]
        priceZHOption.value.series[0].data = arrData
        priceZHOption.value.series[0].max = 100
    } else if(pr >= 100000000000 && pr < 1000000000000) {
            // 1000亿~1兆
        const num = (pr / 100000000).toFixed(1)
        const arrData = [{
            value: num,
            name: '亿元'
        }]
        priceZHOption.value.series[0].data = arrData
        priceZHOption.value.series[0].max = 10000
    } else if(pr >= 10000000000 && pr < 100000000000) {
                // 100亿~1000亿
        const num = (pr / 100000000).toFixed(1)
        const arrData = [{
            value: num,
            name: '亿元'
        }]
        priceZHOption.value.series[0].data = arrData
        priceZHOption.value.series[0].max = 1000
    } else if(pr >= 100000000 && pr < 10000000000) {
                // 1亿~ 100亿
                const num = (pr / 100000000).toFixed(1)
                const arrData = [{
                    value: num,
                    name: '亿元'
                }]
                priceZHOption.value.series[0].data = arrData
                priceZHOption.value.series[0].max = 100
            } else if(pr >= 10000000 && pr < 100000000) {
                // 1000万~1亿
                const num = (pr / 10000).toFixed(1)
                const arrData = [{
                    value: num,
                    name: '万元'
                }]
                priceZHOption.value.series[0].data = arrData
                priceZHOption.value.series[0].max = 10000
            } else if(pr >= 1000000 && pr < 10000000) {
                // 100万~1000万
                const num = (pr / 10000).toFixed(1)
                const arrData = [{
                    value: num,
                    name: '万元'
                }]
                priceZHOption.value.series[0].data = arrData
                priceZHOption.value.series[0].max = 1000
            } else if(pr >= 10000 && pr < 1000000) {
                // 1万~100万
                const num = (pr / 10000).toFixed(1)
                const arrData = [{
                    value: num,
                    name: '万元'
                }]
                priceZHOption.value.series[0].data = arrData
                priceZHOption.value.series[0].max = 100
            } else if(pr < 10000) {
                const num = pr.toFixed(1)
                const arrData = [{
                    value: num,
                    name: '元'
                }]
                priceZHOption.value.series[0].data = arrData
                priceZHOption.value.series[0].max = 10000
            }
    showPriceZHChart.value = true;
}

其中 priceZHOption 是echarts的options配置项

// 专利评估-专利价值总和
export const petantPriceZHOption = {
    grid:{
      left:0,
      right:0,
      top:10,
      bottom:40
    },
    tooltip:{
      // 触发类型,item 表示鼠标悬浮在数据项上时触发提示
      trigger: 'item',
      // 提示框的格式化函数,自定义提示框的显示内容
      formatter: '{a} <br/>: {c}{b}'
    },
    series: [
      {
        name: '企业专利价格总和',
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        min: 0,
        max: 100,
        center : ['50%', '44%'],
        radius :'88%',
        splitNumber: 12,
        itemStyle: {
          color: '#fff',
          shadowColor: 'rgba(0,138,255,0.45)',
          shadowBlur: 16,
          shadowOffsetX: 2,
          shadowOffsetY: 2
        },
        progress: {
          show: true,
          roundCap: true,
          color:'#0DDAFE',
          width:14,
        }, 
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 14,
            color:[
              [0.1, '#0665D9'],
              [1, '#0665D9'],
            ], // 0~10% 红轴
          }
        },
        pointer:{   //仪表盘指针
          show:false,
        },
        axisTick: {
          show:false,
        },
        splitLine: {
          show:false,
        },
        axisLabel: {
          show:false,
        },
        title: {
            show: false,
        },
        detail: {
            show: false,
        },
        data: []
      }
    ]
};
View Code

之后传入ehcarts组件,渲染echarts

chartInstance.value.setOption(priceZHOption.value, true); 
chartInstance.value.resize();

例如传入的金额分别为 7212289500、20681534。

 

 

 

 
posted @ 2025-05-23 15:28  king'sQ  阅读(18)  评论(0)    收藏  举报