Echart中rich的使用
1、Title使用rich:
option = {
title:{
left:15,
top:10,
subtext:"AAA  {yellow|316}      BBB  {blue|219}",              subtextStyle:{
fontSize:14,
color:"#333",
rich:{
yellow:{
fontSize:16,
fontWeight:700,
color:'#EEA644'
},
blue:{
fontSize:16,
fontWeight:700,
color:'#42B7D5'
}
}
}
}
};
结果：
2、Label使用rich:
let echartData = [
{ name: '简答题', value: [93] },
{ name: '判断题', value: [55] },
{ name: '单选题 ', value: [66] }]
option = {
series: [{
type: 'pie',
radius: ['40%', '60%'],
center: ['35%', '50%'],
data: echartData,
labelLine: {
normal: {
length: 20,
length2: 20
},
},
label: {
normal: {
formatter: (params) => {
let str = (`{value|${params.value}}`) + '\n' + (`{n ame|${params.name}}`);
return str
},
borderWidth: 5,
borderRadius: 5,
// padding: [0, 86],
height: 70,
fontSize: 20,
show: true,
rich: {
value: {
fontSize: 28,
},
name: {
color: '#666666',
fontSize: 20,
},
}
}
},
}]
};
结果：
3、Legend使用rich:
const option = {
color: [
'#22F0AD',
'#F9DB39'
],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} (件)',
show: true,
position: function(point, params, dom, rect, size) { // 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
var x = point[0] //
var y = point[1]
var viewWidth = size.viewSize[0]
var viewHeight = size.viewSize[1]
var boxWidth = tSize[0]
var boxHeight = tSize[1]
var posX = 0// x坐标位置
var posY = 0// y坐标位置
if (x < boxWidth) { // 左边放不开
posX = 5
} else { // 左边放的下
posX = x - boxWidth
}
if (y < boxHeight) { // 上边放不开
posY = 5
} else { // 上边放得下
posY = y - boxHeight
}
return [posX, posY]
}
},
legend: {
orient: 'vertical',
right: 100,
top: 150,
bottom: 20,
data: [
'已处理',
'未处理'
],
show: true,
icon: 'circle',
itemWidth: 10,
itemHeight: 10,
textStyle: {
rich: {
a: {
align: 'left',
color: '#00E4FF',
padding: [0, 5, 0, 5],
},
b: {
color: '#FFFFFF',
}
}
},
formatter: function(name) {
return'{a|' + name + '}{b|580件}'        }
},
series: [
{
name: '处理情况',
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
label: {
show: false,
position: 'center'
},
data: [
fontweight默认值{ value: 335, name: '已处理' },            { value: 310, name: '未处理' }          ],
animation: false
}
]
}
结果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。