🌈🌈🌈文章目录
一、饼图图例的排列方式
1.引入饼图
2.水平顶部(底部)排列
3.垂直左右排列
二、formatter使用语法
以图例后面拼接占比百分比为例
1.上下左右排列+占比百分比
2.两端排列+占比百分比
一、饼图图例的排列方式
1.引入饼图
这一步大多数应该都会,官网有例子,直接cv就可以用,简单提一下吧
<template>
<div class="box">
<div id="mycircle"></div>
</div>
</template>
<script>
export default {
data(){
return{
option: {
tooltip:{},
legend:{},
series:[],
......
}
}
},
methods:{
async init(){
var myChart = this.$echarts.init(document.getElementById('mycircle'));
myChart.setOption(this.option);
myChart.clear();
await getIndex7DayException().then(data => {
// data返回值格式就是[{name: '', value: ''}],有且只能是name和value这两个key,其他都不行
// 如果返回值是其他的,那就需要转化一下了
data.map(v =>{
let keymap = {count: 'value',areaName: 'name'} // 将count字段转成value字段,areaName字段转化成name字段
Object.keys(v).map(k =>{
let newKey = keymap[k]
if (newKey) {
v[newKey] = v[k]
delete v[k]
}
})
})
this.option.series[0].data = data;
myChart.setOption(this.option);
window.addEventListener("resize", () => { myChart.resize() });
}
}
},
mounted(){
this.init()
}
}
</script>
到这为止,图表就可以正常显示了,下面开始自定义图例的排列方式
2.水平顶部(底部)排列
top: 0
bottom: 0
示例代码：
legend:{
top: '0',
//bottom: '0'
textStyle: { color: '#fff'},
}
3.垂直左右排列
垂直属性: orient: ‘vertical’,
left: 0
right: 0
示例代码：
legend:{
left: '0',
// right: '0'
textStyle: { color: '#fff'},
orient: 'vertical',
}
3,两端排列
顶部一半,底部一半
legend: [
{
top: '0',
textStyle: { color: '#fff', padding: [11,0,11,0] },
data: [],
},
{
bottom: '0',
textStyle: { color: '#fff', padding: [11,0,11,0] },
data: [],
},
],
init(){
this.option.legend[0].data = legendName.slice(0,5)
this.option.legend[1].data = legendName.slice(-5)
}
左边一半,右边一半
legend: [
{
x: 'left',
textStyle: { color: '#fff', padding: [11,0,11,0] },
orient: 'vertical',
data: [],
},
{
x: 'right',
textStyle: { color: '#fff', padding: [11,0,11,0] },
orient: 'vertical',
data: [],
},
],
init(){
this.option.legend[0].data = legendName.slice(0,5)
this.option.legend[1].data = legendName.slice(-5)
}
二、formatter使用语法
以图例后面拼接占比百分比为例
使用formatter，让每个图例后面拼接该部分占整体的百分比
1.上下左右排列+占比百分比
legend:{
x: 'left',
textStyle: { color: '#fff', },
orient: 'vertical',
data: [],
formatter: e =>{
var data = this.option.series[0].data;
var total = 0;
var val = 0;
data.forEach(el => {
total += el.value;
if(e == el.name) val = el.value
});
return `${e} ${((val / total)*100).toFixed(2)}%`
}
},
this.option.legend.data = legendName
2.两端排列+占比百分比
legend: [
{
x: 'left',
textStyle: { color: '#fff', padding: [11,0,11,0] },
orient: 'vertical',
data: [],
formatter: e =>{
var data = this.option.series[0].data;
var total = 0;
var val = 0;
data.slice(0,5).forEach(el => {
total += el.value;
if(e == el.name) val = el.value
});
return `${e} ${((val / total)*100).toFixed(2)}%`
}
},
{
x: 'right',
textStyle: { color: '#fff', padding: [11,0,11,0] },
orient: 'vertical',
data: [],
formatter: e =>{
var data = this.option.series[0].data;
var total = 0;
var val = 0;
data.forEach(el => {
total += el.value;
if(e == el.name) val = el.value
});
return `${e} ${((val / total)*100).toFixed(2)}%`
}
},
],
this.option.legend[0].data = legendName.slice(0,5)
this.option.legend[1].data = legendName.slice(-5)
好了，本文就到这里吧，点个关注再走嘛~
🚀 个人简介：6年开发经验，现任职某国企前端负责人，分享前端相关技术与工作常见问题~
💟 作 者：前端菜鸟的自我修养❣️
📝 专 栏：GIS地图与大数据可视化
🌈 若有帮助，还请关注➕点赞➕收藏，不行的话我再努努力💪💪💪
更多专栏订阅推荐：
📝 vue从基础到起飞
👍 前端工程搭建
💕 JavaScript深入研究✍️ 前端工作常见问题汇总
