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

在 Vue 中集成 ECharts 并绘制一个躺着的柱状图(即横向的柱状图),你可以通过设置 ECharts 的 bar 类型,并配置 xAxisyAxis 来实现。下面是一个完整的 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 使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/55876.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《C++编程新探索:实现高效视频拼接算法》

在当今数字化时代&#xff0c;视频内容的创作和处理变得越来越重要。视频拼接作为一种常见的视频处理技术&#xff0c;能够将多个视频片段组合成一个连续的视频&#xff0c;为视频创作者和用户带来了更多的可能性。本文将探讨如何在 C中实现高效的视频拼接算法&#xff0c;为开…

数据结构与算法JavaScript描述练习------第3章列表

1. 增加一个向列表中插入元素的方法&#xff0c;该方法只在待插元素大于列表中的所有元素时才执 行插入操作。这里的大于有多重含义&#xff0c;对于数字&#xff0c;它是指数值上的大小&#xff1b;对于字母&#xff0c;它 是指在字母表中出现的先后顺序。 function isGreate…

【element-tiptap】如何引进系统中的字体?

源码地址&#xff1a; https://github.com/Leecason/element-tiptap 源码中给出的字体如下 可以看到&#xff0c;咱们日常需要的黑体、微软雅黑等都没有&#xff0c;所以这篇文章来探索一下怎么加字体。 另外呢&#xff0c;肯定有小伙伴发现&#xff0c;这个按钮点击的时候&am…

IDEA 配置 Git 详解

本文将介绍在IntelliJ IDEA 中如何配置Git 没有安装配置 Git 的可以参考我的这篇文章&#xff1a;安装配置 Git 一、操作环境及准备 1.win 10 2.已安装且配置了Git 3.有Gitee账户 4.安装了IntelliJ IDEA 2023.2.1 5.全程联网 二、配置步骤 2.1 配置git 1.采用全局设置&…

OpenCV视频I/O(18)视频写入类VideoWriter之初始化 VideoWriter 对象的函数open()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 初始化或重新初始化视频编写器。 该方法打开视频编写器。参数与构造函数 VideoWriter::VideoWriter 中的相同。 cv::VideoWriter::open() 函数用…

C++继承与菱形继承(一文了解全部继承相关基础知识和面试点!)

目的减少重复代码冗余 Class 子类(派生类) &#xff1a; 继承方式 父类&#xff08;基类&#xff09; 继承方式共有三种&#xff1a;公共、保护、私有 父类的私有成员private无论哪种继承方式都不可以被子类使用 保护protected权限的内容在类内是可以访问&#xff0c;但是在…

息肉检测数据集 yolov5 yolov8适用于目标检测训练已经调整为yolo格式可直接训练yolo网络

息肉检测数据集 yolov5 yolov8格式 息肉检测数据集介绍 数据集概述 名称&#xff1a;息肉检测数据集&#xff08;基于某公开的分割数据集调整&#xff09;用途&#xff1a;适用于目标检测任务&#xff0c;特别是内窥镜图像中的息肉检测格式&#xff1a;YOLO格式&#xff08;边…

设计一个OAuth2认证系统:支持第三方登录的实用指南

设计一个OAuth2认证系统:支持第三方登录的实用指南 引言 在现代Web应用中,用户认证是一个至关重要的环节。OAuth2作为一种开放标准,允许用户通过第三方服务进行身份验证,简化了用户登录流程,同时提高了安全性。本文将详细介绍如何设计一个支持第三方登录的OAuth2认证系统…

wenserver中 一些常见的 错误码

EINTR 是 Linux 系统中定义的一个错误码&#xff0c;代表“被信号中断”。当一个系统调用在执行过程中被一个信号处理函数中断时&#xff0c;这个系统调用会立即返回错误&#xff0c;并且 errno 被设置为 EINTR。 举个例子 read函数是阻塞的 现在没有数据要读 我们read一直阻…

【3dgs】总结3DGS与NeRF如何重塑SLAM24年4月最新进展

【3dgs】总结3DGS与NeRF如何重塑SLAM&#xff01; 1. 摘要2. 简洁3. 背景3.1 Existing SLAM Surveys3.2 progress in Radiance Field Theory3.3.1 NeRF3.3.2 3dgs3.4 数据集 4 数据集4.1 SLAM3.1 RGB-D SLAM方法3.1.1 基于NeRF风格的RGB-D SLAM3.1.2 基于3DGS风格的 RGB-D SLAM…

React(一) 认识React、熟悉类组件、JSX书写规范、嵌入变量表达式、绑定属性

文章目录 一、初始React1. React的基本认识2. Hello案例2.1 三个依赖2.2 渲染页面2.3 hello案例完整代码 二、类组件1. 封装类组件2. 组件里的数据3. 组件里的函数 (重点)4. 案例练习(1) 展示电影列表 三、JSX语法1. 认识JSX2. JSX书写规范及注释3. JSX嵌入变量作为子元素4. JS…

小猿口算脚本

实现原理&#xff1a;安卓adb截图传到电脑&#xff0c;然后用python裁剪获得两张数字图片&#xff0c;使用ddddocr识别数字&#xff0c;比较大小&#xff0c;再用adb命令模拟安卓手势实现>< import os import ddddocr from time import sleep from PIL import Imagedef …

遍历有向图链路(DFS算法)- 优化版

在上一节基础上&#xff0c;去除了节点的pre集合&#xff0c;只保留节点next的结合&#xff0c;对数据模型进行了优化&#xff0c;实现思想做了优化。 有向图示例&#xff1a; 基本思路 构建有向图数据模型校验有向图不能出现回路&#xff0c;即当前节点不能出现在历史链路中首…

连续点击三次用户

有用户点击日志记录表 t2_click_log&#xff0c;包含user_id(用户ID),click_time(点击时间)&#xff0c;请查询出连续点击三次的用户数&#xff0c; 连续点击三次&#xff1a;指点击记录中同一用户连续点击&#xff0c;中间无其他用户点击&#xff1b; CREATE TABLE t2_click…

Unity实现自定义图集(三)

以下内容是根据Unity 2020.1.0f1版本进行编写的   1、实现编辑器模式下进游戏前Pack全部自定义图集 同Unity的图集一样,Unity的编辑器模式会在进游戏前把全部的SpriteAtlas都打一次图集,如图: 我们也实现这样的效果。 首先需要获取全部的图集路径。因为目前使用的是以.…

【数据结构】6道经典链表面试题

目录 1.返回倒数第K个节点【链接】 ​代码实现 2.链表的回文结构【链接】 代码实现 3.相交链表【链接】 代码实现 4.判断链表中是否有环【链接】 代码实现 常见问题解析 5.寻找环的入口点【链接】 代码实现1 ​代码实现2 6.随机链表的复制【链接】 代码实现 1.…

如何进行数据中心负载测试的自动化?

数据中心负载测试的自动化是一种通过使用软件工具和脚本来模拟大量用户访问数据中心的过程&#xff0c;以评估其性能、稳定性和可扩展性的方法。以下是进行数据中心负载测试自动化的一些建议&#xff1a; 市场上有许多负载测试工具可供选择&#xff0c;如LoadRunner、JMeter、…

如何防止按钮重复提交

在前端开发中&#xff0c;防止按钮重复提交是一个常见的需求&#xff0c;可以避免因用户重复点击导致的多次请求发送&#xff0c;从而影响服务器性能或导致数据错误。下面介绍几种常见的方法&#xff0c;并给出相应的示例&#xff1a; 1. 禁用按钮 在用户提交表单后&#xff…

【力扣算法题】每天一道,健康生活

2024年10月8日 参考github网站&#xff1a;代码随想录 1.二分查找 leetcode 视频 class Solution { public:int search(vector<int>& nums, int target) {int left 0;int right nums.size()-1;while(left<right){int middle (leftright)/2;if(nums[middle] …

字节跳动青训营开始报名了!

关于青训营&#xff1a; 青训营是字节跳动技术团队发起的技术系列培训 &人才选拔项目;面向高校在校生&#xff0c;旨在培养优秀且具有职业竞争力的开发工程师。 本次技术训练营由掘金联合豆包MarsCode 团队主办课程包含前端、后端和 A 方向&#xff0c;在这个飞速发…