最近在工作上需要使用Echarts中绘制3d效果的柱状图,在网上中大概搜索过来,终于把3d效果的柱状图给绘制出来,代码如下:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
legend: {
data: ["国内先进", "国际先进", "国内领先","国际领先"],
},
grid: {
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['2015', '2016', '2017', '2018', '2020', '2021', '2022'],
axisTick: {
show:false,
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '国内先进',
type: 'bar',
barWidth:20,
data: [10, 52, 200, 334, 390, 330, 220]
},
{
name: '国际先进',
type: 'bar',
barWidth:20,
data: [10, 52, 200, 334, 390, 330, 220]
},
{
name: '国内领先',
type: 'bar',
barWidth:20,
data: [10, 52, 200, 334, 390, 330, 220]
},
{
name: '国际领先',
type: 'bar',
barWidth:20,
data: [10, 52, 200, 334, 390, 330, 220]
},
{
name: '国内先进',
type: 'pictorialBar',
barWidth:20,
symbol:'diamond',
symbolPosition:'start',
symbolOffset:['-180%','50%'],
symbolSize:[20,10],
zlevel:2,
data: [2, 2, 2, 2, 2, 2, 2],
tooltip: {
show: false,
},
},
{
name: '国内先进',
type: 'pictorialBar',
barWidth:20,
symbol:'diamond',
symbolOffset:['-180%','-50%'],
symbolPosition:'end',
symbolSize:[20,10],
zlevel:2,
data: [10, 52, 200, 334, 390, 330, 220],
tooltip: {
show: false,
},
},
{
name: '国际先进',
type: 'pictorialBar',
barWidth:20,
symbol:'diamond',
symbolPosition:'start',
symbolOffset:['-60%','50%'],
symbolSize:[20,10],
zlevel:2,
data: [2, 2, 2, 2, 2, 2, 2],
tooltip: {
show: false,
},
},
{
name: '国际先进',
type: 'pictorialBar',
barWidth:20,
symbol:'diamond',
symbolOffset:['-60%','-50%'],
symbolPosition:'end',
symbolSize:[20,10],
zlevel:2,
data: [10, 52, 200, 334, 390, 330, 220],
tooltip: {
show: false,
},
},
{
name: '国内领先',
type: 'pictorialBar',
barWidth:20,
symbol:'diamond',
symbolPosition:'start',
symbolOffset:['60%','50%'],
symbolSize:[20,10],
zlevel:2,
data: [2, 2, 2, 2, 2, 2, 2],
tooltip: {
show: false,
},
},
{
name: '国内领先',
type: 'pictorialBar',
barWidth:20,
symbol:'diamond',
symbolOffset:['60%','-50%'],
symbolPosition:'end',
symbolSize:[20,10],
zlevel:2,
data: [10, 52, 200, 334, 390, 330, 220],
tooltip: {
show: false,
},
},
{
name: '国际领先',
type: 'pictorialBar',
barWidth:20,
symbol:'diamond',
symbolPosition:'start',
symbolOffset:['180%','50%'],
symbolSize:[20,10],
zlevel:2,
data: [2, 2, 2, 2, 2, 2, 2],
tooltip: {
show: false,
},
},
{
name: '国际领先',
type: 'pictorialBar',
barWidth:20,
symbol:'diamond',
symbolOffset:['180%','-50%'],
symbolPosition:'end',
symbolSize:[20,10],
zlevel:2,
data: [10, 52, 200, 334, 390, 330, 220],
tooltip: {
show: false,
},
},
]
};
效果图如下所示
