taro框架开发微信小程序, 使用适用于Taro项目的ECharts图表组件Taro-Echarts
1、饼状图在安卓机器上字体却特别小,例如:
解决方法: 在series.label下加一个空的rich标签
2、echarts饼状环形图点击环形中间空心会变成实心,例如:
解决方法: 设置series.silent的值为true
import Taro from '@tarojs/taro';
import Chart from 'taro-echarts';
class Occupancy extends Taro.Component {
constructor(props) {
super(props);
this.state = {
vipOccupancy: 30, //vip入住率
};
}
static options = { addGlobalClass: true }
//入住率饼状图表配置
optionPieOccupancy = (ox, name, color) => {
return {
color: [color, '#ccc'],
series: [
{
type: 'pie',
radius: ['60%', '80%'],
avoidLabelOverlap: false,
hoverAnimation: false,
silent: true, //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件
labelLine: {
show: false
},
label: { rich: {} },
data: [
{
value: ox * 100,
name,
selected: false,
label: {
show: true,
position: 'center',
fontSize: 15,
formatter: '{b}\n{d}%',
},
},
{
value: 100 - ox * 100,
label: { show: false }
}
]
}
]
}
}
render() {
const { vipOccupancy } = this.state;
return (
<View className='vip'>
<Chart option={this.optionPieOccupancy(vipOccupancy, 'vip入住率', '#9370DB')} />
</View>
)
}
}
export default Occupancy;