江苏龙网

  1. 主页 > 生活百科 > >

最完整的Vue教程-从零开始编写可视化大屏

vue

摘 要

最完整的Vue教程-从零开始编写可视化大屏

文章插图
 
（OF作品展示）
OF之前介绍了用Python实现数据可视化、数据分析及一些小项目，但基本都是后端的知识 。想要做一个好看的可视化大屏，我们还要学一些前端的知识（vue），网上有很多比较复杂（需要执行各种各样的命令）还不完整的教程，今天OF将完整地讲解如何用vue做一张好看的可视化大屏 。只要大家按照步骤操作下来，你也能实现自己的可视化项目 。
主要内容：Vue编写可视化大屏
适用人群：Python初学者，前端/Vue初学者
准备软件：pycharm
  1. 安装准备
在编写大屏前，我们需要先安装2个内容：vue插件和node.js 。
在pycharm内安装vue插件；（用pycharm安装vue非常简单，不需要一堆命令）
1.1 打开pycharm，点击文件-设置-插件，在搜索栏中搜索“vue”，点击install 。等待安装完成就可以了 。
最完整的Vue教程-从零开始编写可视化大屏

文章插图
 
安装node.js是为了使用npm指令的，下载地址：https://nodejs.org/en/
1.2 下载后按默认安装即可（安装路径可自行修改） 。
初识VUE准备工作完成后，我们可以开始创建VUE项目 。
2.1 点击文件-新建项目，在弹出的窗口中选择vue.js，然后在Location栏修改路径地址，点击右下角“creat”
最完整的Vue教程-从零开始编写可视化大屏

文章插图
 
2.2 我们可以看到刚创建好的vue项目，目录是空白的，在pycharm的Terminal窗口下执行npm init，才能生成package.json文件，这步很重要 。（注：若执行时报权限错误，我们就先删除npmrc文件（C:Users{账户}下的.npmrc文件））
最完整的Vue教程-从零开始编写可视化大屏

文章插图
 

最完整的Vue教程-从零开始编写可视化大屏

文章插图
 
2.3 初始化一个完整版的项目：在pycharm的Terminal窗口下执行vue init webpack myscreen命令，然后可以参考如下的一步步选择和输入，等待自动安装 。
最完整的Vue教程-从零开始编写可视化大屏

文章插图
 
2.4 安装成功：出现以下内容，就是安装成功了 。
最完整的Vue教程-从零开始编写可视化大屏

文章插图
 
我们来说明下这个目录各文件夹/文件的作用，我们主要用的是src文件夹下的内容 。
最完整的Vue教程-从零开始编写可视化大屏

文章插图
 
Typescript在vue中编写代码的方式和html比较类似，总体上就是3部分：
1）template：与HTML中的body一样编写需要展现的内容；
2）script：HTML常用JAVAscript，；
3）style：与HTML中的style基本是一样的 。
编写图表前，为了便于初学者理解，我们用Typescript对script部分的属性进行简要说明 。
TypeScript 程序由以下几个部分组成：模块（两个模块之间的关系是通过使用 import和export 建立的）、函数、变量、语句和表达式、注释 。
<script>var [变量名] = 值//变量export default{//模块name:'Percentage',props:{},//props是子组件访问父组件数据的唯一接口data(){return {}},//存储数据的函数mounted(){},//钩子函数，html加载完成后执行,执行顺序：子组件-父组件computed:{},//计算属性，也就是依赖其它的属性计算所得出最后的值watch:{},//监听属性，监听一个值的变化，然后执行相对应的函数methods:{},//事件方法执行}</script>注：有引入sass样式的，需要在terminal中执行以下命令（安装低一些的版本），否则运行不会成功 。
npm install sass-loader@7.3.1 --save-devnpm install node-sass@4.14.1 --save-dev可视化实现【最完整的Vue教程-从零开始编写可视化大屏】通过以上3部分的准备工作，我们可以正式进入图表内容的编写，Vue强大的地方莫过于component组件应用的便利性 。
4.1 OF以圆环图为例，图表要用的地方比较多，所以先新建了一个charts的文件夹，来存放各种图表的vue文件，然后在charts文件夹中新建一个Vue Component文件，如下图：
最完整的Vue教程-从零开始编写可视化大屏

文章插图
 
4.2 编写圆环图的初始化代码，此次我们做3张圆环图，那么我们的这个Percentage.vue就是父组件 。
<template><div class="percentage"> </div></template><script>export default {name:'Percentage',props:{containerId:String,option:{}},data(){return {option1:{color:'#516c72',series: [{type: 'gauge',startAngle: 90,endAngle: -270,pointer: {show: false},progress: {show: true,overlap: false,roundCap: true,clip: false,},axisLine: {lineStyle: {color: [[1, '#464646']],width: 10,}},splitLine: {show: false,distance: 0,length: 10},axisTick: {show: false},axisLabel: {show: false,distance: 50,backgroundColor:'red'},data: [{value: 20,detail: {offsetCenter: ['0%', '0%']}},],title: {fontSize: 14},detail: {width: 50,height: 14,fontSize: 14,color: 'auto',formatter: '{value}%'}}]},}},methods:{initChart(newOption){if(newOption.series){this.option1.series[0].data[0].value = https://www.isolves.com/it/cxkf/bk/2021-12-27/newOption.series[0].data[0].value ;this.option1.series[0].detail.formatter = newOption.series[0].detail.formatter;if(newOption.color){this.option1.color = newOption.color}}let myChart = this.$echarts.init(document.getElementById(this.containerId));//console.log('this.option1',this.option1)myChart.setOption(this.option1);},}}


推荐阅读


上一篇：架构师才需要知道的知识：如何做容量预估和调优

下一篇：ACDSee 最好用的版本