let barData1=[10]
let barData2=[20]
let barData3=[10]
let barData4=[30]
let barData5=[20]
let pictorialBar=[]
let pictorialBar2=[]
let pictorialBar3=[]
let pictorialBar4=[]
console.log(barData1,'ppppppp')
for(let i=0;i< barData1.length;i++){
pictorialBar.push(barData1[i]+barData2[i])
pictorialBar2.push(barData1[i]+barData2[i]+barData3[i])
pictorialBar3.push(barData1[i]+barData2[i]+barData3[i]+barData4[i])
pictorialBar4.push(barData1[i]+barData2[i]+barData3[i]+barData4[i]+barData5[i])
}
const option =
{
backgroundColor: '#fff',
tooltip: {
show:false,
trigger: 'item',
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false,
color: '#e54035'
}
},
yAxis: {
type:'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
grid:{
height:'auto',
right:'auto',
left:'auto',
},
series: [
{//圆片1
"name": "",
"type": "pictorialBar",
"symbolSize": [5, 13],
"symbolOffset": [0.5, 0],
"z": 12,
itemStyle: {//lenged文本
color: '#005BAC',
},
data:barData1
},
{//柱状图1
name: '2020',
type: 'bar',
barWidth: 20,
barGap: '-100%',
itemStyle: {//lenged文本
color: '#005BAC',
opacity: 1,
borderWidth: 7,
borderColor: "transparent",
},
data: barData1
},
{ // 柱状图1
type: 'bar',
barWidth: 20,
barGap: '-100%',
stack: '广告',
itemStyle: {
color: 'transparent'
},
data: barData1
},
{ //圆片2
"name": "",
"type": "pictorialBar",
"symbolSize": [5, 13],
"symbolOffset": [ -1 , 0],
"symbolPosition": "end",
"z": 12,
itemStyle: {//lenged文本
color:'#B2CDE6',
},
data: barData1
},
{//圆片3
"name": "",
"type": "pictorialBar",
"symbolSize": [5, 13],
"symbolOffset": [ 6 , 0],
"symbolPosition": "end",
"z": 12,
itemStyle: {//lenged文本
color:'#0E95B8',
},
data: barData1
},
{ // 柱状图2
name: '2019',
type: 'bar',
barWidth: 20,
barGap: '-100%',
stack: '广告',
itemStyle: {
// barBorderRadius: 20,
color: "#0E95B8",
opacity: 1,
borderWidth: 7,
borderColor: "transparent",
},
//上班截开始
data: barData2
},
{ //圆片4
"name": "", //头部
"type": "pictorialBar",
"symbolSize": [5, 13],
"symbolOffset": [ -1 , 0 ],
"symbolPosition": "end",
"z": 12,
itemStyle: {//lenged文本
color: '#B3E2E5'
},
data: pictorialBar
},
{ //圆片5
"name": "", //头部
"type": "pictorialBar",
"symbolSize": [5, 13],
"symbolOffset": [ 6 , 0 ],
"symbolPosition": "end",
"z": 12,
itemStyle: {//lenged文本
color: '#00A85A'
},
data: pictorialBar
},
{ // 柱状图3
name: '2019',
type: 'bar',
barWidth: 20,
barGap: '-100%',
stack: '广告',
itemStyle: {
// barBorderRadius: 20,
color:"#00A85A",
opacity: 1,
borderWidth: 7,
borderColor: "transparent",
},
//上班截开始
data: barData3
},
{ //圆片6
"name": "", //头部
"type": "pictorialBar",
"symbolSize": [5, 13],
"symbolOffset": [-1,0],
"symbolPosition": "end",
"z": 12,
itemStyle: {//lenged文本
color:"#AAEECE"
},
data: pictorialBar2
},
{ //圆片7
"name": "", //头部
"type": "pictorialBar",
"symbolSize": [5, 13],
"symbolOffset": [6,0],
"symbolPosition": "end",
"z": 12,
itemStyle: {//lenged文本
color:"#F1681E"
},
data: pictorialBar2
},
{ // 柱状图4
name: '2019',
type: 'bar',
barWidth: 20,
barGap: '-100%',
stack: '广告',
itemStyle: {
// barBorderRadius: 20,
color:"#F1681E",
opacity: 1,
borderWidth: 7,
borderColor: "transparent",
},
//上班截开始
data: barData4
},
{ //圆片8
"name": "", //头部
"type": "pictorialBar",
"symbolSize": [5, 13],
"symbolOffset": [-1,0],
"symbolPosition": "end",
"z": 12,
itemStyle: {//lenged文本
color:"#EBE0CA"
},
data: pictorialBar3
},
{ //圆片9
"name": "", //头部
"type": "pictorialBar",
"symbolSize": [5, 13],
"symbolOffset": [6,0],
"symbolPosition": "end",
"z": 12,
itemStyle: {//lenged文本
color:"#E8A82C"
},
data: pictorialBar3
},
{ // 柱状图5
name: '2019',
type: 'bar',
barWidth: 20,
barGap: '-100%',
stack: '广告',
itemStyle: {
// barBorderRadius: 20,
color:"#E8A82C",
opacity: 1,
borderWidth: 7,
borderColor: "transparent",
},
//上班截开始
data: barData5
},
{ //圆片10
"name": "", //头部
"type": "pictorialBar",
"symbolSize": [5, 13],
"symbolOffset": [-1,0],
"symbolPosition": "end",
"z": 12,
itemStyle: {//lenged文本
color:"#EBE0CA"
},
data: pictorialBar4
},
]
};