vue中用echarts做一个躺着的柱状图

在 Vue 中集成 ECharts 并绘制一个躺着的柱状图(即横向的柱状图),你可以通过设置 ECharts 的 bar 类型,并配置 xAxisyAxis 来实现。下面是一个完整的 Vue 示例代码。

示例代码:

vue 复制代码
<template>
  <div id="bar-chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'HorizontalBarChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById('bar-chart');
      var myChart = echarts.init(chartDom);

      var option = {
        title: {
          text: 'Horizontal Bar Chart Example',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'value', // 横向的柱状图,X 轴是数值轴
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category', // Y 轴是类目轴
          data: ['Category A', 'Category B', 'Category C', 'Category D']
        },
        series: [
          {
            name: 'Value',
            type: 'bar', // 柱状图类型
            data: [335, 410, 234, 543],
            itemStyle: {
              color: '#3398DB'
            }
          }
        ]
      };

      // 设置配置项并显示图表
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
#bar-chart {
  width: 100%;
  height: 100%;
}
</style>

代码说明:

  1. HTML 部分<div id="bar-chart"></div> 是用来容纳 ECharts 图表的 DOM 元素。在 mounted() 钩子中初始化图表。

  2. JavaScript 部分

    • echarts.init():将容器元素传递给 echarts.init,初始化图表实例。
    • xAxisyAxis
      • xAxis 设为 value 类型,因为横向的柱状图的 X 轴是数值轴。
      • yAxis 设为 category,用于展示分类数据,如 Category ACategory B
    • series
      • type 设为 bar,表示柱状图类型。
      • data 用来展示每个类目对应的数据值。
  3. 样式 :使用 scoped 的 CSS 确保图表容器的宽度和高度适配父级元素。

效果

  • 这是一个简单的横向柱状图,柱子沿 X 轴水平方向排列,而 Y 轴用来显示不同的分类。
  • 你可以根据实际需求调整图表的标题、颜色、数据等。

扩展:

  • 你可以添加更多的 series 项,生成多组数据的横向柱状图。
  • 通过配置 tooltiplegend,你可以使图表的交互更加丰富。

如果你需要动态更新图表数据或更多自定义样式,可以在 Vue 中结合 propsdata 使用。

相关推荐
圈圈编码2 分钟前
Spring Task 定时任务
java·前端·spring
转转技术团队3 分钟前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2388 分钟前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia13 分钟前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia14 分钟前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
北凉温华14 分钟前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
随笔记15 分钟前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
原生高钙17 分钟前
LLM大模型对话框实践:大文件的分片上传
前端
加兵柠檬水18 分钟前
代码输出题,会这些就够了。
前端
Json201131518 分钟前
Gin、Echo 和 Beego三个 Go 语言 Web 框架的核心区别及各自的优缺点分析,结合其设计目标、功能特性与适用场景
前端·golang·gin·beego