Vue+Echarts做图表展示

news2024/11/14 15:03:00

1.Echarts安装

终端运行安装命令:

npm install echarts -s

在main.js做全局引用:

//引入echarts
import * as echarts from 'echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;

 2.页面使用Echarts画柱状图和饼图

效果:

代码展示:

        <!-- 统计信息展示 -->
        <div style="display: flex; justify-content: space-around;margin-top: 36px;">
            <!-- 工作量统计 -->
             <div class="echart-work" ref="echartWork"></div>
            <!-- 库存统计 -->
            <div class="echart-work" ref="echartRepertory"></div>
        </div>
    mounted() {
        // 挂载完成dom后进行初始化
        this.showEcarts();
    },
    methods: {

        showEcarts() {
            //工作量统计
            const echartWork = this.$refs.echartWork
            const mycartEchartWork = this.$echarts.init(echartWork)
            //库存统计
            const echartRepertory = this.$refs.echartRepertory
            const mycartEchartRepertory = this.$echarts.init(echartRepertory)
            //绘制工作量统计图表
                  const optionEchartWork = {
                        title : {
                            text: '工作量统计',
                            subtext: '总计',
                            left: '2%',
                            top: '2%',
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        grid: [
                                    {
                                        top: 60,
                                        width: '90%',
                                        bottom: '10%',
                                        left: 10,
                                        containLabel: true
                                    },
                                ],
                        xAxis : [
                            {
                                type : 'value',
                                boundaryGap : [0, 0.01]
                            }
                        ],
                        yAxis : [
                            {
                                type : 'category',
                                data : ['管理员','若依','Njcdv','曹日新','了不起的菜包','测试']
                            }
                        ],
                        series : [
                            {
                                name:'工作量',
                                type:'bar',
                                itemStyle: {
                                    color: 'rgb(30,144,255)'
                                },
                                data:[85, 0, 0, 143, 0, 20]
                            },
                        ]
                    };
                    //绘制库存统计图表
                    const optionEchartRepertory = {
                        title : {
                            text: '库存统计',
                            subtext: '总计114',
                            x:'center',
                            top: '2%',
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient : 'vertical',
                            x : 'left',
                            data:['打点下载','素材','专题','其他','文档','音频']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {
                                    show: true, 
                                    type: ['pie', 'funnel',],
                                    option: {
                                        funnel: {
                                            x: '25%',
                                            width: '50%',
                                            funnelAlign: 'left',
                                            max: 1548
                                        }
                                    }
                                },
                                // restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        // calculable : true,
                        series : [
                            {
                                name:'库存统计',
                                type:'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                itemStyle: {
                                            normal: {
                                                color: function (colors) {
                                                    var colorList = ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'];
                                                    return colorList[colors.dataIndex];
                                                    }
                                                }
                                            },
                                data:[
                                    {value:335, name:'打点下载'},
                                    {value:310, name:'素材'},
                                    {value:234, name:'专题'},
                                    {value:1548, name:'其他'},
                                    {value:135, name:'文档'},
                                    {value:548, name:'音频'},
                                
                                ]
                            }
                        ]
                    };
                    // 渲染图表
                    mycartEchartWork.setOption(optionEchartWork)
                    mycartEchartRepertory.setOption(optionEchartRepertory)
    }
    

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

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

相关文章

Qt各个版本安装的保姆级教程

文章目录 前言Qt简介下载Qt安装包安装Qt找到Qt的快捷方式总结 前言 Qt是一款跨平台的C图形用户界面应用程序开发框架&#xff0c;广泛应用于桌面软件、嵌入式软件、移动应用等领域。Qt的强大之处在于其高度的模块化和丰富的工具集&#xff0c;可以帮助开发者快速、高效地构建出…

esplice老项目(非maven)导入idea问题

解决导入idea显示不正常 老项目导入idea后&#xff0c;显示为如下所示&#xff1a; 显示的不太正常&#xff0c;正常显示为下面这个样子&#xff1a; 解决 非老项目 idea的项目中所有的文件全部变成了.java(已解决) 老项目 以下内容参考&#xff1a;idea导入项目后java文…

阿里云CDN架构技术(一)

CDN补充 cdn内容分发网络&#xff08;content delivery network&#xff0c;cdn&#xff09; 构建在互联网TCP/IP四层模型之上对用户透明的覆盖网。 该网络通过全球范围内分布式部署边缘服务器&#xff0c;将互联网内容从互联网中心缓存到靠近用户的边缘服务器上&#xff0c;…

SymPy,一个可以做数学题的Python库,如何使用SymPy进行微积分计算?

SymPy 是一个 Python 库&#xff0c;用于符号数学。这意味着 SymPy 可以帮助用户执行从基本代数到微积分、方程求解、积分、极限、级数、几何、组合数学、离散数学和量子物理等广泛的数学计算。它允许用户以完全符号化的方式处理数学表达式&#xff0c;而无需将问题转换为数值近…

大模型的“幻觉”克星!被低估的RAG技术

1 RAG与大模型、Prompt、微调的关系 本文主要带大家深入学习一下最近AI领域的重要技术RAG&#xff0c;本文致力于用大白话给大家说明白RAG&#xff0c;但是还是需要一些大模型和微调有关的领域名词有一些基本的了解&#xff0c;大家选择性阅读哦!在进行正文学习之前我们先用一…

Unity Meta Quest 开发:如何在每只手指上添加 Poke 交互

XR 开发社区&#xff1a; SpatialXR社区&#xff1a;完整课程、项目下载、项目孵化宣发、答疑、投融资、专属圈子 找到玩家物体 OVRCameraRig 下的子物体 HandInteractorsRight/Left&#xff08;分别管理左右手的 Interactor&#xff09;下的 HandPokeInteractor 子物体&#x…

Java语言程序设计——篇五

数组 概述数组定义实例展示实战演练 二维数组定义数组元素的使用数组初始化器实战演练&#xff1a;矩阵计算 &#x1f4ab;不规则二维数组实战演练&#xff1a;杨辉三角形 概述 ⚡️数组是相同数据类型的元素集合。各元素是有先后顺序的&#xff0c;它们在内存中按照这个先后顺…

计算机的错误计算(三十三)

摘要 计算机的错误计算&#xff08;三十二&#xff09;展示了 Python的 math库中 exp(x)的计算精度问题。本节讨论 Python 的 torch 库中的 exp(x)的计算精度问题。结果显示&#xff1a;与 math 库中的函数输出值具有同样的错误数字个数。 不妨仍然取&#xff08;二十八&…

华为云.VPC关联概念与对等连接实践

云计算.华为云 VPC关联概念与对等连接实践 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/q…

使用SpringCloud搭建分布式配置中心

在现代的分布式系统中&#xff0c;配置管理是一个非常重要的组成部分。传统的做法是将配置文件放在每个服务的本地进行配置&#xff0c;这样的做法在规模较小的系统中还能够接受&#xff0c;但是当系统规模逐渐扩大时&#xff0c;配置管理将变得非常困难&#xff0c;容易出错。…

Autosar Dcm配置-0x28服务ComControl-基于ETAS软件

文章目录 前言DcmDcmDsdDcmDspBswMBswMModeRequestPortBswMModeConditionBswMLogicalExpressionBswMActionBswMActionListBswMRule总结前言 0x28服务主要用来控制非诊断报文的通讯,一般在刷写预编程过程中,用来禁止APP的通信报文,可以减少总线负载率,提高刷写成功率。本文…

vue3-tree-org实现带照片的组织架构图

官方文档&#xff1a;vue3-tree-org 显示照片需要注意的地方 使用步骤 下载 npm install vue3-tree-org --save 在main.js中引入 import "vue3-tree-org/lib/vue3-tree-org.css"; import vue3TreeOrg from vue3-tree-org;app.use(vue3TreeOrg) 实现代码 <tem…

【简历】郑州某二本学院:前端秋招简历指导,简历通过率接近于0

注&#xff1a;为保证用户信息安全&#xff0c;姓名和学校等信息已经进行同层次变更&#xff0c;内容部分细节也进行了部分隐藏 简历说明 这是一份二本前端同学的校招简历。25届的二本同学求职方向主要是在小公司&#xff0c;但是这个同学他故意把学校放在简历最后&#xff0…

R包:DiagrammeR流程图

介绍 DiagrammeR 依赖于图形描述语言 Graphviz&#xff0c;可以通过 R 包 igraph 和 visNetwork 访问。DiagrammeR 通过将有效的图规范以 DOT 语言的形式传递给 grViz() 函数来输出图。 加载R包 采用DiagrammeRR包&#xff0c;它提供了以下函数&#xff1a; 使用create_grap…

亲子母婴行业媒体邀约宣发资源

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 亲子母婴行业是一个综合性的产业&#xff0c;涉及多个领域&#xff0c;包括儿童食品&#xff0c;儿童玩具&#xff0c;服装&#xff0c;洗护&#xff0c;月子中心&#xff0c;母婴护理&a…

单臂路由组网实验,单臂路由的定义、适用情况、作用

一、定义 单臂路由是指通过在路由器的一个接口上配置许多子接口,从而实现原来相互隔离的不同VLAN之间的互通。 子接口:把路由器上的实际的物理接口划分为多个逻辑上的接口,这些被划分的逻辑接口就是子接口。 二、适用情况 用在没有三层交换机,却要实现不同VLAN之间的互…

怎样恢复删除的视频?简单几步迅速上手!

在短视频时代&#xff0c;视频成为我们生活中不可缺少的一部分。它记录了我们生活中的点点滴滴&#xff0c;承载着许多美好的回忆。如果一不小心删除了重要的视频&#xff0c;那将是一个巨大的缺憾。那我们该怎么恢复删除的视频呢&#xff1f;在电脑删掉的视频还能恢复吗&#…

Java基础笔记(面试题)

一、Tomcat中为什么要使用自定义类加载器 Tomcat中可以放多个Java项目的jar文件&#xff0c;如果每个jar文件中都有一个User的类&#xff0c;那么User类在没有自定义类加载器的情况下是只能加载一次&#xff1b;想要加载多次&#xff0c;只能自定义类加载器 二、JDK、JRE、JVM…

如何实现本地文件存储

文章目录 1. 知识回顾2. 示例代码 我们在上一章回中介绍了"如何实现文件存储"相关的内容&#xff0c;本章回中将继续介绍与此相关的内容.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 知识回顾 我们上一章回中介绍了实现文件存储的三个步骤&#xff0c;不过限…

vue调试工具没有Pinia模块解决办法

修改前&#xff0c;调试工具里面没有Pinia模块 在项目的入口文件mian.js中这样修改 import /assets/main.scss import pinia from /stores/index import { createApp } from vue import App from ./App.vue import router from ./router import elFormRenderer from el-form…