在Vue中使用Echart图表库。【全网最简单】
使用npm安装echart
npm install echarts --save
然后在使用的页面上直接import
import echarts from "echarts";
在页面放一个图表渲染的容器
<div id="chart1" style="width:100%;height:376px;background:#fff"></div>
在页面mounted方法中,找个这个id,然后初始化。
this.teacherChart = echarts.init(document.getElementById("chart1"));
然后配置图表要显示的内容
this.teacherChart.setOption({
xAxis: {
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
areaStyle: {}
}
]
});
刷新浏览器,就显示出来图表了。
一个月前我还是Angular粉,现在觉得Vue真香
有问题欢迎加入QQ群一起讨论 群号: 545594312
欢迎大家关注我的微信公众号:web开发仔,
本公众号的宗旨是以最简短的文字,分享一些关键的web开发技术
技术范围包括web前端后端,以及移动跨平台开发
在Vue中使用Echart图表库。【全网最简单】的更多相关文章
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- 如何在vue中使用echart
1.安装echarts依赖 npm install echarts --save 2.在main.js中全局中引用 import echarts from 'echarts' Vue.protot ...
- vuejs中使用echart图表
首先安装echart npm i echarts -S 加下来以使用这个图表为例 在vue组件中像这样使用: <template> <div :class="classNa ...
- vue中添加Echarts图表的使用,Echarts的学习笔记
项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...
- vue中使用iview组件库实现图片的上传
vue文件如下: iview中Upload 属性详情 https://www.iviewui.com/components/upload js文件 :
- vue 中引入第三方js库
以 jQuery 为例 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1. ...
- vue中使用阿里图标库iconfont和在旧有的iconfont中添加新的图标
第一步 下载样式http://www.iconfont.cn/选择图表,点击加入购物车 第二步 解压下载文件 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face ...
- react中改变echart图表的形状
首先说明一点constructor中的只会渲染一次. 父组建是两个点击按钮,点击一个传过来bar,和一个line,子组件也就是当前组建通过this.props.type接收. 渲染是通过::::::t ...
- vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...
随机推荐
- maven问题汇总
Failed to read artifact descriptor for xxx:jar 在MyEclipse中执行Maven的install命令时,报“Failed to read artifa ...
- 接口、RESTful规范、DRF
接口 #接口:url连接,通过向链接发送不同的类型请求与参数得到相应的响应数据 #1.在视图书写处理请求的 视图函数 #2.在路由层为视图函数配置 url链接=>产生接口 #3.前台通过ajax ...
- 朴素版和堆优化版dijkstra和朴素版prim算法比较
1.dijkstra 时间复杂度:O(n^2) n次迭代,每次找到距离集合S最短的点 每次迭代要用找到的点t来更新其他点到S的最短距离. #include<iostream> #inclu ...
- Artwork (Gym - 102346A)【DFS、连通块】
Artwork (Gym - 102346A) 题目链接 算法 DFS,连通块 时间复杂度:O(k*n + k * k) 1.这道题就是让你判断从(0,0)到(m,n),避开中途所有的传感器(传感器的 ...
- JSP2.2自定义标签、EL函数
简介 JSTL是一个JSP标准标签库,可以解决大部分问题,但是如果我们需要一些更特殊的功能,就需要自定义类似JSTL中标签的标签.如果EL表达式无法满足我们的需求,我们也可以自定义EL函数. tld后 ...
- 理解pytorch几个高级选择函数(如gather)
目录 1. 引言 2. 维度的理解 3. gather函数 4. index_select函数 5. masked_select函数 6. nonzero函数 1. 引言 最近在刷开源的Pytor ...
- 路由总结之静态、RIP、OSPF、IS-IS、BGP和策略路由
路由无疑是当今网络的核心,看到浩如烟海的网络资料,可以让人皓首穷经啊,而且都是浩浩荡荡几百页,所以想搞简单点. 静态路由 静态路由无疑是最简单,也是最基本的. Ip route-static(指定是静 ...
- 记录一下第一次写 50行 SQL代码
这 是一个电商项目,做的是报表的展示,我还以为要请求几次,结果,用一个SQL全部查完了 下面是目标效果图 这是我的SQL代码 SELECT product.NAME, product.price, p ...
- 【代码审计】JAVA代码审计
分享一些Java安全相关文章,其中大部分都涉及到代码的分析与审计. 大家总是在找Java的代码审计的文章,但好像很多人选择性失明. 其实Java没有和PHP一样的简单,所以你觉得你看到的文章不是入门级 ...
- #ifndef, #define, #endif三者的作用
#ifndef, #define, #endif 作用 #ifndef 它是if not define 的简写,是宏定义的一种,实际上确切的说,这应该是预处理功能三种(宏定义.文件包含.条件编译) ...