把以下代码，直接复制到 https://echarts.apache.org/ 官网，在线运行
-
效果图
image.png
- 源码
var xData2 = ["柴油存储", "汽油存储", "航煤存储", "附油存储"];
var data1 = [20,50,20,30];
var data2 = [100,100,100,100];
var barWidth = 80;
option = {
backgroundColor: '#0d193a',//背景色
//禁用鼠标hover提示
tooltip: {
show: false
},
grid:{
left:100,
bottom:100
},
//关闭动画
animation: false,
//X轴设置
xAxis: {
data: xData2,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
interval:0,
textStyle: {
color: '#fff',
fontSize:20,
},
margin: 30, //刻度标签与轴线之间的距离。
},
},
//Y轴设置
yAxis: [{
show: false,
}],
series: [
//三个最底下的圆片
{
"name": "",
"type": "pictorialBar",
"symbolSize": [barWidth, 25],//圆环宽度
"symbolOffset": [0, 10],
"z": 12,
itemStyle:{
opacity:1,
color: function(params){
var a = params.name.slice(0,2);
if(a === '柴油'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fddb61' // 0% 处的颜色
}, {
offset: 1,
color: '#fddb61'// 100% 处的颜色
}], false)
}else if(a === '汽油'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#25c8fb' // 0% 处的颜色
}, {
offset: 1,
color: '#25c8fb'// 100% 处的颜色
}], false)
}else if(a === '航煤'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#6ba6ff' // 0% 处的颜色
}, {
offset: 1,
color: '#6ba6ff'// 100% 处的颜色
}], false)
}else if(a === '附油'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0572dd' // 0% 处的颜色
}, {
offset: 1,
color: '#0572dd'// 100% 处的颜色
}], false)
}
}
},
"data": [1,1,1,1,1]
},
//下半截柱状图(中间部分)
{
name: '',
type: 'bar',
barWidth: barWidth,
barGap: '-100%',
itemStyle: {
//lenged文本
opacity:.7,
color: function(params){
var a = params.name.slice(0,2);
if(a === '柴油'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fddb61' // 0% 处的颜色
}, {
offset: 1,
color: '#fddb61'// 100% 处的颜色
}], false)
}else if(a === '汽油'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#25c8fb' // 0% 处的颜色
}, {
offset: 1,
color: '#25c8fb'// 100% 处的颜色
}], false)
}else if(a === '航煤'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#6ba6ff' // 0% 处的颜色
}, {
offset: 1,
color: '#6ba6ff'// 100% 处的颜色
}], false)
}else if(a === '附油'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0572dd' // 0% 处的颜色
}, {
offset: 1,
color: '#0572dd'// 100% 处的颜色
}], false)
}
}
},
data: data1
},
//顶部刻度的圆形
{
"name": "", //头部
"type": "pictorialBar",
"symbolSize": [barWidth, 25],//顶部刻度的圆形
"symbolOffset": [0, -10],
"z": 12,
"symbolPosition": "end",
itemStyle:{
color:'#163F7A',
opacity:1,
},
"data": data2
},
//刻度值处的圆形图标
{
"name": "",
"type": "pictorialBar",
"symbolSize": [barWidth, 25],
"symbolOffset": [0, -10],
"z": 12,
itemStyle:{
opacity:1,
color: function(params){
var a = params.name.slice(0,2);
if(a === '柴油'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fddb61' // 0% 处的颜色
}, {
offset: 1,
color: '#fddb61'// 100% 处的颜色
}], false)
}else if(a === '汽油'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#25c8fb' // 0% 处的颜色
}, {
offset: 1,
color: '#25c8fb'// 100% 处的颜色
}], false)
}else if(a === '航煤'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#6ba6ff' // 0% 处的颜色
}, {
offset: 1,
color: '#6ba6ff'// 100% 处的颜色
}], false)
}else if(a === '附油'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0572dd' // 0% 处的颜色
}, {
offset: 1,
color: '#0572dd'// 100% 处的颜色
}], false)
}
}
},
//显示当前数值
"label": {
"normal": {
"show": true,
"position": "top",
// "formatter": "{c}m³",
fontSize: 15,
fontWeight: 'bold',
color: '#34DCFF'
}
},
"symbolPosition": "end",
"data": data1
},
//最外层柱状体宽度、颜色设置
{
name: '',
type: 'bar',
barWidth: barWidth,
barGap: '-100%',
z:0,
itemStyle: {
color: '#163F7A',
opacity:.7,
},
data: data2
}
]
};
