vue使用echarts图表

https://www.jianshu.com/p/2894b781063b

1、安装

npm install echarts
// npm install echarts --save

2、引入 echarts

import * as echarts from 'echarts';

3、写一个div容器用来承载图表:

<div  id="teamLeader"></div>

4、写一个方法,(直接复制粘贴官网文档的代码m修改一下容器id和各部分的数值即可)初始化页面的时候,调用一下这个方法即可。

mounted() {this.getTeamLeader()
},
methods: {getTeamLeader(){// 方法里面直接复制图表的js代码,修改对应的id值就可以var myChart = echarts.init(document.getElementById('teamLeader'));myChart.setOption({

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

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

相关文章

云计算入门

根据美国国家标准与技术研究院定义&#xff1a;云计算是一种按使用量付费的模式&#xff0c;这种模式提供可用的、便捷的、按需的网络访问&#xff0c; 进入可配置的计算资源共享池&#xff08;资源包括网络&#xff0c;服务器&#xff0c;存储&#xff0c;应用软件&#xff0c…

20180105随笔

过滤器的执行过程&#xff1a;// 目标资源执行前执行chain.doFilter(request, response);// 目标资源执行后执行文件上传的前提&#xff1a;1.表单的method方法必须是post2.表单的enctype类型必须是&#xff1a;multipart/form-data3.表单中input的上传输入域为&#xff1a;<…

怎么自定义字体_自定义字体@fontface的常见应用

前言font-face允许网页自带字体&#xff0c;从而消除对用户电脑字体的依赖。基本用法如下&#xff1a;font-face { font-family: "family-name"; /* 字体名 */ src: url("family-name.eot"); /* IE9 */ src: url("family-name.eot?#iefix&q…

vue项目中使用mock(一)

一&#xff0c;安装 npm install mockjs --save-dev npm install json5 --save-dev npm install axios --save 二&#xff0c;每个文件内容 目录&#xff1a; 流程&#xff1a; Home.vue执行getUserInforList() 调用main.js中全局变量$api 调用/utils/api下的getUserInfo…

快速搭建redis单机版和redis集群版

单机版 第一步&#xff1a;需要安装redis所需的C语言环境&#xff0c;若虚拟机联网&#xff0c;则执行 yum install gcc-c 第二步&#xff1a;redis的源码包上传到linux系统 第三步&#xff1a;解压缩redis tar zxf redis的压缩文件 第四步&#xff1a;编译 &#xff0c;进入…

使用RxJava和Completable并行执行阻止任务

借助RxJava 1.1.1中引入的Completable抽象&#xff0c;如何并行执行阻止“仅副作用”&#xff08;也称为void&#xff09;任务的并行执行变得更加容易。 “ 正如您可能已经注意到&#xff0c;阅读我的博客时&#xff0c;我主要专注于软件Craft.io和自动代码测试。 但是&#x…

svn 回退到指定版本无法提交_SVN终端演练-版本回退

1. 版本回退概念以及原因?概念: 是指将代码(本地代码或者服务器代码), 回退到之前记录的某一特定版本原因: 如果代码做错了, 想返回之前某个状态重做;2. 修改了,但未提交的情况下, 回退代码方案1: (大力推荐)svn revert (作用:返回到上次提交后版本对应的最原始的状态)方案2: …

vue-awesome-swiper缩略图无法联动的问题

一&#xff0c;安装 npm install vue-awesome-swiper --save // npm install vue-awesome-swiper3.x --save我安装的版本是 “swiper”: “^6.6.1”, “vue-awesome-swiper”: “^3.1.3”, 在使用vue-awesome-swiper组件的时候&#xff0c;缩略图无法和大图实现联动&#xff…

个人博客13

今天的任务依旧为美化界面。 昨天的任务为美化界面。 遇到的问题为页面的布局&#xff0c;以及颜色的搭配。转载于:https://www.cnblogs.com/qilin20/p/8232942.html

tcp wireshark 过滤syn_使用 WireShark 分析 TCP/IP 三次握手 和 四次挥手

TCP 三次握手 示意图Wireshark 抓包注意事项为了演示一个TCP三次握手建立连接的过程&#xff0c;我们通过 Chrome 访问一个网页。已知 HTTP 协议就是建立在TCP链接上的通过 Cmd 的 ping 命令获取 这个网站对应的 IP地址 183.136.236.13确定 这个IP 有一个非常重要的好处&#x…

Python 基础函数

1.输入输出函数 input() 打印输出的内容后&#xff0c;接收输入用户输入的内容&#xff0c;默认为“字符串”类型 print() 打印输出的内容 2.类型转换函数 int() 转为整数 str() 转为字符串 3.类型判断函数 string.isdigit() 判断string是否为数字格式&#xff0c;返回布尔值 4…

Vue+Element导入导出Excel

一&#xff0c;安装 npm install -S file-saver xlsx npm install -D script-loader 二&#xff0c;导入Excel 1&#xff0c;Element 上传控件 <el-uploadaction"/":on-change"onChange":auto-upload"false":show-file-list"false&quo…

javafx 使用_使用JavaFX AnimationTimer

javafx 使用回想一下&#xff0c;给AnimationTimer起个名字可能不是一个好主意&#xff0c;因为它不仅可以用于动画&#xff0c;还可以用于测量fps速率&#xff0c;碰撞检测&#xff0c;模拟步骤&#xff0c;游戏主循环等。实际上&#xff0c;我大部分时间都在看AnimationTimer…

python 定时任务系统_Python定时任务,实现自动化的方法

python教程栏目介绍实现自动化的方法。1. 安装cron基本上所有的Linux发行版在默认情况下都预安装了cron工具。即使未预装cron&#xff0c;也很简单&#xff0c;执行几条简单的命令就可手动安装# 检查是否已经预装了cronservice cron status复制代码安装并启动服务安装&#xff…

sudo su 和 sudo -s区别

sudo su 和 sudo -s区别 sudo su 和 sudo -s都是切换到root用户&#xff0c;不同的是&#xff1a; sudo su 环境用的是目标用户(root)的环境 sudo -s 环境用的是当前用户本身的环境 posted on 2018-01-08 22:25 老于601 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnbl…

js UTF-8编码转为字符串

// UTF8编码转成汉字字符串 export function revertUTF8(szInput) {var x,wch,wch1,wch2,uch"",szRet"";for (x0; x<szInput.length; x) {if (szInput.charAt(x)"%") {wch parseInt(szInput.charAt(x) szInput.charAt(x),16);if (!wch) {bre…

.Net Core 简洁架构事件(这个不完整,待仔细补充)

.Net Core的架构 - 根据微软官方文档 微软给出了.Net Core的架构方法&#xff0c;无论是在web&#xff0c;azure&#xff0c;uwp等等 微软的github地址&#xff1a;https://github.com/dotnet-architecture/eShopOnWeb 转载于:https://www.cnblogs.com/bijinshan/p/8250512.htm…

原理图中如何连线_Altium Designer10绘制原理图

在进行原理图绘制之前,应先将原理图库与PCB库相关联,在原理图绘制完成后,在生成PCB图,如何将原理图库与PCB库相关联?先进入原理图库,如下图所示。双击元器件文件,进行元器件配置。 元器件配置界面如下图所示。选择Add...进行添加对应的PCB库。 选择浏览进行查找相关PCB库…

vue 父组件与子组件之间的传值(普通传值)

一&#xff0c;子组件向父组件传值&#xff08;$emit&#xff09;&#xff1a; 1、定义子组件 <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个子组件传值的方法 --><input type"button" value"点击触发&q…

NetBeans Java EE技巧3:数据库中的RESTful Web服务

许多现代的Web应用程序正朝着使用HTTP使用无状态通信的方向发展。 REST&#xff08;代表性状态转移&#xff09;体系结构样式通常用于设计网络应用程序&#xff0c;而使用Java EE 7&#xff0c;很容易开发用于数据库通信的RESTful后端。 使用简单的POJO&#xff08;普通的Java旧…