立体柱状图echarts 配置项内容和展示
配置项如下
option = {
backgroundColor: '#0e202d',
"title": {
show: false,
"text": "第三采油厂",
// "subtext": "总数: 599",
"textStyle": {
"color": "#fff",
"fontSize": 20
},
"subtextStyle": {
"color": "#999",
"fontSize": 16
},
"x": "center",
"top": "0%"
},
"grid": {
"top": 200,
"bottom": 150
},
"tooltip": {},
"xAxis": {
"data": ["张三1", "张三2", "张三3","张三4", "张三5", "张三6","张三7", "张三8", "张三9","张三10"],
"axisTick": {
"show": false
},
"axisLine": {
"show": false
},
"axisLabel": {
interval:0,
textStyle: {
color: '#beceff',
fontSize:15,
},
margin: 30, //刻度标签与轴线之间的距离。
}
},
"yAxis": {
"splitLine": {
"show": false
},
"axisTick": {
"show": false
},
"axisLine": {
"show": false
},
"axisLabel": {
"show": false
}
},
"series": [
{
"name": "",
"type": "pictorialBar",
"symbolSize": [20, 10],
"symbolOffset": [0, -5],
"z": 12,
"data": [{
"name": "张三1",
"value": "1000",
"symbolPosition": "end",
"itemStyle": {
"normal": {
"color": "#00fff5" //圆柱顶部颜色
}
}
},
{
"name": "张三2",
"value": "900",
"symbolPosition": "end",
"itemStyle": {
"normal": {
"color": "#00fff5" //圆柱顶部颜色
}
}
},
{
"name": "张三3",
"value": "800",
"symbolPosition": "end",
"itemStyle": {
"normal": {
"color": "#00fff5" //圆柱顶部颜色
}
}
},
{
"name": "张三4",
"value": "700",
"symbolPosition": "end",
"itemStyle": {
"normal": {
"color": "#b9b7ff" //圆柱顶部颜色
}
}
},
{
"name": "张三5",
"value": "600",
"symbolPosition": "end",
"itemStyle": {
"normal": {
"color": "#b9b7ff" //圆柱顶部颜色
}
}
},
{
"name": "张三6",
"value": "500",
"symbolPosition": "end",
"itemStyle": {
"normal": {
"color": "#b9b7ff" //圆柱顶部颜色
}
}
},
{
"name": "张三7",
"value": "400",
"symbolPosition": "end",
"itemStyle": {
"normal": {
"color": "#b9b7ff" //圆柱顶部颜色
}
}
},
{
"name": "张三8",
"value": "300",
"symbolPosition": "end",
"itemStyle": {
"normal": {
"color": "#b9b7ff" //圆柱顶部颜色
}
}
},
{
"name": "张三9",
"value": "200",
"symbolPosition": "end",
"itemStyle": {
"normal": {
"color": "#b9b7ff" //圆柱顶部颜色
}
}
},
{
"name": "张三10",
"value": "100",
"symbolPosition": "end",
"itemStyle": {
"normal": {
"color": "#b9b7ff" //圆柱顶部颜色
}
}
}]
},
{
"name": "",
"type": "pictorialBar",
"symbolSize": [20, 10],
"symbolOffset": [0, 5],
"z": 12,
"data": [{
"name": "张三1",
"value": "1000",
"itemStyle": {
"normal": {
"color": "#43bafe" //圆柱底部颜色
}
}
}, {
"name": "张三2",
"value": "900",
"itemStyle": {
"normal": {
"color": "#43bafe" //圆柱底部颜色
}
}
}, {
"name": "张三3",
"value": "800",
"itemStyle": {
"normal": {
"color": "#43bafe" //圆柱底部颜色
}
}
}, {
"name": "张三4",
"value": "700",
"itemStyle": {
// "normal": {
"color": "#e9a5ff" //圆柱底部颜色
// }
}
}, {
"name": "张三5",
"value": "600",
"itemStyle": {
"normal": {
"color": "#e9a5ff" //圆柱底部颜色
}
}
}, {
"name": "张三6",
"value": "500",
"itemStyle": {
"normal": {
"color": "#e9a5ff" //圆柱底部颜色
}
}
}, {
"name": "张三7",
"value": "400",
"itemStyle": {
"normal": {
"color": "#e9a5ff" //圆柱底部颜色
}
}
}, {
"name": "张三8",
"value": "300",
"itemStyle": {
"normal": {
"color": "#e9a5ff" //圆柱底部颜色
}
}
}, {
"name": "张三9",
"value": "200",
"itemStyle": {
"normal": {
"color": "#e9a5ff" //圆柱底部颜色
}
}
}, {
"name": "张三10",
"value": "100",
"itemStyle": {
"normal": {
"color": "#e9a5ff" //圆柱底部颜色
}
}
}]
},
{
"name": "",
"type": "pictorialBar",
"symbolSize": [30, 15],
"symbolOffset": [0, 10],
"z": 11,
"data": [{
"name": "张三1",
"value": "1000",
"itemStyle": {
// "normal": {
"color": "transparent",
"borderColor": "#43bafe", //底部内圆圈颜色
"borderWidth": '5'
// }
}
},{
"name": "张三2",
"value": "900",
"itemStyle": {
// "normal": {
"color": "transparent",
"borderColor": "#43bafe", //底部内圆圈颜色
"borderWidth": 5
// }
}
},{
"name": "张三3",
"value": "800",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#43bafe", //底部内圆圈颜色
"borderWidth": 5
}
}
}, {
"name": "张三4",
"value": "700",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部内圆圈颜色
"borderWidth": 5
}
}
}, {
"name": "张三5",
"value": "600",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部内圆圈颜色
"borderWidth": 5
}
}
}, {
"name": "张三6",
"value": "500",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部内圆圈颜色
"borderWidth": 5
}
}
}, {
"name": "张三7",
"value": "400",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部内圆圈颜色
"borderWidth": 5
}
}
}, {
"name": "张三8",
"value": "300",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部内圆圈颜色
"borderWidth": 5
}
}
}, {
"name": "张三9",
"value": "200",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部内圆圈颜色
"borderWidth": 5
}
}
}, {
"name": "张三10",
"value": "100",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部内圆圈颜色
"borderWidth": 5
}
}
}]
},
{
"name": "",
"type": "pictorialBar",
"symbolSize": [60, 30],
"symbolOffset": [0, 18],
"z": 10,
"data": [{
"name": "张三1",
"value": "1000",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#43bafe", //底部外圆圈颜色
"borderType": "dashed",
"borderWidth": 5
}
}
}, {
"name": "张三2",
"value": "900",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#43bafe", //底部外圆圈颜色
"borderType": "dashed",
"borderWidth": "5"
}
}
}, {
"name": "张三3",
"value": "800",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#43bafe", //底部外圆圈颜色
"borderType": "dashed",
"borderWidth": 5
}
}
}, {
"name": "张三4",
"value": "700",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部外圆圈颜色
"borderType": "dashed",
"borderWidth": 5
}
}
}, {
"name": "张三5",
"value": "600",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部外圆圈颜色
"borderType": "dashed",
"borderWidth": 5
}
}
}, {
"name": "张三6",
"value": "500",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部外圆圈颜色
"borderType": "dashed",
"borderWidth": 5
}
}
}, {
"name": "张三7",
"value": "400",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部外圆圈颜色
"borderType": "dashed",
"borderWidth": 5
}
}
}, {
"name": "张三8",
"value": "300",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部外圆圈颜色
"borderType": "dashed",
"borderWidth": 5
}
}
}, {
"name": "张三9",
"value": "200",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部外圆圈颜色
"borderType": "dashed",
"borderWidth": 5
}
}
}, {
"name": "张三10",
"value": "100",
"itemStyle": {
"normal": {
"color": "transparent",
"borderColor": "#e9a5ff", //底部外圆圈颜色
"borderType": "dashed",
"borderWidth": 5
}
}
}]
},
{
"type": "bar",
"silent": true,
"barWidth": 20,
"barGap": "-100%",
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgba(0,255,245,0.5)"
}, {
"offset": 1,
"color": "#43bafe" //底部渐变颜色
}]
}
}
},
"data": [
{
"name": "张三1",
"value": "1000",
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 20,
"textStyle": {
"color": "#00fff5", //柱子对应数值颜色
"fontSize": 20
}
}
},
},
{
"name": "张三2",
"value": "900",
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 20,
"textStyle": {
"color": "#00fff5", //柱子对应数值颜色
"fontSize": 20
}
}
},
},
{
"name": "张三3",
"value": "800",
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 20,
"textStyle": {
"color": "#00fff5", //柱子对应数值颜色
"fontSize": 20
}
}
}
},{
"name": "张三4",
"value": "700",
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 20,
"textStyle": {
"color": "#b9b7ff", //柱子对应数值颜色
"fontSize": 20
}
}
},
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgba(185,183,255,0.5)"
}, {
"offset": 1,
"color": "#e9a5ff" //底部渐变颜色
}]
}
}
}
},{
"name": "张三5",
"value": "600",
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 20,
"textStyle": {
"color": "#b9b7ff", //柱子对应数值颜色
"fontSize": 20
}
}
},
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgba(185,183,255,0.5)"
}, {
"offset": 1,
"color": "#e9a5ff" //底部渐变颜色
}]
}
}
}
},{
"name": "张三6",
"value": "500",
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 20,
"textStyle": {
"color": "#b9b7ff", //柱子对应数值颜色
"fontSize": 20
}
}
},
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgba(185,183,255,0.5)"
}, {
"offset": 1,
"color": "#e9a5ff" //底部渐变颜色
}]
}
}
}
},{
"name": "张三7",
"value": "400",
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 20,
"textStyle": {
"color": "#b9b7ff", //柱子对应数值颜色
"fontSize": 20
}
}
},
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgba(185,183,255,0.5)"
}, {
"offset": 1,
"color": "#e9a5ff" //底部渐变颜色
}]
}
}
}
},{
"name": "张三8",
"value": "300",
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 20,
"textStyle": {
"color": "#b9b7ff", //柱子对应数值颜色
"fontSize": 20
}
}
},
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgba(185,183,255,0.5)"
}, {
"offset": 1,
"color": "#e9a5ff" //底部渐变颜色
}]
}
}
}
},{
"name": "张三9",
"value": "200",
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 20,
"textStyle": {
"color": "#b9b7ff", //柱子对应数值颜色
"fontSize": 20
}
}
},
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgba(185,183,255,0.5)"
}, {
"offset": 1,
"color": "#e9a5ff" //底部渐变颜色
}]
}
}
}
},{
"name": "张三10",
"value": "100",
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 20,
"textStyle": {
"color": "#b9b7ff", //柱子对应数值颜色
"fontSize": 20
}
}
},
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgba(185,183,255,0.5)"
}, {
"offset": 1,
"color": "#e9a5ff" //底部渐变颜色
}]
}
}
}
},
]
}
]
}
截图如下
