精华内容
下载资源
问答
  • 2020-06-27 10:05:49

    1. echarts

    官网:https://echarts.apache.org/zh/index.html

    1.1 安装

    npm install echarts --save

    1.2 使用

    打开main.js文件,里面写入以下代码:

    // 全局引入
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
    
    // 按需引入
    var echarts = require('echarts/lib/echarts');  // 引入 ECharts 主模块
    require('echarts/lib/chart/bar');  // 引入柱状图
    require('echarts/lib/component/tooltip');  // 引入提示框
    require('echarts/lib/component/title');  // 引入标题组件
    Vue.prototype.$echarts = echarts

    1.3 接口配置设置

    https://echarts.apache.org/zh/option.html#title 

    2. v-charts

    官网:https://v-charts.js.org/#/

    v-charts是基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,使用起来更方便,功能没有echarts那么丰富,由饿了么团队开发。

    3. DataV

    官网:http://datav.jiaminghi.com/

    3.1 安装

    npm install @jiaminghi/data-view

     3.2 使用

    打开main.js文件,里面写入以下代码:

    // 方式1:将自动注册所有组件为全局组件
    import dataV from '@jiaminghi/data-view'
    Vue.use(dataV)
    
    // 方式2:按需引用
    import { borderBox1 } from '@jiaminghi/data-view'
    Vue.use(borderBox1)

    4. datavjs

    官网:https://github.com/TBEDP/datavjs

    demos有点丑。

    参考

    1. GitDataV:https://github.com/HongqingCao/GitDataV
    2. iDataV:https://github.com/yyhsong/iDataV
    更多相关内容
  • vue.js可视化开发工具_Vue.js开发工具

    千次阅读 2020-08-25 03:21:58
    vue.js可视化开发工具Install on Chrome 在Chrome上安装 Install on Firefox 在Firefox上安装 Install the standalone app 安装独立应用 How to use the Developer Tools 如何使用开发人员工具 Filter components...

    vue.js可视化开发工具



    When you’re first experimenting with Vue, if you open the Browser Developer Tools you will find this message: “Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools

    首次尝试使用Vue时,如果打开浏览器开发人员工具,则会发现以下消息:“ 下载Vue Devtools扩展以获得更好的开发体验: https : //github.com/vuejs/vue-devtools

    Hint to install the Vue devtools

    This is a friendly reminder to install the Vue Devtools Extension. What’s that? Any popular framework has its own devtools extension, which generally adds a new panel to the browser developer tools that is much more specialized than the ones that the browser ships by default. In this case, the panel will let us inspect our Vue application and interact with it.

    这是安装Vue Devtools Extension的友好提示。 那是什么? 任何流行的框架都有其自己的devtools扩展,通常会为浏览器开发人员工具添加一个新面板,该面板比浏览器默认提供的工具更加专业。 在这种情况下,面板将使我们检查Vue应用程序并与其进行交互。

    This tool will be an amazing help when building Vue apps. The developer tools can only inspect a Vue application when it’s in development mode. This makes sure no one can use them to interact with your production app (and will make Vue more performant because it does not have to care about the devtools)

    在构建Vue应用程序时,此工具将为您提供惊人的帮助。 开发人员工具只能在处于开发模式时检查Vue应用程序。 这样可以确保没有人可以使用它们来与您的生产应用程序进行交互(并且可以使Vue的性能更高,因为它不必关心devtools)

    Let’s install it!

    让我们安装它!

    There are 3 ways to install the Vue Dev Tools:

    有3种安装Vue Dev Tools的方法:

    • on Chrome

      在Chrome上
    • on Firefox

      在Firefox上
    • as a standalone application

      作为独立的应用程序

    Safari, Edge and other browsers are not supported with a custom extension, but using the standalone application you can debug a Vue.js app running in any browser.

    自定义扩展不支持Safari,Edge和其他浏览器,但是使用独立应用程序,您可以调试在任何浏览器中运行的Vue.js应用程序。

    在Chrome上安装 (Install on Chrome)

    Go to this page on the Google Chrome Store: https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd and click Add to Chrome.

    转到Google Chrome商店中的以下页面: https : //chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd ,然后点击添加至Chrome

    Add to chrome

    Go through the installation process:

    完成安装过程:

    Add extension

    The Vue.js devtools icon shows up in the toolbar. If the page does not have a Vue.js instance running, it’s grayed out.

    Vue.js devtools图标显示在工具栏中。 如果页面没有正在运行的Vue.js实例,则该页面显示为灰色。

    Vue DevTools installed

    If Vue.js is detected, the icon has the Vue logo colors.

    如果检测到Vue.js,则图标具有Vue徽标颜色。

    Icon colored

    The icon does nothing except showing us that there is a Vue.js instance. To use the devtools, we must open the Developer Tools panel, using “View → Developer → Developer Tools”, or Cmd-Alt-i

    图标什么也不做,除了向我们展示, 一个Vue.js实例。 要使用devtools,我们必须使用“视图→开发人员→开发人员工具”或Cmd-Alt-i打开“开发人员工具”面板

    DevTools window

    在Firefox上安装 (Install on Firefox)

    You can find the Firefox dev tools extension in the Mozilla addons store: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

    您可以在Mozilla插件商店中找到Firefox开发工具扩展: https : //addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

    Firefox addons store

    Click “Add to Firefox” and the extension will be installed. As with Chrome, a grayed icon shows up in the toolbar

    单击“ 添加到Firefox ”,将安装扩展名。 与Chrome一样,工具栏中也会显示灰色图标

    Firefox addon installed

    And when you visit a site that has a Vue instance running, it will become green, and when we open the Dev Tools we will see a “Vue” panel:

    当您访问正在运行Vue实例的站点时,该站点将变为绿色,并且当我们打开开发工具时,我们将看到一个“ Vue ”面板:

    Vue devtools in Firefox

    安装独立应用 (Install the standalone app)

    Alternatively, you can use the DevTools standalone app.

    或者,您可以使用DevTools独立应用程序。

    Install it using

    使用安装

    npm install -g @vue/devtools
    
    //or
    
    yarn global add @vue/devtools

    and run it by calling

    并通过调用来运行它

    vue-devtools

    This will open the standalone Electron-based application.

    这将打开独立的基于电子的应用程序。

    Standalone Vue devtools

    now, paste the script tag it shows you:

    现在,粘贴显示给您的脚本标签:

    <script src="http://localhost:8098"></script>

    inside the project index.html file, and wait for the app to be reloaded, and it will automatically connect to the app:

    在项目index.html文件中,然后等待应用程序重新加载,它将自动连接到应用程序:

    Standalone Vue devtools connected

    如何使用开发人员工具 (How to use the Developer Tools)

    As mentioned, the Vue DevTools can be activated by opening the Developer Tools in the browser and moving to the Vue panel.

    如前所述,可以通过在浏览器中打开开发人员工具并移至Vue面板来激活Vue DevTools。

    Another option is to right-click on any element in the page, and choose “Inspect Vue component”:

    另一个选项是右键单击页面中的任何元素,然后选择“检查Vue组件”:

    Inspect vue component

    When the Vue DevTools panel is open, we can navigate the components tree. When we choose a component from the list on the left, the right panel shows the props and data it holds:

    打开Vue DevTools面板后,我们可以导航组件树。 当我们从左侧的列表中选择一个组件时,右侧面板将显示其拥有的道具和数据:

    Navigate the components tree

    On the top there are 4 buttons:

    顶部有4个按钮:

    • Components (the current panel), which lists all the component instances running in the current page. Vue can have multiple instances running at the same time, for example it might manage your shopping cart widget and the slideshow, with separate, lightweight apps.

      组件 (当前面板),其中列出了当前页面中运行的所有组件实例。 Vue可以同时运行多个实例,例如,它可以使用单独的轻量级应用程序管理购物车小部件和幻灯片。

    • Vuex is where you can inspect the state managed through Vuex.

      在Vuex中,您可以检查通过Vuex管理的状态。

    • Events shows all the events emitted

      事件显示所有发出的事件

    • Refresh reloads the devtools panel

      刷新以重新加载devtools面板

    Notice the small = $vm0 text beside a component? It’s a handy way to inspect a component using the Console. Pressing the “esc” key shows up the console in the bottom of the devtools, and you can type $vm0 to access the Vue component:

    注意组件旁边的小= $vm0文本吗? 这是使用控制台检查组件的便捷方法。 按下“ esc”键将在devtools底部显示控制台,您可以键入$vm0来访问Vue组件:

    Component Console Shortcut

    This is very cool to inspect and interact with components without having to assign them to a global variable in the code.

    检查组件并与之交互非常酷,而不必将它们分配给代码中的全局变量。

    过滤组件 (Filter components)

    Start typing a component name, and the components tree will filter out the ones that don’t match.

    开始输入组件名称,组件树将过滤出不匹配的组件。

    Filter components

    在页面中选择组件 (Select component in the page)

    Click the

    点击

    Select component in the page

    button and you can hover any component in the page with the mouse, click it, and it will be opened in the devtools.

    按钮,您可以用鼠标悬停页面中的任何组件,单击它,它将在devtools中打开。

    格式化组件名称 (Format components names)

    You can choose to show components in camelCase or use dashes.

    您可以选择在camelCase中显示组件或使用破折号。

    筛选检查的数据 (Filter inspected data)

    On the right panel, you can type any word to filter the properties that don’t match it.

    在右侧面板上,您可以输入任何单词以过滤不匹配的属性。

    检查DOM (Inspect DOM)

    Click the Inspect DOM button to be brought to the DevTools Elements inspector, with the DOM element generated by the component:

    单击“检查DOM”按钮,将其带到DevTools Elements检查器中,该DOM元素由组件生成:

    Inspect DOM

    在编辑器中打开 (Open in editor)

    Any user component (not framework-level components) has a button that opens it in your default editor. Very handy.

    任何用户组件(不是框架级组件)都有一个按钮,可以在默认编辑器中将其打开。 非常便利。

    翻译自: https://flaviocopes.com/vue-devtools/

    vue.js可视化开发工具

    展开全文
  • 页面布局在拿到设计图后,通常会先通过设计图的布局来思考代码的设计,这也是开始着手写代码前必须要进行的一步,在项目中,我曾遇到,在一张大屏图开发到一半的时候介入,和另一个前端一起进行开发,结...

    页面布局

    在拿到设计图后,通常会先通过设计图的布局来思考代码的设计,这也是开始着手写代码前必须要进行的一步,在项目中,我曾遇到,在一张大屏图开发到一半的时候介入,和另一个前端一起进行开发,结果由于她将整张图上的所有图表都放到一个vue文件里面,结果导致整个页面的代码数量级达到上千行,并且介入合作后,由于两人在一个文件里面进行开发,常常会导致提交代码时要合并冲突,经过这个教训后,在二期进行重构时,第一步就是对整个页面进行拆分,这样不仅能更好的分工合作,而且也利于后期代码的维护。(其实大多数开发人员都会这样做,写出来只是给自己提个醒)

     1.划分页面 通常情况下,大屏图都是由一个一个的图表组成的,并且在考虑美观的情况下,UI设计师会把图设计成方方正正的模块,这里列举两个布局: 

     

    图1可划分为左中右,图2可划分为上中下,划分完之后,在根据具体的设计图再划分成更小的模块。

    2.模块化开发

    在划分完页面之后,对于具体的模块,应将其列成一个单独的vue页面来进行开发,然后将所有的模块都以组件的形式引入到index页面,形成最终的大屏页面。 

    屏幕适配

    1.使用flexible

    对于PC端的屏幕适配,网上有很多解决方案,这里不展开赘述,感兴趣者可自行百度。我所采用的方式是阿里的flexible.js。具体方案如下

    • 在本地以js文件的方式引入到大屏页面(在这里并未采用全局安装的方式,原因是在项目中,大屏页面仅是其中一部分,其他页面并不需要适配,因此,并未采用在main.js中引用的方式,同样,也不采用全局px转rem的方式,而是在引入页面单独使用rem)

    • 打开flexible.js文件,设置1rem所对应的px数量,以设计稿1920px为例,将其等分成24等份,那么1rem = 80px

    • 由于上述原因,需在大屏页面中,手动将用到的px以80px = 1rem的换算形式换算成rem,为避免每次都需手动计算rem的弊端,如果使用vs code进行开发时,推荐使用px2rem插件

    在应用商店下载后,打开vs code的设置,搜索rootFontSize,将数值改成px转换成rem的数值(以上述为例,flexible.js中80px = 1rem,那么rootFontSize应设置成80),保存后重启,打开大屏页面,在中输入px会自动显示出经过换算后的rem 

    echarts使用

    1.vue引入echarts

    • 安装echarts依赖

    npm install echarts -S

    • 引入echarts 1. 全局引入

    // main.js
     import echarts from 'echarts'
     Vue.prototype.$echarts = echarts
    复制代码
    // echarts.vue
    <template>
      ...
      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
      ...
    </template>
    <script>
       ...
      methods:{
          drawEcharts(){
             let myChart = this.$echarts.init(document.getElementById('myChart'))
              ...
          }
     }
    ...
    </script>
    
    
    

    2.页面中引入

    // echarts.vue<template>  ...  <div id="myChart" :style="{width: '300px', height: '300px'}"></div>  ...</template><script> import echarts from 'echarts'   ...  methods:{      drawEcharts(){         let myChart = echarts.init(document.getElementById('myChart'))          ...      } }...</script>
    

    注意:echarts的实例化对象需在mounted中实现,原因是要确保dom元素已经挂载到页面中

    2.echarts使用

    echarts的使用可到官网去查看相关参数,还可到echarts社区去查看相关示例,另外,推荐一下dataV,在这上面可以选一些好看的边框和图表,但是需要注意的是,dataV在低版本浏览器和IE上面并不兼容,在此次项目中又刚好需要兼容IE,因此,我采用的解决方案是:1.安装babel-polyfill npm install --save-dev babel-polyfill 2.引入babel-polyfill

    //main.jsimport 'babel-polyfill'
    
    • vue-cli版本为2

    //webpack.base.conf.js....{  test: /\.js$/,  loader: 'babel-loader',  include: [resolve('node_modules/@jiaminghi/data-view')]},...
    
    • vue-cli版本为3或以上

    //vue.config.js...transpileDependencies: [/[/\\]node_modules[/\\][@\\]jiaminghi[/\\]data-view[/\\]/]...
    

    总结

    大屏可视化是我们在实际项目中经常会遇到的需求,但在做的时候,又需要花费很多心思,本文也仅是介绍一种设配方案,要真的完成一个可视化界面,还是得多花点心思,关注css细节,尽量还原设计图。

    转自:https://juejin.cn/post/6940790455701356552

    3个 Vue 可视化大屏案例展示(vue 2.0 & echarts)

    以下是可视化大屏案例展示,如果你需要此案例源码,请关注“前端达人”公众号,回复“vue大屏”获取

    展开全文
  • Echarts实现可视化世界地图模拟迁徙,以我自己开发过程。 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器。 let myChart = ...
  • vue可视化工具用法

    2021-12-01 13:38:37
    vue 可视化

    首先,window+r 打开dos命令,输入 cmd
    全局安装最新的Vue CLI

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    

    你可以使用-V来查看一下刚刚安装的版本:

    vue -V
    # 应该会输出下面的结果
    3.0.0-rc.3
    

    在dos命令下,输入以下代码,打开vue ui可视化面板

    vue ui
    

    该命令会自动打开你的浏览器,你要确保当前目录下没有其他项目,浏览器展示的页面如下:
    在这里插入图片描述
    打开可视化面板后,创建项目(根据自己需求选择配置项)。
    在这里插入图片描述
    项目创建好后,添加相关插件及依赖
    1.添加插件 plungin-element
    2.添加运行依赖 axios
    3.添加开发依赖 sass、node-sass、sass-loader
    4.清空无用代码
    5.新建组件,css文件
    6.在main.js中引入全局css文件

     import './assets/css/global.css'
    

    7.在router文件夹中index.js中引入各组件,并写好路由
    /导入login组件/

    import Login from '../components/login.vue'
    

    配置路由:

    const routes = [
      { path:'/',redirect:'/login',component:Login},
      { path:'/login',component: Login}
     ]
    
    

    安装指定版本的依赖方法:

    npm install node-sass@latest
    
    npm install node-sass@4.13.1 --save
    npm install sass-loader@7.3.1 --save
    

    注意在sytle中 lang=“scss”,而不是lang=“sass”,否则会报错,因为我们在样式表里写的是scss语法,而不是sass语法

    Can’t find Python executable “python”, you can set the PYTHON env variable.
    错误原因:Node.js 在安装模块的时候报错,缺少python环境,因此需要安装python

    执行如下命令:

    npm install --python=python2.7
    npm config set python python2.7 
    
    展开全文
  • 网上有很多比较复杂(需要执行各种各样的命令)还不完整的教程,今天OF将完整地讲解如何用vue做一张好看的可视化大屏。只要大家按照步骤操作下来,你也能实现自己的可视化项目。
  • 项目地址:Vue3 可视化大屏展示 界面展示(这个是动态的后面会换成 gif 图): 一、项目描述 这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " 数据大屏项目 ",使用 ‘.vue’ 和 ‘.tsx’ 文件实现界面...
  • 目前我要完成的项目是一个智慧海洋牧场平台,前期学习了Flask+mysql+echarts的可视化展示,现在需要学习cesium和vue搭建三维交互平台,之前用的都是原生js,甚至连jquery也没有学,唯一用的就是ajax,给各位看看所要...
  • vjdesign - vue 界面可视化设计器

    千次阅读 2020-12-25 16:27:27
    开发vue可视化设计器已经可以投入生产了 说明文档 示例
  • vue可视化组件

    千次阅读 2019-03-20 16:30:19
    vue开发可视化组件,包含柱状图组件,圆形进度条组件: 使用方式: NPM下载安装vue-charts-jf npm install vue-charts-jf --save import vueChart from 'vue-charts-jf' Vue.use(vueChart); ...
  • 最近有用到bi可视化系统的开发 所以自己开发了一个 具体效果如下 文档地址 主要使用的插件有 vuedraggable. antv/l7 等 其中拖拽代码可视如下 <template> <div class="screen_loading" v-if="data....
  • Vue3可视化表单生成器

    千次阅读 2022-01-07 11:07:36
    vains-form-designer 介绍 Vite + TypeScript + Vue3 + Element-plus制作的可视化表单生成器; 预览地址 项目所需依赖 注意:项目中需先添加ElementPlus与ElementIcon的依赖 快速开始
  • vue可视化视图插件
  • 可视化拖拽页面编辑器 一__Vue.js

    千次阅读 2021-03-22 17:19:28
    主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-...
  • 3分钟搞懂Vue整合Echarts实现可视化界面

    千次阅读 多人点赞 2022-04-23 06:25:43
    三、Echarts的优点 四、Vue 整合Echarts ➿下载Echarts依赖 ♻️Vue引入Echarts ✳️测试使用Echarts 五、效果图 ⛵小结 一、什么是可视化可视化就是可以通过视觉进行传达的。 再专业一点就可以解释为可视化...
  • 基于vue实现的世界地图下钻 演示地址 axios引用文件目录 要想用axios引用文件,则应该把文件放入到public文件夹上,public...import * as echarts from 'echarts' //你可能会在很多组件里用到数据/实用工具,但是不
  • vue中实现ehart图表交互和图表展示 简介 该模块也是平时工作中所负责的一个模块,目的是为了能够快速生成图表。 在实际工作中的项目这是个主要为了绘制大屏所使用,在这里我选择抽了部分的功能与大家一起...
  • 暂定设计思路 笔者暂定的项目开发技术栈为VUE3+Element 实现前端表单表格开发 后端为java 通过Nginx 反向代理完成接口转发 前端拖拉拽暂定通过vuedraggable实现 VUE文件生成暂定通过
  • 初试vue写echarts可视化布局项目初始化创建全局样式表并导入iconfont字体文件全局挂载echarts对象初始化ScreenPage主体视图页面和各个组件配置路由主屏幕的布局分析期望最终效果图修改全局样式global.less页面布局...
  • 前提:先要安装node.js以及vue cli Vue UI:Vue开发者必不可少的工具 - Fundebug - 博客园译者按: Vue开发工具越来越好用了! 原文: "Vue UI: A First Look" 译者: "Fundebug" 本文采用意译...打开可视化创建vue项目
  • 基于vue+echarts 数据可视化大屏展示[附源码]

    万次阅读 多人点赞 2020-01-02 22:54:40
    访问 获取源码 精准模板教程~
  • vue数据可视化界面,智慧图表。Echarts,以及git

    千次阅读 多人点赞 2021-05-11 19:19:31
    script> body> html> 1.2Echarts(用的更多一些) 官网地址 https://echarts.apache.org/zh/index.html 概念 一个基于 JavaScript 的开源可视化图表库 下载方式 一、通过CDN jsdelivr.com/package/npm/echarts 二、...
  • AntV F2是蚂蚁金服旗下的一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(Node, 小程序,Weex),完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的...
  • ThreeJS-前端3D可视化开发入门-vue

    千次阅读 2020-11-26 11:11:44
    创建vue项目(略) 执行如下命令:安装threejs相关模块 npm install three npm install three-css2drender npm install three-obj-mtl-loader npm install three-orbit-controls package.json 如下 { "name": ...
  • vue 实现echarts 可视化,定制主题与通用写法【基础版】一
  • FormMaking v3 是基于 Vue 3.x 和 Element Plus 开发可视化/低代码表单设计器,可以生成 Element 和 Antd 样式的表单。 FormMaking 目前已被民航、政务、教育、医疗、测绘、金融、网络安全、智慧城市等不同领域...
  • 记录项目开发过程中要求实现数字画像功能的相关部分 1.安装Echarts 在vue项目管理器中搜索依赖echarts并安装 或者使用npm进行安装。在项目文件目录中打开命令行,输入以下代码就可以安装Echart: npm install ...
  • 本文介绍的是怎样从零开始创建一个vue的项目,这个过程非常简单,如果不把安装软件所需的等待算进去的话,其实不用半个小时就可以创建出一个简单的数据可视化项目。简单来说,只需要下边这几个步骤: 创建vue项目...
  • electron实现数据可视化  这里我们主要介绍elctron-vue结合highcharts实现数据可视化,在这里给贴出传送门highcharts在github中的地址 npm下载 在这里插入代码片

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,728
精华内容 1,891
关键字:

vue from 可视化开发

友情链接: code.zip