echart图的两边分布图例
·
function init2() {
var myChart = echarts.init(echart2.value)
let sum = 0;
for (let item of chartData.value) {
sum += item.value;
}
var option = {
title: {
// text: "{a|总数}" + "\n{c|" + sum + "}",
// x: "center",
// y: "center",
// textStyle: {
// rich: {
// a: {
// fontSize: 14,
// color: "#5e5e5e",
// },
// c: {
// fontSize: 14,
// color: "#5e5e5e",
// padding: [10, 0],
// },
// },
// },
text: '新兵需求占比图',
top:'0%',
left:'center'
},
color: ["#85acfb","#cfdffd","#85e2bd","#daf6eb","#8795ae","#dbdfe6","#f8ce52","#fdf0cb","#9488fb","#d5d0fd","#93d6f1","#def2fb","#b088cb",],
tooltip: {
trigger: "item",
formatter: "{b} : {c}%",
},
toolbox: {
show: true,
},
legend: [
{
x: 'left',
orient: 'vertical',
left:'10%',
data: [],
top: "center", //水平位置,【left\center\right\数字】
align: "left", //字在图例的左边或右边【left/right】
orient: "vertical", //图例方向【horizontal/vertical】
icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
textStyle: {
color: "#8C8C8C",
},
},
{
top: "center", //水平位置,【left\center\right\数字】
left:'85%',
align: "right", //字在图例的左边或右边【left/right】
orient: "vertical", //图例方向【horizontal/vertical】
icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
textStyle: {
color: "#8C8C8C",
},
x: 'right',
orient: 'vertical',
data: [],
},
],
series: [
{
type: "pie",
radius: ["20%", "40%"],
label: {
normal: {
show: true,
formatter: "{b}",
},
emphasis: {
show: true,
},
},
data: chartData.value,
},
],
};
option.legend[0].data = chartData.value.slice(0, chartData.value.length/2)
option.legend[1].data = chartData.value.slice(-(chartData.value.length / 2))
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
})
}