echarts问题及解决方式
一、饼图中心添加文本信息
通过graphic属性进行设置
graphic:{
type:'text',
style:{
text:'{a|容错率}\n{b|20%}',//可设置多行不同样式的问题，在rich里添加就行
rich:{
a:{
fontSize:14,//字体大小
fontWeight:'bold',//字体宽
lineHeight:20,//行高
align:'center',
color:'#008c8c'//字体颜色
},
b:{
fontSize:20,
lineHeight:40,
fontWeight:'bold',
align:'center',
color:'#4A80FF'
}
}
}
}
二、移除饼图legend的icon
设置legend的icon属性为none
legend:{
icon:'none'
}
三、自定义legend的icon样式
在legend的data中进行设置，注意：name名称与series中的name名称对应
legend:{
data:[{
name:'系列1',
color:'red'
},
{
name:'系列2',
color:'blue'
}
]
}
将下方option代码粘贴到这里
option = {
legend: {
top: 'left',
left:'0',
orient:'verticalAlign',
data: [
{
name: '系列1',
itemStyle: {
color: 'red'
}
// color:'red'
},
{
name: '系列2',
itemStyle: {
color: 'blue'
}
}
]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: '系列1' },
{ value: 38, name: '系列2' }
]
}
]
};
四、自定义饼图的legend文本信息及样式
设置legend属性
在formatter中进行设置，可通过设置数组然后转成字符串的形式完成（这里用的Array.prototype.join()）
添加a，b，c，，，，然后在legend下的textStyle中添加rich属性值
legend:{
formatter:(name)=>{
//自定义操作
let arr = [`{a|${name}}`,`{b|100个}`]
return arr.join('\r') //在同一行
// return arr.join('\n') //在不同行
},
textStyle:{
color: '#008c8c',
fontWeight: 'bold',
rich:{
a:{
color:'red'
},
b:{
color:'green'
}
}
}
}
将下方option里的代码粘贴到这里
option = {
legend: {
top: 'bottom',
itemWidth: 14,
formatter: (name) => {
let arr = ['{a|' + name + '}', '{b|12}'];
console.log(arr.join('\n'));
return arr.join('\r');
},
textStyle: {
rich: {
a: {
color: 'green'
},
b: {
color: 'blue'
}
},
},
data: [
{
name: '系列1'
// icon:'circle',
},
{
name: '系列2'
}
]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
labelLine: {
show: false
},
data: [
{
value: 40,
name: '系列1',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: 'red' },
{ offset: 1, color: 'green' }
])
}
},
{ value: 38, name: '系列2' }
]
}
]
};
五、设置了pointer为true后仪表盘指针依旧消失的问题
需要设置data属性
series:[{
type:'gauge',
pointer:{
show:true//false属性时会隐藏指针属性
},
//添加圆形中心指针
anchor:{
show:true,
size:10,
itemStyle:{
borderWidth:5,
borderColor:'#008c8c'//圆形中心的颜色
}
},
data:[{
name:'test',
value:40//必须
}]
}]
六、饼图图例里添加数据里没有的legend
比如：数据形式
data:[
{name:'红色',value:20},
{name:'黄色',value:10},
{name:'蓝色',value:10}
]
需要展示成：
三原色 40个 红色 20个 黄色 10个 蓝色 10个
此时可以用图层叠加的方式，设置z属性(也不一定不设置，但是三原色要在其他的上方)
series:[
{
z:2,
type:'pie',
data:[{name:'三原色',value:40}]
},
{
z:2,
type:'pie',
data:[
{name:'红色',value:20},
{name:'黄色',value:10},
{name:'蓝色',value:10}
]
}
]
七、legend设置对齐
当图例中一个icon对应多行文本时，会出现icon跟文本不对齐的情况，解决方式：设置formatter，改变字符串变成'\n{name}\n{其他内容}'
复制下方代码进行测试点这里
legend:{
top: '5%',
left: 'center',
formatter: (name) => {
let arr = [`{a|${name}}`,`{b|xxx}`]
let str = arr.join('\n')
let tempArr = str.split('\n')
let result = str
for(let prop of tempArr){
result = result.replace(prop,'')
}
return result + str
},
textStyle:{
rich:{
a:{
color:'red'
},
b:{
color:'green'
}
}
}
}
参考博客
AlanTao—echarts中关于自定义legend图例文字
