option = {
backgroundColor: "#001829",
tooltip: {
trigger: 'axis',
formatter: function (item) {
return '<div style="color:#FFF">' + item[0].axisValue + "<br/>" + item[2].seriesName + ":" + item[2].value + '个<br/>' + item[5].seriesName + ":" + item[5].value + '个</div>';
},
borderColor: '#171d3c',
extraCssText: 'background: #171d3c; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #fff;',
axisPointer: {
type: 'line',
lineStyle: {
color: '#8fa8d3'
}
}
},
grid: {
containLabel: true,
left: 20,
right: 20,
bottom: 10,
top: 50,
},
legend: {
show: true,
icon: 'circle',
orient: 'horizontal',
top: '3%',
right: 'center',
itemWidth: 16.5,
itemHeight: 6,
// itemGap: 30,
textStyle: {
// color: '#FFFFFF'
color: '#C9C8CD',
fontSize: 14
}
},
xAxis: [{
data: ["柱子一", "柱子二", "柱子三"],
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
},
},
axisLine: {
show: true, //不显示x轴
lineStyle: {
color: '#384267'
}
},
axisTick: {
show: false //不显示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.08,
lineStyle: {
type: "solid",
color: "#03202E"
}
}
}],
yAxis: [
{
name: '（个）',
nameTextStyle: {
color: 'white',
fontSize: 14,
align: 'right',
lineHeight: 20
},
splitLine: {
show: true,
lineStyle: {
color: '#384267',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#384267"
}
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
},
}
}],
series: [
//柱顶圆片0000
{
name: "",
type: "pictorialBar",
symbolSize: [18, 13],//调整截面形状
symbolOffset: [-11.5, -7],
z: 12,
symbolPosition: "end",
"itemStyle": {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "#50A7FF"
},
{
offset: 1,
color: "#02D6EA"
}
],
false
),
}
},
data: ["40", "45", "65", "100"]
},
{//柱底圆片
name: "",
type: "pictorialBar",
symbolSize: [18, 13],//调整截面形
symbolOffset: [-11.5, 6],
z: 12,
itemStyle: {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#02D6EA"
},
{
offset: 1,
color: "#02D6EA"
}
], false)
}
},
data: ["50", "75", "105", "130"]
},
//柱体
{
name: '选项1',
type: 'bar',
barWidth: 18,
barGap: '30%',
itemStyle: {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{//第一节下面
"offset": 0,
"color": "#057DFE"
}, {
"offset": 1,
"color": "#02D7EA"
}]
}
}
},
data: ["40", "45", "65", "100"]
},
//柱顶圆片
{
name: "",
type: "pictorialBar",
symbolSize: [18, 13],//调整截面形
symbolOffset: [11.5, -6],
z: 12,
symbolPosition: "end",
"itemStyle": {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "#9816c6"
},
{
offset: 1,
color: "#9816c6"
}
],
false
),
}
},
data: ["50", "75", "105", "130"]
},
{//柱底圆片
name: "",
type: "pictorialBar",
symbolSize: [18, 13],//调整截面形
symbolOffset: [11.5, 7],
z: 12,
itemStyle: {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#a522dc"
},
{
offset: 1,
color: "#a522dc"
}
], false)
}
},
data: ["40", "45", "65", "100"]
},
//柱体
{
name: '选项2',
type: 'bar',
barWidth: 18,
barGap: '30%',
itemStyle: {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{//第一节下面
"offset": 0,
"color": "#8319c0"
}, {
"offset": 1,
"color": "#a522dc"
}]
}
}
},
data: ["50", "75", "105", "130"]
},
],
};