uni-app 使用renderjs-echarts时,echarts环形进度条底色渲染不出来

uni-app 使用renderjs-echarts时,echarts环形进度条底色渲染不出来

开发环境 版本号 项目创建方式
Windows win10 CLI
3.1.22.20210709

产品分类:uniapp/App

PC开发环境操作系统:Windows

手机系统:全部

页面类型:vue

打包方式:云端

测试过的手机:苹果X,华为P30

示例代码:

视图层:
```html
<view ref="chart" [@click](/user/click)="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts-box"</view>

数据层:

data() {
return {
option: {
// 圆环内的
title: [
{
text: '22次',
x: 'center',
top: 'center',
textStyle: {
fontSize: '20rpx',
color: 'rgba(255, 255, 255, 0.65)',
fontFamily: 'Lato',
foontWeight: '400'
}
}
],
polar: {
radius: ['80%', '100%'],// 内外圆大小
center: ['50%', '50%']// 圆环的位置
},
angleAxis: {
max: 100,// 圆环沾满的百分比
show: false// 是否显示百分比
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{
name: '',
type: 'bar',
roundCap: true,
barWidth: 100,
showBackground: true,
backgroundStyle: {
color: 'green',// 未达百分比颜色
},
data: [10],// 所占百分比
coordinateSystem: 'polar',
itemStyle: {
color: '#ffffff'
}
}
]
}
};
},

js:

<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue)
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
test: 'test'
})
}
}
}
</script>

也就是option中series中配置的backgroundStyle: { color: 'green'}无效

操作步骤:

到插件市场https://ext.dcloud.net.cn/plugin?id=1207,引入echarts.js,在自己项目中写入以上代码,出效果如上图,配置的底色,显示不出

预期结果:

配置底色能正常显示

实际结果:

配置的底色无法显示,backgroundStyle其他配置也不生效

bug描述:

在app端,引入echarts.js。使用renderjs渲染echarts,如图做一个环形进度条的图表,在echarts官网中直接编辑是正常的,但是在uni.app中编辑,只能渲染出进度的颜色,环形底色渲染不出。

更多关于uni-app 使用renderjs-echarts时,echarts环形进度条底色渲染不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 使用renderjs-echarts时,echarts环形进度条底色渲染不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中使用renderjs渲染ECharts环形进度条时,backgroundStyle配置不生效是常见问题。这通常与ECharts版本兼容性或配置方式有关。

解决方案:

  1. 检查ECharts版本

    • 确保使用的ECharts版本支持backgroundStyle配置(v5.0+完整支持)
    • 建议使用官方最新稳定版本
  2. 修改series配置 将配置调整为:

    series: [{
      type: 'bar',
      roundCap: true,
      barWidth: 100,
      showBackground: true,
      backgroundStyle: {
        color: 'green'
      },
      data: [10],
      coordinateSystem: 'polar',
      itemStyle: {
        color: '#ffffff'
      }
    }]
    
  3. 确保渲染时机正确initEcharts方法中添加:

    this.$nextTick(() => {
      myChart.setOption(this.option)
    })
    
  4. 验证渲染环境

    • 在H5端先测试确认配置正确性
    • 检查App端是否因层级问题导致背景被遮挡
  5. 备选方案 如仍不生效,可改用两个series叠加的方式实现背景效果:

    series: [
      // 背景环
      {
        type: 'bar',
        data: [100],
        barWidth: 100,
        coordinateSystem: 'polar',
        itemStyle: { color: 'green' },
        silent: true
      },
      // 进度环
      {
        type: 'bar',
        data: [10],
        barWidth: 100,
        coordinateSystem: 'polar',
        itemStyle: { color: '#ffffff' }
      }
    ]
回到顶部