在默认的饼状图里面,饼图样式是单一的,有时候根据ui需要,根据不同的背景色,需要将图例文字调成白色或者其他颜色,那么,修改这些的还是一句话,修改某个属性即可。
这是我的饼图样式:
1、legend改变图例样式:
legend: {
left: 'left',
top: 'bottom',
// bottom: 10,
data: ['非甲烷总烃', 'PM2.5', 'PM10', '颗粒物', '油烟浓度'],
itemWidth: 24, // 设置宽度
itemHeight: 14, // 设置高度
itemGap: 5, // 设置间距
textStyle: {
// 文字颜色
color: '#fff',
// 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight: '400',
// 字体系列
fontFamily: 'Source Han Sans CN',
// 字体大小
fontSize: 12
}
},
2、addEventListener自适应宽度:
setTimeout(function() {
window.addEventListener('resize', function() {
echertID.resize()
})
}, 50)
3、自定义饼图颜色:
// var colors = ['#FDD100', '#08CED0', '#7351E3', '#FF4873', '#01BE6E']
// 颜色下标,每次渲染饼图一个扇区加一操作
// var i = 0
series: [
{
itemStyle: {
normal: {
// 设置饼图的颜色
color: function() {
return colors[i++]
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
4、饼图样式:
series: [
{
name: '占比:',
type: 'pie',
radius