const datas = [
{ name: "铁山港区", value: "100" },
{ name: "铁山港区", value: "97" },
{ name: "海城区", value: "95" },
{ name: "海城区", value: "95" },
{ name: "海城区", value: "95" }
];
const myColor = [
"rgba(244,160,81,1)",
"rgba(45,190,146,1)",
"rgba(41,158,228,1)",
"rgba(76,95,245,1)",
"rgba(255,230,96,1)"
];
const myColor1 = [
"rgba(244,160,81,0.3)",
"rgba(45,190,146,0.3)",
"rgba(41,158,228,0.3)",
"rgba(76,95,245,0.3)",
"rgba(255,230,96,0.3)"
];
const xData = datas.map(item => item.name);
const yData = datas.map(item => item.value);
const max = Math.ceil(Math.max(...yData) * 1);
const maxData = [max, max, max, max, max];
option = {
backgroundColor: '#bbb',
grid: {
left: "18%",
right: "8%",
bottom: "5%",
top: "10%",
containLabel: false
},
xAxis: [
{
show: false
},
{
show: false
}
],
yAxis: [
{
show: false,
inverse: true,
data: yData
},
{
show: true,
inverse: true,
data: yData,
position: "right",
axisLabel: {
lineHeight: 0,
verticalAlign: "bottom",
fontSize: 15,
color: "#333",
formatter: "{value}"
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: [
{
show: true,
type: "bar",
barGap: "-100%",
xAxisIndex: 1,
barWidth: 18,
itemStyle: {
borderRadius: 3,
color: params => {
var num = myColor.length;
return {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: myColor1[params.dataIndex % num]
},
{
offset: 1,
color: myColor[params.dataIndex % num]
}
]
};
}
},
labelLine: {
show: false
},
z: 2,
data: yData
},
{
name: "外圆",
type: "scatter",
emphasis: {
scale: false
},
xAxisIndex: 1,
symbolSize: 22,
itemStyle: {
color: params => {
var num = myColor.length;
return myColor[params.dataIndex % num];
},
shadowColor: "rgba(255, 255, 255, 0.5)",
shadowBlur: 5,
borderWidth: 1,
opacity: 1
},
z: 2,
data: yData
},
{
z: 1,
show: true,
type: "bar",
xAxisIndex: 1,
barGap: "-100%",
barWidth: 20,
itemStyle: {
borderRadius: 4,
color: "rgba(60, 166, 219, 0.10)"
},
label: {
show: true,
position: "left",
fontSize: 14,
color: "#333",
formatter: function(data) {
return xData[data.dataIndex];
}
},
data: maxData
}
]
};