echarts立体柱状图
zhuShowChart() {
let chart = echarts.init(document.getElementById('zhu'))
var xData = ["1","2","3","4"]
var line = ["7092", "3014", "4198", "32"];
let option = {
tooltip: {
show: false,
trigger: 'item',
padding: 1,
formatter: function (param) {
var resultTooltip =
"" +
"" + param.name + "" +
"" +
" " + attr.name + ": " +
"" + param.value + "" + attr.unit + "" +
"" +
"";
return resultTooltip
}
},
grid: {
left: '15%',
top: '20%',
right: '5%',
bottom: '30%',
},
xAxis: [{
data: xData,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 14,
},
interval: 0,
rotate: 20,
margin: 15, //刻度标签与轴线之间的距离。
},
axisLine: {
show: true //不显示x轴
},
axisTick: {
show: false //不显示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.08,
lineStyle: {
type: "solid",
color: "#03202E"
}
}
}],
yAxis: [{
splitLine: {
show: true,
lineStyle: {
color: '#888',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff'
},
}
}],
series: [
{//柱底圆片
name: "",
type: "pictorialBar",
symbolSize: [20, 10],
symbolOffset: [0, 5],
z: 12,
itemStyle: {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#00339A"
},
{
offset: 1,
color: "#508AFF"
}
])
}
},
data: line
},
//柱体
{
name: '',
type: 'bar',
barWidth: 20,
barGap: '0%',
itemStyle: {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{//第一节下面
"offset": 0,
"color": "#00339A"
}, {
"offset": 1,
"color": "#00339A"
}]
}
}
},
data: line
},
//柱顶圆片
{
name: "",
type: "pictorialBar",
symbolSize: [20, 10],
symbolOffset: [0, -5],
z: 12,
symbolPosition: "end",
label: {
"normal": {
"show": true,
"position": "top",
"formatter": "{c}",
'textStyle': {
'color': "#eee",
'fontSize': '15',
},
}
},
"itemStyle": {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "#508AFF"
},
{
offset: 1,
color: "#00339A"
}
],
false
),
}
},
data: line
}
]
}
chart.clear();
chart.setOption(option);
window.addEventListener('resize', function () {
chart.resize();
});
// 监听容器的大小使图表大小跟着变化
// setTimeout(function () {
// window.onresize = function () {
// chart.resize()
// }
// })
},