您的位置:

echarts立体柱状图详解

一、echarts立体柱状图怎么做

echarts立体柱状图是一种3D效果的柱状图,通过z轴来增加第三个维度的视觉效果,使数据更加直观、形象。使用echarts创建立体柱状图非常简单,只需要在option中设置三维坐标系,并给柱子加上立体效果即可:

option = {
  xAxis3D: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月'],
  },
  yAxis3D: {
    type: 'value',
  },
  zAxis3D: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],
  },
  grid3D: {
    boxWidth: 200,
    boxDepth: 80,
    viewControl: {
      // projection: 'orthographic',
      beta: 10,
      alpha: 25
    }
  },
  series: [{
    type: 'bar3D',
    data: [
      ['一月', 'A', 10],
      ['二月', 'A', 20],
      ['三月', 'A', 30],
      ['四月', 'A', 40],
      ['五月', 'A', 50],
      ['六月', 'A', 60],
      ['一月', 'B', 20],
      ['二月', 'B', 30],
      ['三月', 'B', 40],
      ['四月', 'B', 50],
      ['五月', 'B', 60],
      ['六月', 'B', 70],
      ['一月', 'C', 30],
      ['二月', 'C', 40],
      ['三月', 'C', 50],
      ['四月', 'C', 60],
      ['五月', 'C', 70],
      ['六月', 'C', 80],
      ['一月', 'D', 40],
      ['二月', 'D', 50],
      ['三月', 'D', 60],
      ['四月', 'D', 70],
      ['五月', 'D', 80],
      ['六月', 'D', 90],
      ['一月', 'E', 50],
      ['二月', 'E', 60],
      ['三月', 'E', 70],
      ['四月', 'E', 80],
      ['五月', 'E', 90],
      ['六月', 'E', 100]
    ],
    shading: 'lambert',

    label: {
      textStyle: {
        fontSize: 16,
        borderWidth: 1
      }
    },

    itemStyle: {
      opacity: 0.8
    }
  }]
};

其中,xAxis3D、yAxis3D、zAxis3D分别表示三个坐标轴,grid3D表示3D场景的大小和角度,series里面的type为bar3D,表示是立体柱状图,data表示数据,shading表示图形的着色效果,label表示图形标签文本样式,itemStyle表示图形样式。

二、 echarts立体柱状图大小

echarts立体柱状图的大小可以通过boxWidth和boxDepth来控制,例如,在grid3D中设置boxWidth为100,boxDepth为50,可以使立体柱状图的大小变小:

option = {
  ...,
  grid3D: {
    boxWidth: 100,
    boxDepth: 50,
    ...
  },
  ...
};

三、立体柱状图怎么做

立体柱状图可以通过多种方式来完成,除了使用echarts之外,WPS、Excel等办公软件也支持立体柱状图的绘制。以WPS为例,打开表格后,选择需要制作立体柱状图的数据范围,点击“插入”-“图表”-“3D图”-“柱图(垂直)”,即可绘制立体柱状图。

四、wps立体柱状图怎么做

在WPS中,制作立体柱状图非常简单,只需要按照以下步骤即可:

1. 选择需要绘制立体柱状图的数据范围;

2. 点击“插入”-“图表”-“3D图”-“柱图(垂直)”;

3. 在弹出的图表编辑窗口中,对图表进行进一步的设置和美化。

五、excel立体柱状图怎么做

在Excel中,制作立体柱状图非常简单,只需要按照以下步骤即可:

1. 选择需要绘制立体柱状图的数据范围;

2. 点击“插入”-“柱形图”-“立体柱形图”;

3. 在弹出的图表编辑窗口中,对图表进行进一步的设置和美化。

六、echarts官网

echarts是百度团队开源的一个数据可视化工具库,提供了各种各样的图表类型和交互方式,非常适合做数据可视化和大屏展示。

echarts官网:https://echarts.apache.org/

七、echarts饼图

echarts饼图是一种常用的饼状图,通过扇形的大小比例来展现数据的占比情况。使用echarts创建饼图非常简单,只需要在option中设置series的type为pie,然后给每个扇形赋值即可:

option = {
  ...,
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 234, name: '联盟广告'},
      {value: 135, name: '视频广告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }]
};

八、echarts数据可视化

echarts提供了一系列常用的数据可视化工具,比如柱状图、饼图、折线图、雷达图等,可以根据具体需要选择适合的图表类型。同时,echarts还支持与各种流行的前端框架和图形库(比如React、Vue、AntV等)进行快速集成,可以非常方便地将数据可视化作为Web应用或移动应用的一部分。

九、echarts雷达图

echarts雷达图是一种常用的多维数据展示图表,通过虚实相间的线条和填充区域展现多个数据指标的大小关系。使用echarts创建雷达图也非常简单,只需要在option中设置radar的三个属性即可:

option = {
  ...,
  radar: {
    indicator: [
      { name: '销售', max: 6500},
      { name: '成本', max: 16000},
      { name: '利润', max: 30000},
      { name: '市场份额', max: 38000},
      { name: '发展潜力', max: 52000}
    ]
  },
  series: [{
    type: 'radar',
    data : [
      {
        value : [4300, 10000, 28000, 35000, 50000],
        name : '预算分配(Allocated Budget)'
      },
      {
        value : [5000, 14000, 28000, 31000, 42000],
        name : '实际开销(Actual Spending)'
      }
    ]
  }]
};

其中,indicator表示雷达图的每个指标,series里面的type为radar,data表示数据。

十、echarts中国地图

echarts中国地图是一种常用的地图类型,通过色块的颜色表示各地的数据指标大小。使用echarts创建中国地图非常简单,只需要在option中设置geo和series的属性即可:

option = {
  ...,
  geo: {
    type: 'map',
    map: 'china'
  },
  series: [
    {
      type: 'map',
      map: 'china'
    }
  ]
};

其中,geo表示地理坐标系组件,type为map表示地图的类型,map为地图的名称,series里面的type为map,map表示地图的名称。