谭小谭
谭小谭
  • 发布:2021-07-23 09:37
  • 更新:2021-07-23 09:37
  • 阅读:557

【报Bug】使用renderjs-echarts,使用echarts做环形进度,环形条进度底色渲染不出来

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

手机系统: 全部

页面类型: vue

打包方式: 云端

项目创建方式: CLI

CLI版本号: 3.1.22.20210709

测试过的手机:

苹果X,华为P30

示例代码:

视图层:
<view ref="chart" @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中编辑,只能渲染出进度的颜色,环形底色渲染不出。

2021-07-23 09:37 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复