使用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图表库。【全网最简单】的更多相关文章

  1. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  2. 如何在vue中使用echart

    1.安装echarts依赖   npm install echarts --save 2.在main.js中全局中引用 import echarts from 'echarts' Vue.protot ...

  3. vuejs中使用echart图表

    首先安装echart npm i echarts -S 加下来以使用这个图表为例 在vue组件中像这样使用: <template> <div :class="classNa ...

  4. vue中添加Echarts图表的使用,Echarts的学习笔记

    项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...

  5. vue中使用iview组件库实现图片的上传

    vue文件如下: iview中Upload 属性详情 https://www.iviewui.com/components/upload js文件 :

  6. vue 中引入第三方js库

    以 jQuery 为例 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1. ...

  7. vue中使用阿里图标库iconfont和在旧有的iconfont中添加新的图标

    第一步 下载样式http://www.iconfont.cn/选择图表,点击加入购物车 第二步 解压下载文件 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face ...

  8. react中改变echart图表的形状

    首先说明一点constructor中的只会渲染一次. 父组建是两个点击按钮,点击一个传过来bar,和一个line,子组件也就是当前组建通过this.props.type接收. 渲染是通过::::::t ...

  9. vue中使用第三方UI库的移动端rem适配方案

    需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...

随机推荐

  1. maven问题汇总

    Failed to read artifact descriptor for xxx:jar 在MyEclipse中执行Maven的install命令时,报“Failed to read artifa ...

  2. 接口、RESTful规范、DRF

    接口 #接口:url连接,通过向链接发送不同的类型请求与参数得到相应的响应数据 #1.在视图书写处理请求的 视图函数 #2.在路由层为视图函数配置 url链接=>产生接口 #3.前台通过ajax ...

  3. 朴素版和堆优化版dijkstra和朴素版prim算法比较

    1.dijkstra 时间复杂度:O(n^2) n次迭代,每次找到距离集合S最短的点 每次迭代要用找到的点t来更新其他点到S的最短距离. #include<iostream> #inclu ...

  4. Artwork (Gym - 102346A)【DFS、连通块】

    Artwork (Gym - 102346A) 题目链接 算法 DFS,连通块 时间复杂度:O(k*n + k * k) 1.这道题就是让你判断从(0,0)到(m,n),避开中途所有的传感器(传感器的 ...

  5. JSP2.2自定义标签、EL函数

    简介 JSTL是一个JSP标准标签库,可以解决大部分问题,但是如果我们需要一些更特殊的功能,就需要自定义类似JSTL中标签的标签.如果EL表达式无法满足我们的需求,我们也可以自定义EL函数. tld后 ...

  6. 理解pytorch几个高级选择函数(如gather)

    目录 1. 引言 2. 维度的理解 3. gather函数 4. index_select函数 5. masked_select函数 6. nonzero函数 1. 引言   最近在刷开源的Pytor ...

  7. 路由总结之静态、RIP、OSPF、IS-IS、BGP和策略路由

    路由无疑是当今网络的核心,看到浩如烟海的网络资料,可以让人皓首穷经啊,而且都是浩浩荡荡几百页,所以想搞简单点. 静态路由 静态路由无疑是最简单,也是最基本的. Ip route-static(指定是静 ...

  8. 记录一下第一次写 50行 SQL代码

    这 是一个电商项目,做的是报表的展示,我还以为要请求几次,结果,用一个SQL全部查完了 下面是目标效果图 这是我的SQL代码 SELECT product.NAME, product.price, p ...

  9. 【代码审计】JAVA代码审计

    分享一些Java安全相关文章,其中大部分都涉及到代码的分析与审计. 大家总是在找Java的代码审计的文章,但好像很多人选择性失明. 其实Java没有和PHP一样的简单,所以你觉得你看到的文章不是入门级 ...

  10. #ifndef, #define, #endif三者的作用

    #ifndef, #define, #endif 作用   #ifndef 它是if not define 的简写,是宏定义的一种,实际上确切的说,这应该是预处理功能三种(宏定义.文件包含.条件编译) ...