1 实现代码(3D重叠椭圆柱状图)
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var xData = ["优良率", "达标率"];
var yData = [50, 87.3];
var shadowYData=[100,100];
var color="#19dfdd";
var shadowColor="#0b5767";
var barWidth=50;
var option = {
backgroundColor: '#05233b',
"grid": {
"top": "25%",
"left": "-5%",
"bottom": "5%",
"right": "5%",
"containLabel": true
},
animation: false,
"xAxis": [{
"type": "category",
"data": xData,
"axisTick": {
"alignWithLabel": true
},
"nameTextStyle": {
"color": "#82b0ec"
},
"axisLine": {
show: false,
"lineStyle": {
"color": "#82b0ec"
}
},
"axisLabel": {
"textStyle": {
"color": color
},
margin: 30
}
}],
"yAxis": [{
show: false,
"type": "value",
"axisLabel": {
"textStyle": {
"color": "#fff"
},
},
"splitLine": {
"lineStyle": {
"color": "#0c2c5a"
}
},
"axisLine": {
"show": false
}
}],
"series": [
{
"name": "数据上椭圆",
type: 'pictorialBar',
symbolSize: [barWidth, 10],
symbolOffset: [0, -6],
symbolPosition: 'end',
z: 12,
"label": {
"normal": {
"show": true,
"position": "top",
fontSize: 14,
color: color,
formatter:function(params,index){
return params.value+"%";
}
}
},
color: "#2DB1EF",
data: yData
},
{
name: '',
type: 'pictorialBar',
symbolSize: [barWidth, 10],
symbolOffset: [0, 7],
z: 12,
"color": color,
"data": yData
},
{
name: '',
type: 'pictorialBar',
symbolSize: [barWidth+5, 15],
symbolOffset: [0, 12],
z: 10,
itemStyle: {
normal: {
color: 'transparent',
borderColor: color,
borderType: 'solid',
borderWidth: 1
}
},
data: yData
},
{
name: '',
type: 'pictorialBar',
symbolSize: [barWidth+10, 20],
symbolOffset: [0, 18],
z: 10,
itemStyle: {
normal: {
color: 'transparent',
borderColor: color,
borderType: 'solid',
borderWidth: 2
}
},
data: yData
},
{
type: 'bar',
"barWidth": barWidth,
barGap: '10%', // Make series be overlap
barCateGoryGap: '10%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "rgba(25,223,221,.7)"
},
{
offset: 1,
color: "rgba(25,223,221,.3)"
}
]),
},
},
data: yData
},
{
"name": "阴影椭圆",
type: 'pictorialBar',
symbolSize: [barWidth, 10],
symbolOffset: [0, -6],
symbolPosition: 'end',
z: 12,
"label": {
"show": false,
},
color: shadowColor,
data: shadowYData
},
{
name:"阴影柱体",
type: 'bar',
"barWidth": barWidth,
barCateGoryGap: '10%',
"zlevel": -1,
"barGap": "-100%",
itemStyle: {
color: shadowColor
},
data: shadowYData
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
2 最终效果图(3D重叠椭圆柱状图)
![](https://i-blog.csdnimg.cn/blog_migrate/5cee8c437bc17f2c260a611e4002c4f5.png)