ECharts 横向柱状图与纵向柱状图的切换

最新推荐文章于 2024-05-14 16:57:24 发布

原创最新推荐文章于 2024-05-14 16:57:24 发布 · 1w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

前端类专栏收录该内容

52 篇文章

订阅专栏

文章展示了如何使用ECharts库在JavaScript中创建纵向和横向柱状图。关键在于调整xAxis和yAxis的类型，交换它们的数据设置，即可实现柱状图的展示方向变化。示例代码提供了详细的配置选项。

该文章已生成可运行项目，

纵向柱状图

import * as echarts from 'echarts';

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
option && myChart.setOption(option);

横向柱状图

import * as echarts from 'echarts';

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
option && myChart.setOption(option);