「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表,得学学了,必须要会的基本操作了
依旧还是学妹给的封面
直接进入主题…在vue中使用个啥,都差不多是一个流程。
引入Echarts
安装
npm install echarts --save
我们写一个Echarts组件,在内进行引入
import * as echarts from 'echarts'
入门使用
如果之前没有接触过Vue或者Echarts 的小伙伴,了解方式无疑就是Echarts官方文档或各大搜索引擎了。
我的了解方式无疑也是这个,但是我在看官方文档的时候,觉得官方给的那个例子,有点点不符合Vue的风格,不过我先贴出来,实现最简单的入门:
<template><div id="echarts" style="width: 600px; height: 600px"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {mounted() {this.createEcharts();},methods: {createEcharts() {// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById("echarts"));// 绘制图表 // 最重要的就是理解各个配置的作用吧,这个没啥说的 就算熟能生巧myChart.setOption({title: {text: "ECharts 入门示例",},tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],});}}
};
</script>
将这个组件,在app组件中进行引入即可,我们来看看初始效果是如何的。
问题
1)从DOM操作改为ref
不知道你们有没有发现问题所在:
官方文档中它是直接对于dom进行操作的document.getElementById("echarts")
,这和Vue的理念其实是不一样的。
在vue中我们要做到尽可能减少直接对dom的操作,那么在这里我们可以如何改进勒??
我们明确一下document.getElementById("echarts")
获得的是什么即可了。这里无疑就是获得了节点信息,打印出来可以看到console.log(document.getElementById("echarts"));
那么我们就只要用vue的方式获取到这个节点信息即可,因此可以使用vue中的ref属性来实现。
<div id="echarts" ref="myEcharts" style="width: 600px; height: 600px"></div>console.log(this.$refs.myEcharts);
我们输出来看一下好吧
和我们之前获取到的是一模一样的哈。
为了更符合Vue中的方式,我们再将这个案例改的更加灵活些:
<template><div ref="myEcharts" style="width: 600px; height: 600px"></div>
</template>
<script>
import * as echarts from 'echarts'export default {data() {return {myEcharts: null,option:{title: { text: '普通图表'},tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}}},methods: { initChart() {this.myEcharts = echarts.init(this.$refs.myEcharts);this.myEcharts.setOption(this.option);}},mounted () {this.initChart()}}
</script>
这样子才像vue中的写法哈。
2)优化思路
1、如果我们在项目中要用到多种样式的图,那么直接引入也不是不可以的,但是如果仅仅只是使用了折线图或者柱状图这种,那么还是建议大家采用按需引入的方式,那样项目打包体积会更小一点。
官方文档介绍的按需引入
2、另外就是我们可以将echarts
封装成组件,这样是最佳的方式吧,将一切都动态化。
个人小小见解,仅考虑优化使用方式,并非是性能上的。如有不足,请及时指出,非常感谢。
这是最简单的柱状图哈,知道大家的需求都是不一样的,下面讲讲该如何学习。
多种多样的图表
在官方文档中,有非常非常多的案例,就算我们什么都不会,cv大法一出,也是可以轻松用起来的哈。
官方示例
并且点进每个图表都是有核心代码的。
所谓的核心代码就是option
中的各种配置项。关于每一项配置项官方也给了详细介绍。
数据的那一栏就是data
,其他的都是配置项,不过如何渲染还是看大伙们的业务是啥。
点顶部菜单中的文档那一栏,就有一个配置项手册
最常用的几个配置项应该下图中这个了吧,俗称的九大配置项。
如果想要快速理解的话,建议直接点击一个复杂点的官方示例图中,然后拿着配置手册查一查,理解很快的,我认为这种方式应该是最简单的啦吧。
授人以鱼,不如授之以渔
因为不同的业务,可能会产生不一样的需求,所以更多的我们是需要学会如何去学习。
用Echarts 可以画那么多种图,我不可能每个都作出一个小Demo给大家,而且大家的数据都不一样,也就抄不了作业吗,所以我们干脆聊聊如何去学会玩这种玩意。
看官方文档在我认为永远是了解它的最快方式。(也许大家会说为啥不是看各种博客,或者直接百度、Google)
原因有以下两点:
- 版本原因,你搜索到的博客使用的不一定是最新的版本,技术的迭代在现在真的是非常快的。
- 其次博客内容真的很少有像官方文档那种写的十分完备的,另外在写的过程中,大多数作者(包括我自己)更多的是会贴出自己认为十分核心的东西,对于一些非常细的东西,十分有可能会被忽略掉。
动手尝试
- 看完文档,不应该立即应用到现用的项目,最佳的方式应该是写上个demo,看看效果如何(个人想法)
- 纸上得来终觉浅,绝知此事要躬行。
完事了完事啦
「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表,得学学了,必须要会的基本操作了相关推荐
- 「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、 可用于更新数据到视图
夜晚有明月,梦里有佳人 前言 最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
- 「后端小伙伴来学前端了」Vue中为什么直接安装less-loader会报版本过高错误?你有没有思考过?
清晨的☀ 前言 我们都知道在 Vue 中并不只有纯正的CSS,还有less.sass等,后面这些,写起来都可以级联着,不需要像原生的css那样,会方便很多. 大家都知道我也是最近写的vue,看见周围人 ...
- 「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩 源码在文末. 前言 上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
- 「后端小伙伴来学前端了」Vue中全局事件总线(GlobalEventBus)原理及探究过程
前言 上一篇文章写了 Vue 中的自定义事件,自定义事件是全局事件总线基础.我在上一篇文章中埋下了一个小小的伏笔.如下图: 我说过,在Vue中如果我们用(@orv-on)给组件绑定上一个自定义事件,其 ...
- 「后端小伙伴来学前端了」Vue中利用全局事件总线改造 TodoList 案例
前言 上上篇写了:
- 「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮 你能照见南边,也能照见北边 照见她,你跟她说一声,就说我想她了. 前言 前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
- 「后端小伙伴来学前端了」Vue中Props配合自定义方法实现组件间的通信
校园的云 前言 废话: 上篇文章写了关于Vue 中的 props
- 「后端小伙伴来学前端了」Vue脚手架中 render 函数
前言 上一篇文章写了:「后端小伙伴来学前端了」分析Vue脚手架结构 简单说明了Vue的脚手架结构,但是上篇文章还欠了个小点没有说完,就在这篇文章中补齐.就是所谓的render函数. 一.main.js ...
- 「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器,实现气泡菜单,划词弹出菜单
冬日暖阳 前言 今天在写前端的时候,就是遇到一个问题.一开始我以为用textarea去掉角标,实现自动增长,然后就可以了.谁知道它还得加样式,加粗.斜体,老师在最开始给的设计稿上根本没有.直接麻掉. ...
最新文章
- Go基础--goroutine和channel
- 多线程(C++)临界区Critical Sections
- html判断是否在页面,html判断当前页面是否在iframe中的实例
- android zxing 自动对焦,ZXing自动对焦问题
- Redis持久化配置
- 【Spark篇】---Spark调优之代码调优,数据本地化调优,内存调优,SparkShuffle调优,Executor的堆外内存调优...
- nginx: [emerg] mkdir() /var/temp/nginx/client failed (2: No such file or directory)
- ASP.NET Aries JSAPI 文档说明:AR.DataGrid
- shell 编写脚本批量ping ip
- android广告平台哪个好用,最新!59个信息流广告平台数据榜单!
- h, w = img.shape什么意思?
- php xml 修改节点值,.NET_XML文件修改节点属性值(多种方法),xml 文件内容: 复制代码 代码如 - phpStudy...
- 韦诺之战——Wesnoth
- 埃及分数c语言实训报告,C语言实例 将真分数分解为埃及分数
- 找手机ic库存回收公司
- Vite:Error: Cannot find module ‘worker_threads‘
- android8虚拟键布局,Android 虚拟按键在不同版本上的位置问题
- 抖音小店入驻条件及费用最新版,2022抖音开店,商家入门指南
- eap方法 华为手机怎么连wifi_怎样为WLAN选择最佳的EAP?
- 1.1 input()函数--输入
热门文章
- 看好电影,学标准英语
- 进军B2B乏力?转转为何一直在原地打转?
- 社交电商助推3000万微商大军,全民皆微商的时代即将来临?
- java 句柄池_深入理解JVM之Java对象的创建、内存布局、访问定位详解
- java万法_Java内省机制和 BeanUtils实现
- java engine_java使用OGEngine开发2048
- 思科面试题c语言,C语言面试题~总汇(基础题、嵌入式、微软、华为、思科……).doc...
- Python中对象的引用与复制
- Python 输入输出
- Python教程:内置函数filter()和匿名函数lambda解析