VUE+ECHARTS结合使用制作一个图标页面

最近比较跳跃，mybatis 想看但是实在没有实际案例看着看着就睡着了。做了点前端的东西，在已经写好一个项目中新增一个展示界面。我去做的是前段，负责将数据给显示出来。

首先介绍一下这个前端是一年内的某个老哥写的，已跑路，所以才需要我去写一下。不过还好是在原来已经有的基础上进行的模仿书写，而且相对而言还少些了一些功能，不需要点进去给他展示具体信息，看表就完事了。

接下来介绍一下写的过程。首先是需要学习一下vue的使用，以前没有写vue，直接html找个模板用ajax 传值就完事了。这次需要自己利用vue进行书写，首先是去学习了一波vue，学习的结果是似懂非懂，感觉和以前写的区别不是很大，就是先设计然后再填充值，不过这个设计的template的代码量的感觉是减少的很明显，少了很多层次的代码。其次在最后还会有一个style，定义了一些风格类型。这部分由于我是直接粘贴别人的然后稍加改动，所以写法方法没有太多了了解。于是vue的基础学习差不多就到这儿了。

学完这些，这次页面就是需要去书写script部分了，这部分是灵魂，因为图没有数据等于白做，数据要在这里处理，这里自己犯了第一个的错误，困扰了自己一整天。这个问题是因为自己一段段代码粘贴，其中有一个层级粘贴错了。粘贴错的函数是 vue的mount和其下一个函数，都放在了init函数下面，导致在mount中调用init始终无法成功，最终是自己一行行对照代码解决的（当时自己还不知道vscode 缩放的功能由于实在有点小，也是用的不多导致了这个事情的发生）解决了这个问题后界面终于有点东西了。

写到这里好像忘记了说如何成功访问到页面的，因为vue的路由方式发生了改变，以往的静态文件写了就可以访问到，但是在vue中不行，必须要添加路由才可以访问。路由添加也分两部分，先自己手写，然后写道函数里面，不过这样也挺好，可以很好的调整页面，并且路由是分级的，公共级别的组件，路由的等级高一些就可以一直悬浮，这点可针不戳。

接下来就是要画图了，这里我们借用了echarts来画这个二维图，由于上一位老铁已经打包了echarts所以俺也不需要引入echarts了，直接去echarts 去查看样式然后画图，echarts的使用有点很重要，不要拘泥于他给的格式，我也是在使用中并且百度搜索才发现的，可以在一个图画多个元素，只需要在上面利用{}去新增即可，本次画图的基本是一个坐标系，如果是饼图还没怎么看，柱状图上想要的元素都可以考虑添加，如果元素同名，则使用{}往下加，如果是新的，那就直接放上去就可以渲染出来！好用哦。

图就按照上面的道理进行组合绘制完成，接下来就是传入数据，利用axios传值，这个应该比较简单吧，利用post/get方法请求端口即可。这个需要注意的是将值传入表中需要注意的地方，首先是数组的初始化，向每个表中传入数据都属需要重新初始化的，如果有公用的元素，例如月份这个值，每一个向表中传数据需要您单独传一次。注意到这基本就完成了整个图表的一系列操作。这里需要最后一步，就是将该页面添加到目录中。

这里遇到了很难受的事儿，因为上一位老哥是用的svg绘图，已经弄了很多的图标了，在网上查找，使用svg需要导入多个文件，其中有几个是浏览器才可以解析的字节码文件，无法查看自然无法生产后贴入，因为害怕影响到以前的东西。没办法，自己只能去弄了两个vue自带的图标，如果谁知道怎么在已经有了svg中加可以在下方评论哦。

到这里全过程完成。

VUE+ECHARTS结合使用制作一个图标页面相关推荐

使用element UI 快速制作一个列表页面
使用element制作一个列表页面,并且当点击"查看调查问卷"时弹出弹框. (图一) (图二) (图三) 1. 制作一个名叫DataListTable <DataListTa ...
制作一个状态栏中跑马灯效果_图标设计指南(3)——制作一个图标集所需全部信息（中）...
本文翻译自图标设计专家Justas Galaburda写的图标设计指南.本文主要介绍制作一个图标集所需全部信息(中).翻看同系列文章,直接到文章最底部. 制作一个图标集所需全部信息上次我们介绍了我将 ...
使用html和css制作一个小米商城页面
使用html和css制作一个小米商城页面创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 10/01 14:32 * / `<html>&l ...
Vue.js项目：制作一个Markdown格式的笔记本(上)
Markdown笔记本 1. 制作一个基本的笔记编辑器 1.1 项目准备 index.html 文件:笔记本的整体框架 script.js 文件:添加一些js 代码继续在script.js文件中添加 ...
Bootstrap JQuery 制作一个登录页面
使用Bootstrap和 JQuery 制作一个简单登录页面: 链接:https://pan.baidu.com/s/1wJyL1rdVST0cVPfcbuIQlw 提取码:6666 1. 实现图片的 ...
用HTML5制作一个太极页面
今天用Html制作一个会旋转的太极页面我是一个萌新,有众多不足的地方请大佬多多指教,不喜勿喷制作后的效果(有改动,手机也可以打开) https://survivor15.github.io/bag ...
制作一个amp页面-谷歌移动加速器AMP网页制作方法
这篇博客将给大家带来一系列技术性的东西,大家看好了哦,本篇给大家说点什么呢-amp,这个东西是谷歌搞出的针对移动优化的,和百度mip是一样的东西,关于哪家的好呢,这个还真不好评说,海豚的建议是amp和 ...
Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template
pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言想必你一定使用过易企秀或百度H5等微场景生成工具 ...
vue+echarts+3D地图制作大屏
基于3d地图做的一些效果,首先看下效果图准备工作:下载echarts 和3d地图需要用到的依赖包,版本随意就行下载依赖之后,在页面引入,引入网上下载的地图json文 ...

VUE+ECHARTS结合使用制作一个图标页面

VUE+ECHARTS结合使用制作一个图标页面相关推荐

最新文章

热门文章