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

最新推荐文章于 2024-03-23 19:19:05 发布

一只爱好编程的程序猿

最新推荐文章于 2024-03-23 19:19:05 发布

阅读量5.8k

点赞数 2

分类专栏： ECharts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_37881565/article/details/123786741

版权

ECharts 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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