var option = {
backgroundColor: '#031245',
tooltip: {
trigger: 'item',
},
grid: {
left: '5%',
top: '20%',
right: '5%',
bottom: '20%',
},
legend: {
show: true,
icon: 'rect',
orient: 'horizontal',
top: '3%',
right: '20',
itemWidth: 13.5,
itemHeight: 13.5,
// itemGap: 30,
textStyle: {
// color: '#FFFFFF'
color: '#FFFFFF',
fontSize: 20
}
},
xAxis: [{
data: ["1.16", "1.23", "1.30", "2.06", "2.13", "2.20", "2.26"],
axisLabel: {
textStyle: {
color: '#FFFFFF',
fontSize: 18
},
margin: 10, //刻度标签与轴线之间的距离。
},
axisLine: {
show: true, //
lineStyle: {
color: '#FFFFFF'
}
},
axisTick: {
show: false //不显示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.08,
lineStyle: {
type: "solid",
color: "#03202E"
}
}
}],
yAxis: [{
splitLine: {
show: true,
lineStyle: {
color: '#707070',
type: 'solid'
}
},
axisTick: {
show: true,
inside: true,
lineStyle: {
color: '#FFFFFF',
}
},
axisLine: {
show: false,
lineStyle: {
color: "#384267"
}
},
axisLabel: {
textStyle: {
color: '#FFFFFF',
fontSize: 18
},
}
}],
series: [
//柱顶圆片0000
{
name: "2小时内",
type: "pictorialBar",
symbolSize: [16, 6],//调整截面形状
symbolOffset: [-21, -4],
z: 12,
symbolPosition: "end",
"itemStyle": {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "#FCC907"
},
{
offset: 1,
color: "#FCC907"
}
],
false
),
}
},
data: ["40", "45", "65", "100"]
},
{//柱底圆片
name: "2小时内",
type: "pictorialBar",
symbolSize: [16, 6],//调整截面形状
symbolOffset: [-21, 4],
z: 12,
itemStyle: {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#F68647"
},
{
offset: 1,
color: "#F68647"
}
], false)
}
},
data: ["50", "75", "105", "130"]
},
//柱体
{
name: '2小时内',
type: 'bar',
barWidth: 16,
barGap: '30%',
itemStyle: {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{//第一节下面
"offset": 0,
"color": "#FCC907"
}, {
"offset": 1,
"color": "#F68647"
}]
}
}
},
data: ["40", "45", "65", "100"]
},
//柱顶圆片
{
name: "2-4小时",
type: "pictorialBar",
symbolSize: [16, 6],//调整截面形状
symbolOffset: [0, -4],
z: 12,
symbolPosition: "end",
"itemStyle": {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "#88D36F"
},
{
offset: 1,
color: "#88D36F"
}
],
false
),
}
},
data: ["50", "75", "105", "130"]
},
{//柱底圆片
name: "2-4小时",
type: "pictorialBar",
symbolSize: [16, 6],//调整截面形状
symbolOffset: [0, 4],
z: 12,
itemStyle: {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#17BFAF"
},
{
offset: 1,
color: "#17BFAF"
}
], false)
}
},
data: ["40", "45", "65", "100"]
},
//柱体
{
name: '2-4小时',
type: 'bar',
barWidth: 16,
barGap: '30%',
itemStyle: {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{//第一节下面
"offset": 0,
"color": "#88D36F"
}, {
"offset": 1,
"color": "#17BFAF"
}]
}
}
},
data: ["50", "75", "105", "130"]
},
//柱顶圆片
{
name: "4小时以上",
type: "pictorialBar",
symbolSize: [16, 6],//调整截面形状
symbolOffset: [20.5, -4],
z: 12,
symbolPosition: "end",
"itemStyle": {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "#278DF7"
},
{
offset: 1,
color: "#278DF7"
}
],
false
),
}
},
data: ["50", "75", "105", "130"]
},
{//柱底圆片
name: "4小时以上",
type: "pictorialBar",
symbolSize: [16, 6],//调整截面形状
symbolOffset: [20.5, 4],
z: 12,
itemStyle: {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#6057F1"
},
{
offset: 1,
color: "#6057F1"
}
], false)
}
},
data: ["40", "45", "65", "100"]
},
// 第三柱体
{
name: '4小时以上',
type: 'bar',
barWidth: 16,
barGap: '30%',
itemStyle: {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{//第一节下面
"offset": 0,
"color": "#288BF7"
}, {
"offset": 1,
"color": "#6057F1"
}]
}
}
},
data: ["50", "75", "105", "130"]
},
],
"tooltip": {
"trigger": "axis",
backgroundColor: 'rgba(0,0,0,0.8)',
borderWidth: 0,
"show": true,
textStyle: { fontSize: '100%' },
formatter: function (item) {
returnData1 =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' +
item[1].color.colorStops[0].color +
'"></span>';
returnData2 =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' +
item[4].color.colorStops[0].color +
'"></span>';
console.log(item);
return '<div style="color:#FFF">' + item[0].axisValue + "<br/>" + returnData1 + item[2].seriesName + ":" + item[2].value + '个<br/>' + returnData2 + item[5].seriesName + ":" + item[5].value + '个</div>';
}
}
};