vue2 echarts不同角色多个类型数据的柱状图

前端代码:

先按照echarts插件。在页面里引用
import * as echarts from "echarts";设置div
<div style="width:100%;height:250px;margin-top: 4px;"  id="addressChart"></div>方法:
addressEcharts() {const option = {grid: {left: '2%',right: '2%',bottom: '10%',containLabel: true},title: {text: '用户所在地理区域分布柱状图',textStyle:{fontSize:10,fontWeight:'300'},},xAxis: {data: ['浙江','上海']},yAxis: {type: "value",name: "单位(个)",nameTextStyle: {color: "#aaa",nameLocation: "start",},},legend: {data: ['软件企业', '设计企业', '检测企业'],top: '0%'},series: [{data: [0,1],type: "bar",smooth: true,name: '软件企业',label: {// 柱状图上方文本标签,默认展示数值信息show: true,position: "top"}},{data: [2,3],type: "bar",smooth: true,name: '设计企业',label: {// 柱状图上方文本标签,默认展示数值信息show: true,position: "top"}},{data: [4,5],type: "bar",smooth: true,name: '检测企业',label: {// 柱状图上方文本标签,默认展示数值信息show: true,position: "top"}}]};this.addressChart = echarts.init(document.getElementById("addressChart"));this.addressChart.setOption(option);//随着屏幕大小调节图表window.addEventListener("resize", () => {this.addressChart.resize();});},

如图:

其他图形的画图可参考echarts官网

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

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

相关文章

RabbitMQ搭建集群环境、配置镜像集群、负载均衡

RabbitMQ集群搭建 Linux安装RabbitMQ下载安装基本操作命令开启管理界面及配置 RabbitMQ集群搭建确定rabbitmq安装目录启动第一个节点启动第二个节点停止命令创建集群查看集群集群管理 RabbitMQ镜像集群配置启用HA策略创建一个镜像队列测试镜像队列 负载均衡-HAProxy安装HAProxy…

【精选】计算机网络教程(第3章数据链路层)

目录 前言 第3章数据链路层 1、差错检测&#xff08;CRC&#xff09; 2、点对点协议&#xff08;了解应用场景&#xff09; 3、什么是碰撞域&#xff0c;什么是广播域 碰撞域&#xff08;Collision Domain&#xff09;&#xff1a; 广播域&#xff08;Broadcast Domain&a…

利用二叉树遍历的思想编写一个判断二叉树是否是平衡二叉树的算法

题目描述&#xff1a;利用二叉树遍历的思想编写一个判断二叉树是否是平衡二叉树的算法。 分析&#xff1a; 设置二叉树的平衡标记为balance&#xff0c;若 balance 为 1&#xff0c;则是平衡二叉树&#xff0c;若为0&#xff0c;则不是。 void Judge_AVL(BiTree T,int &b…

计算机组成原理学习(输入输出系统)

目录 输入输出系统&#xff08;i/o系统&#xff09; 一.现代计算机的结构 二.常见的&#xff08;I/O设备或者是外部设备&#xff09; ​ 三.主机如何与I/O设备进行交互 四.I/O控制方式简介 五.I/O系统的基本组成 输入输出系统&#xff08;i/o系统&#xff09; 一.现代计算…

PTA——L1-026 I Love GPLT

这道超级简单的题目没有任何输入。 你只需要把这句很重要的话 —— “I Love GPLT”——竖着输出就可以了。 所谓“竖着输出”&#xff0c;是指每个字符占一行&#xff08;包括空格&#xff09;&#xff0c;即每行只能有1个字符和回车。 输入样例&#xff1a; 无输出样例&#…

Java stream流实现List<对象>通过对象中的多个字段去重

遇到同时通过多个字段对list进行去重需求&#xff0c;记录一下 先创建一个实体类 Data public class User {private Long id;private String name;private String code;private String phone;private Integer age;public User(Long id, String name, String code, String phon…

android studio简易app实例

以下是一个使用Android Studio创建的简易App实例。这个App包括一个主页面&#xff0c;一个关于页面和一个设置页面。 步骤1&#xff1a;创建新的Android项目 打开Android Studio&#xff0c;点击"File" -> "New" -> "New Project"。在新…

一键安装下载3ds Max!别墅还是宫殿?3ds Max助你建造梦幻般的艺术建筑

不再浪费时间在网上寻找3ds Max的安装包了&#xff01;因为你所需要的一切都可以在这里找到&#xff01;作为一款全球领先的3D设计工具&#xff0c;3ds Max为创作者们带来了前所未有的便利和创作灵感。无论是建筑设计、影视特效还是游戏开发&#xff0c;3ds Max都能帮助你实现想…

C++——C++11(1)

时至今日&#xff0c;C标准已经到了C23&#xff0c;但是你要说哪一次提出的标准最经 典&#xff0c;那C11一定会被人提及&#xff0c;C11带来了数量可观的变化&#xff0c;其中包 含了约140个新特性&#xff0c;以及对C03标准中约600个缺陷的修正&#xff0c;这使得 C11更像是从…

一个神奇的Python库:Evidently,机器学习必备

Evidently 是一个面向数据科学家和机器学习工程师的开源 Python 库。它有助于评估、测试和监控从验证到生产的数据和 ML 模型。它适用于表格、文本数据和嵌入。 简介 Evidently 是一个开源的 Python 工具&#xff0c;旨在帮助构建对机器学习模型的监控&#xff0c;以确保它们的…

博客动态校验+静态校验二次开发方式

静态校验&#xff1a; 1&#xff1a;将需要静态校验的参数继承BaseReqeust类重写validate方法&#xff1a; 动态校验&#xff1a; 1&#xff1a;在需要校验的实现类上加&#xff1a; BizValidate注解 2&#xff1a;写一个校验类&#xff0c;方法命名规范为&#xff1a;需要校…

修改npm源码解决服务端渲染环境中localstorage报错read properties of undefined (reading getItem)

现象&#xff1a; 这个问题是直接指向了我使用的第三方库good-storage&#xff0c;这是一个对localStorage/sessionStorage做了简单封装的库&#xff0c;因为项目代码有一个缓存cache.ts有用到 原因分析&#xff1a; 从表象上看是storage对象找不到getItem方法&#xff0c; 但…

快速定位网页中元素在源代码中的位置

快速定位网页中元素在源代码中的位置参考本文

Android--Jetpack--数据库Room详解一

人生何须万种愁&#xff0c;千里云烟一笑收 一&#xff0c;定义 Room也是一个ORM框架&#xff0c;它在SQLite上提供了一个抽象层&#xff0c;屏蔽了部分底层的细节&#xff0c;使用对象对数据库进行操作&#xff0c;进行CRUD就像对象调用方法一样的简单。 二&#xff0c;角色介…

基于YOLOv8深度学习的路面标志线检测与识别系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

QEMU源码全解析 —— virtio(10)

接前一篇文章&#xff1a; 上一回开始&#xff0c;沿着device_set_realized() -> pci_qdev_realize() -> virtio_pci_realize()这一调用线&#xff0c;对于virtio_pci_realize函数进行了详细解析。最后&#xff0c;讲到virtio_pci_realize函数的最后一步调用了virtio_bal…

docker容器-compose单机容器编排

目录 yaml文件使用的注意事项 yaml文件的基本数据结构 docker-compose单机容器编排 docker-compose的常用命令 安装docker-compose docker-compose部署nginx nginx文件 yml文件 docker-compose创建镜像和容器 docker-compose构建lnmp nginx文件 mysql文件 php文件…

华为组播配置案例

igmp-snooping主要用于生成二层组播表项&#xff0c;防止交换机全部接口都发组播报文 PC端配置&#xff1a; 组播源配置&#xff1a; R1 interface GigabitEthernet0/0/0 ip address 10.0.0.1 255.255.255.0 pim dm interface GigabitEthernet0/0/1 ip address 192.168.0…

UE5 C++(三)— 基本用法(生命周期、日志、基础变量)

文章目录 生命周期日志打印Outlog打印屏幕打印 基础变量类型FString、FName 和 FText&#xff0c;三者之间的区别 基础数据类型打印 忘记说了每次在Vscode修改后C脚本后&#xff0c;需要编译一下脚本&#xff0c;为了方便我是点击这里编译脚本 生命周期 Actor 生命周期官方文档…

年底总结-基于战略落地的年度经营计划

到了年底&#xff0c;今年不管经济如何&#xff0c;形势多么不好&#xff0c;这个月也要结束2023年了&#xff0c;在这个阶段最关键的是做好今年的总结以及明年的计划。 总结是为了更好地做明年的计划和形势的预判。 借用数据表作为工具&#xff0c;科学理性地对自身公司的经…