vue
文章平均质量分 57
石页的橙橙
这个作者很懒,什么都没留下…
展开
-
vue大屏监控
vue 实现大屏监控样式如下所示:vue大屏监控主要包括以下一些内容:本次大屏监控页面包括三张图:两张柱状图、一张折线图页面美化:引入DataV组件,用于大屏监控页面增加边框、装饰等注意父子组件之间的彼此通信方法以下代码顺序为:./components/下两个柱状图和一张折线图的代码;最后是screenMonitor父组件应用前述子组件代码<template> <div ref="BarChart" style="height: 250%; width: 100%"原创 2021-10-25 11:28:45 · 2850 阅读 · 0 评论 -
vue 实现渐变折线图
vue实现渐变折线图实现结果示例:共定义两个文件一个是lineChart.vue及index.vue,前者用于定义折线图,后者在前者基础上丰富组件和功能首先是lineChart.vue文件:<template> <div ref="LineChart" style="height: 600px; width: 100%"/></template><script>import echarts from 'echarts'export d原创 2021-10-19 14:19:15 · 696 阅读 · 1 评论 -
vue 实现立体柱状图
vue实现立体柱状图样式如下图所示:可以将立体柱状图看做由yData+底+顶构成,对应代码如下:<template> <div ref="BarChart" style="height: 1000px; width: 100%"/></template><script>import echarts from 'echarts'export default { data() { return { chart: nu原创 2021-10-18 14:37:23 · 2187 阅读 · 3 评论 -
Vue 实现排名及单元格多数据展示
Vue 实现排名及单元格多数据展示本次需求为:在上篇自己搭建的vue环境下,将数据进行排名展示,且各个单元格含有多个数据文本前端代码如下:<template> <el-tabs type="border-card"> <el-tab-pane label="播放数据详情"> <el-select v-model="time" placeholder="请选择时间" style="width:200px;margin: 20p原创 2021-10-14 15:40:32 · 4250 阅读 · 0 评论 -
IDEA2021版创建Vue项目
IDEA2021版创建Vue项目1. 安装node.js2. 安装vue-cli3. vue初始化项目4. 使用IDEA打开vue项目1. 安装node.js可以通过node -v查看版本号,如果出现如下所示,则表示已安装;否则,安装node.js2. 安装vue-clicmd命令行执行全局安装命令:npm install -g vue-cli安装完成后,cmd输入vue -V查看版本号以判断是否安装成功3. vue初始化项目cmd输入初始化命令:vue init webpack 你原创 2021-09-27 14:38:11 · 2076 阅读 · 0 评论