一. ElementUI
1. ElementUI的介绍
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。
特性：
一致性 Consistency
- **与现实生活一致：**与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
- **在界面中一致：**所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈 Feedback
- **控制反馈：**通过界面样式和交互动效让用户可以清晰的感知自己的操作；
- **页面反馈：**操作后，通过页面元素的变化清晰地展现当前状态。
效率 Efficiency
- **简化流程：**设计简洁直观的操作流程；
- **清晰明确：**语言表达清晰且表意明确，让用户快速理解进而作出决策；
- **帮助用户识别：**界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
可控 Controllability
- **用户决策：**根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
- **结果可控：**用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
2. ElementUI的安装
在项目根目录下执行以下命令:
npm i element-ui -S
3. ElementUI的引入
在 main.js中写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
4. ElementUI的使用
不需要在script标签中引入其它,直接使用ElementUI的标签即可
<div class="box">
<el-button>默认按钮</el-button>
</div>
二. ECharts
1. ECharts的介绍
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 [1]
2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1月28日，ECharts 5线上发布会举行。 [1]
2. ECharts的安装
在项目根目录下执行以下命令:
npm install echarts
3. ECharts的引入
在script标签中写入以下内容：
import * as echarts from 'echarts';
4. ECharts的使用
在template 标签中定义一个div
<template>
<div class="main">
</div>
</template>
在script标签下的methods中定义一个方法showChart()
methods: {
showChart(){
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
option && myChart.setOption(option);
}
}
在script标签下的mounted中调用这个方法showChart()
mounted() {
this.showChart();
}
三. DataV
DataV 是阿里云出品的拖拽式可视化工具，专精于业务数据与地理信息融合的大数据可视化。
1. DataV介绍
组件库基于Vue （React版 (opens new window)） ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用。
1.1 边框
带有不同边框的容器
1.2 装饰
用来点缀页面效果，增加视觉效果
1.3 图表
图表组件基于Charts (opens new window)封装，轻量，易用
1.4 其他
飞线图/水位图/轮播表/…
2. 创建Vue项目
组件库依赖vue，要想使用它，创建一个Vue项目当然是必须的，如果已有Vue项目或使用UMD版开发可跳过此步骤。
2.1 安装Vue/Cli
- npm安装
npm i -g @vue/cli
- yarn安装
yarn global add @vue/cli
2.2 创建Vue项目
vue create datav-project
3. DataV安装
3.1 切换到前端Vue项目
cd datav-project
3.2 在Vue项目下进行组件库安装
- npm安装
npm install @jiaminghi/data-view
- yarn安装
yarn add @jiaminghi/data-view
4. DataV引入
4.1 在main.js文件中将下面内容输入进去
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
4.2 演示
5. DataV使用
不需要在script标签中引入其它,直接使用DataV的标签即可
<div class="box">
<dv-border-box-6>
</dv-border-box-6>
</div>
