如何使用Echarts来绘制3d效果的柱状图

	最近在工作上需要使用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,
        },
    },   
  ]
};

效果图如下所示
如何使用Echarts来绘制3d效果的柱状图_第1张图片

你可能感兴趣的:(ECharts,echarts)