let datas = [
{
"name": "橘梨纱",
"value": 91
},
{
"name": "美竹铃",
"value": 237
},
{
"name": "天海翼",
"value": 209
},
{
"name": "泷泽萝拉",
"value": 190
},
{
"name": "樱井莉亚",
"value": 190
},
{
"name": "铃原爱蜜莉",
"value": 190
},
{
"name": "早乙女露依",
"value": 190
},
{
"name": "桃谷绘里香",
"value": 190
}
]
let legendName = datas.map(item => item.name)
let color = ["#dcdc3c", "#2FCAFD", "#C24D59", "#4BACBF", "#DDAE41", "#8946C4"]
let rich = {}
let richOld = {
a: {
width: 145,
fontSize: 15,
fontFamily: 'Bebas',
color: '#fff',
padding: [0, 0, 0, 10],
},
}
color.forEach((item, index) => {
rich[`point${index}`] = {
width: 8,
height: 8,
borderRadius: 5,
backgroundColor: color[index],
}
rich[`b${index}`] = {
width: 60,
align: 'right',
padding: [0, 0, 0, 0],
color: color[index],
fontSize: 15,
// fontWeight: 'bold',
fontFamily: 'Bebas',
}
rich[`c${index}`] = {
padding: [0, 0, 0, 20],
color: color[index],
fontSize: 15,
fontFamily: 'Bebas',
}
})
let legend = {
orient: 'vertical',
selectedMode: false,
left: '24%',
top: '10%',
icon: 'none',
// itemGap: 25,
// itemHeight: 7,
// itemWidth: 7,
formatter(name) { // 该函数用于设置图例显示后的百分比
let data = datas
let total = 0
let value = 0
let idx = data.findIndex((item) => item.name == name)
data.forEach((item) => {
total += item.value
if (item.name == name) {
value = item.value
}
})
let p = ((value / total) * 100).toFixed(2)
return [`{point${idx}|}{a|${name}}{b${idx}|${(value || 0).toString()}个}{d|}{c${idx}|${p || '0'}%}`]
},
textStyle: {
padding: [11, 20, 8, 20],
backgroundColor: 'rgba(42, 54, 68, 0.2)',
rich: { ...rich, ...richOld },
},
}
option = {
backgroundColor: '#fff',
xAxis: {
show: false,
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {
show: false,
},
legend,
series: [
{//第一节
name: legendName[0],
type: 'bar',
// barWidth:20,
stack: 'two',
z: 1,
itemStyle: {
borderWidth: 2, //用border设置两个柱形图之间的间距
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#b0b513',
},
{
offset: .5,
color: '#b0b513'
},
{
offset: .5,
color: '#bec81a'
},
{
offset: 1,
color: '#dcdc3c'
}
],
},
},
data: [50]
},
{//第二节
name: legendName[1],
type: 'bar',
// barWidth:20,
stack: 'two',
z: 1,
itemStyle: {
borderWidth: 2, //用border设置两个柱形图之间的间距
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#2450F0',
},
{
offset: .5,
color: '#2450F0'
},
{
offset: .5,
color: '#2FCAFD'
},
{
offset: 1,
color: '#2450F1'
}
],
},
},
data: [50]
},
{//第三节
name: legendName[2],
type: 'bar',
// barWidth:20,
stack: 'two',
z: 1,
itemStyle: {
borderWidth: 2, //用border设置两个柱形图之间的间距
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#C24D59',
},
{
offset: .5,
color: '#C24D59'
},
{
offset: .5,
color: '#F59DA6'
},
{
offset: 1,
color: '#F59DA6'
}
],
},
},
data: [50]
},
{//第四节
name: legendName[3],
type: 'bar',
// barWidth:20,
stack: 'two',
z: 1,
itemStyle: {
borderWidth: 2, //用border设置两个柱形图之间的间距
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#4BACBF',
},
{
offset: .5,
color: '#4BACBF'
},
{
offset: .5,
color: '#5FD5EC'
},
{
offset: 1,
color: '#5FD5EC'
}
],
},
},
data: [50]
},
{//第五节
name: legendName[4],
type: 'bar',
// barWidth:20,
stack: 'two',
z: 1,
itemStyle: {
borderWidth: 2, //用border设置两个柱形图之间的间距
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#DDAE41',
},
{
offset: .5,
color: '#DDAE41'
},
{
offset: .5,
color: '#FFCF5F'
},
{
offset: 1,
color: '#FFCF5F'
}
],
},
},
data: [50]
},
{//第六节
name: legendName[5],
type: 'bar',
// barWidth:20,
stack: 'two',
z: 1,
itemStyle: {
borderWidth: 2, //用border设置两个柱形图之间的间距
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#8946C4',
},
{
offset: .5,
color: '#8946C4'
},
{
offset: .5,
color: '#B36FEE'
},
{
offset: 1,
color: '#B36FEE'
}
],
},
},
data: [50]
},
{//第一节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
"symbolSize": [70, 20],
"symbolOffset": [-0, 8],
"z": 2,
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#b0b513',
},
{
offset: .5,
color: '#b0b513'
},
{
offset: .5,
color: '#bec81a'
},
{
offset: 1,
color: '#dcdc3c'
}
],
},
},
"data": [1]
},
{//第二节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
"symbolSize": [70, 20],
"symbolOffset": [-0, -102],
"z": 4,
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#2450F0',
},
{
offset: .5,
color: '#2450F0'
},
{
offset: .5,
color: '#2FCAFD'
},
{
offset: 1,
color: '#2450F1'
}
],
},
},
"data": [1]
},
{//第三节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
"symbolSize": [70, 20],
"symbolOffset": [-0, -213],
"z": 6,
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#C24D59',
},
{
offset: .5,
color: '#C24D59'
},
{
offset: .5,
color: '#F59DA6'
},
{
offset: 1,
color: '#F59DA6'
}
],
},
},
"data": [1]
},
{//第四节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
"symbolSize": [70, 20],
"symbolOffset": [-0, -324],
"z": 8,
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#4BACBF',
},
{
offset: .5,
color: '#4BACBF'
},
{
offset: .5,
color: '#5FD5EC'
},
{
offset: 1,
color: '#5FD5EC'
}
],
},
},
"data": [1]
},
{//第五节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
"symbolSize": [70, 20],
"symbolOffset": [-0, -434],
"z": 10,
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#DDAE41',
},
{
offset: .5,
color: '#DDAE41'
},
{
offset: .5,
color: '#FFCF5F'
},
{
offset: 1,
color: '#FFCF5F'
}
],
},
},
"data": [1]
},
{//第六节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
"symbolSize": [70, 20],
"symbolOffset": [-0, -545],
"z": 10,
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: '#8946C4',
},
{
offset: .5,
color: '#8946C4'
},
{
offset: .5,
color: '#B36FEE'
},
{
offset: 1,
color: '#B36FEE'
}
],
},
},
"data": [1]
},
{//第一节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
symbolPosition: 'end',
"symbolSize": [70, 20],
"symbolOffset": [-0, -7],
"z": 3,
itemStyle: {
color: '#dcdc3c',
},
"data": [50]
},
{// 第二节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
symbolPosition: 'end',
"symbolSize": [70, 20],
"symbolOffset": [-0, -8],
"z": 5,
itemStyle: {
color: '#2FCAFD',
},
"data": [100]
},
{// 第三节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
symbolPosition: 'end',
"symbolSize": [70, 20],
"symbolOffset": [-0, -8],
"z": 7,
itemStyle: {
color: '#C24D59',
},
"data": [150]
},
{// 第四节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
symbolPosition: 'end',
"symbolSize": [70, 20],
"symbolOffset": [-0, -8],
"z": 9,
itemStyle: {
color: '#4BACBF',
},
"data": [200]
},
{// 第五节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
symbolPosition: 'end',
"symbolSize": [70, 20],
"symbolOffset": [-0, -8],
"z": 9,
itemStyle: {
color: '#DDAE41',
},
"data": [250]
},
{// 第六节
"name": "",
"type": "pictorialBar",
symbol: 'diamond',
symbolPosition: 'end',
"symbolSize": [70, 20],
"symbolOffset": [-0, -8],
"z": 9,
itemStyle: {
color: '#8946C4',
},
"data": [300]
},
]
};