uni-app 高性能跨全端图表组件秋云 ucharts echarts 中 为什么圆弧进度条不显示百分比和标题呢

uni-app 高性能跨全端图表组件秋云 ucharts echarts 中 为什么圆弧进度条不显示百分比和标题呢

<qiun-data-charts type="arcbar" :chartData="chartData1" />  

chartData1: {  
    series: [  
        {  
            name: '纯度',  
            data: 0.6,  
            color: '#2fc25b'  
        }  
    ]  
},
2 回复

这个是手动设置的 <qiun-data-charts inScrollView canvas2d canvasId='SchoolLevels' reload type="ring" :opts="defaultSetting" :chartData="chartData1" background="none" />
data(){ return{ defaultSetting: { title: { name: ‘百分比’ }, subtitle: { name: ‘10%’ } }, } } 动态改这俩的name就行

更多关于uni-app 高性能跨全端图表组件秋云 ucharts echarts 中 为什么圆弧进度条不显示百分比和标题呢的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中使用秋云ucharts的圆弧进度条（arcbar）时，百分比和标题默认不显示，需要手动配置。以下是解决方案：

  1. 显示百分比：在series配置中添加format属性，例如：
series: [{
  name: '纯度',
  data: 0.6,
  color: '#2fc25b',
  format: (val) => (val * 100).toFixed(1) + '%'
}]
  1. 显示标题：通过title配置项设置：
chartData1: {
  title: {
    name: '纯度分析',
    fontSize: 14,
    color: '#333'
  },
  series: [...]
}
  1. 完整配置示例：
chartData1: {
  title: {
    name: '纯度',
    fontSize: 14,
    color: '#333'
  },
  series: [{
    name: '纯度',
    data: 0.6,
    color: '#2fc25b',
    format: (val) => (val * 100).toFixed(1) + '%'
  }]
}
  1. 调整位置：如需调整百分比显示位置，可使用extra.arcbar配置：
extra: {
  arcbar: {
    startAngle: 0.75,
    endAngle: 0.25
  }
}
回到顶部