var value = 30;
var maxValue = 100;
option = {
backgroundColor: '#0e202d',
grid: {
bottom: '10%',
top: '35%',
right: '0%',
left: '0%'
},
xAxis: {
data: [],
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [
{
name: "",
type: "pictorialBar",
symbolSize: [50, 15],
symbolOffset: [0, -7],
z: 12,
data: [
{
name: "",
value: value,
symbolPosition: "end",
itemStyle: {
normal: {
color: "rgba(255, 0, 0, 0.2)" //内部圆柱 顶部颜色
}
}
}
]
},
{
name: "",
type: "pictorialBar",
symbolSize: [50, 15],
symbolOffset: [0, 6],
z: 12,
data: [
{
name: "",
value: value,
itemStyle: {
normal: {
color: "rgba(255, 0, 0, 1)" //内部圆柱 底部颜色
}
}
}
]
},
{
type: "bar",
// silent: true,
barWidth: 50,
data: [
{
name: "",
value: value,
label: {
normal: {
show: true,
formatter: function (value, index) {
return (value.value/maxValue * 100).toFixed(0) +'%';
},
position: ["110%", "-20%"],
distance: 10,
textStyle: {
color: "rgba(255, 0, 0, 1)", //百分比 文字颜色
fontSize: 18,
fontWeight:600
}
}
},
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "rgba(255, 0, 0, 0)"
},
{
offset: 1,
color: "rgba(255, 0, 0, 0.6)" //内部圆柱 侧面 颜色
}
]
}
}
}
}
]
},
//往上是内部柱状图
//往下是外部柱状图
{
name: "",
type: "pictorialBar",
symbolSize: [25, 10],
symbolOffset: [0, 0],
z: 12,
data: [
{
name: "",
value: maxValue - 1,
symbolPosition: "end",
itemStyle: {
normal: {
color: "rgba(255, 0, 0, 0.15)" //顶部内小圈
}
}
}
]
},
{
name: "",
type: "pictorialBar",
symbolSize: [50, 20],
symbolOffset: [0, 0],
z: 12,
data: [
{
name: "",
value: maxValue,
symbolPosition: "end",
itemStyle: {
normal: {
color: "rgba(255, 0, 0, 0.1)" //圆柱顶部颜色
}
}
}
]
},
{
name: "",
type: "pictorialBar",
symbolSize: [53, 18],
symbolOffset: [0, 10],
z: 12,
data: [
{
name: "",
value: maxValue,
itemStyle: {
normal: {
color: "rgba(255, 0, 0, 0)", // 虚线与内圆柱中间的 底颜色
borderColor: "rgba(255, 0, 0, 0.6)", // 设置边框颜色
borderWidth: 2, // 设置边框宽度
}
}
}
]
},
{
name: "",
type: "pictorialBar",
symbolSize: [70, 30],
symbolOffset: [0, 15],
z: 10,
data: [
{
name: "",
value: '100',
itemStyle: {
normal: {
color: "transparent",
borderColor: "rgb(255, 0, 0)", //底部虚线外圆圈颜色
borderType: "dashed",
borderWidth: 2
}
}
}
]
},
{
type: "bar",
silent: true,
barWidth: 50,
barGap: "-100%",
data: [
{
name: "",
value: maxValue,
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: {
x: 1,
y: 1,
x2: 1,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "rgba(255, 0, 0, 0)"
},
{
offset: 0.3,
color: "rgba(255, 0, 0, 0.03)"
},
{
offset: 0.5,
color: "rgba(255, 0, 0, 0.03)"
},
{
offset: 0.8,
color: "rgba(255, 0, 0, 0.03)"
},
{
offset: 1,
color: "rgba(255, 0, 0, 0)" //外部圆柱 侧面颜色
}
]
}
}
}
}
]
},
{
//上部立体柱
stack: '1',
type: 'bar',
label: {
show: true,
position: 'top',
distance: 500,
color: 'rgba(255, 0, 0,0.8)', // 顶部文字颜色
fontSize: 20,
},
silent: true,
barWidth: 50,
data: [
{
name: "",
value: value,
itemStyle: {
color:"rgba(255, 0, 0, 0)",//透明
}
}],
z: 12,
}
]
};