ECharts中label
都支持formatter
和rich
,label
可能会有多个属性组合而成,
如下图所示,访问来源就是一个通过formatter
和rich
自定义的一个label
。
部分代码如下所示:
series: [{
name: '访问来源',
type: 'pie',
radius: ['40%', '55%'],
label: {
normal: {
formatter: '{a|{a}}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
}
}
}
}
}]
其中访问来源
和百分比
如果我想要保持和色块同一个颜色,即如下图所示
此时可以在rich
定义多个属性,代表不同的颜色值和背景色
如下所示的color0
–color4
和bg0
–bg4
const per = {
color: '#eee',
padding: [2, 4],
borderRadius: 2
}
rich: {
color0: {
color: '#c23531',
lineHeight: 22,
align: 'center'
},
color1: {
color: '#2f4554',
lineHeight: 22,
align: 'center'
},
color2: {
color: '#61a0a8',
lineHeight: 22,
align: 'center'
},
color3: {
color: '#d48265',
lineHeight: 22,
align: 'center'
},
color4: {
color: '#91c7ae',
lineHeight: 22,
align: 'center'
},
bg0: {
...per,
backgroundColor: '#c23531'
},
bg1: {
...per,
backgroundColor: '#2f4554'
},
bg2: {
...per,
backgroundColor: '#61a0a8'
},
bg3: {
...per,
backgroundColor: '#d48265'
},
bg4: {
...per,
backgroundColor: '#91c7ae'
}
}
最后利用formatter
配合rich
就能实现自定义效果,此处用了ES6的字符串拼接方法,/
斜杠是为了转义rich
的大括号
formatter: (params) => {
console.log(params)
const seriesName = params.seriesName;
const name = params.name;
const value = params.data.value;
const percent = params.percent + '%';
const index = params.dataIndex;
return `\{color${index}|${seriesName}\}\n\{hr|\}\n \{b|${name}:\}${value} \{bg${index}|${percent}\} `
}
完整代码:
可直接复制代码到此处直接运行:https://www.echartsjs.com/examples/editor.html
const per = {
color: '#eee',
padding: [2,4],
borderRadius: 2
}
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['40%', '55%'],
label: {
normal: {
//formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ',
formatter: (params) => {
console.log(params)
const seriesName = params.seriesName;
const name = params.name;
const value = params.data.value;
const percent = params.percent + '%';
const index = params.dataIndex;
return `\{color${index}|${seriesName}\}\n\{hr|\}\n \{b|${name}:\}${value} \{bg${index}|${percent}\} `
},
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
rich: {
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
color0: {
color: '#c23531',
lineHeight: 22,
align: 'center'
},
color1: {
color: '#2f4554',
lineHeight: 22,
align: 'center'
},
color2: {
color: '#61a0a8',
lineHeight: 22,
align: 'center'
},
color3: {
color: '#d48265',
lineHeight: 22,
align: 'center'
},
color4: {
color: '#91c7ae',
lineHeight: 22,
align: 'center'
},
bg0: {
...per,
backgroundColor: '#c23531'
},
bg1: {
...per,
backgroundColor: '#2f4554'
},
bg2: {
...per,
backgroundColor: '#61a0a8'
},
bg3: {
...per,
backgroundColor: '#d48265'
},
bg4: {
...per,
backgroundColor: '#91c7ae'
}
}
}
},
data:[
{value:335, name:'直达'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1048, name:'谷歌'}
]
}
]
}
这个博客怎么搭建的啊(☆ω☆)
傻瓜式部署可以用宝塔面板,前提你得有个自己的服务器。