iView+Vue+Echarts+ES6+Mock
實習項目中的技術棧是iView+Vue+Echarts，用了webpack打包等。如今記錄學習和複習總結，結束後整理成文檔。javascript
Vue
在瞭解iView以前，要先了解Vue的基礎知識。html
Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。前端
Vue 經常使用指令
v-bind
將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致vue
<div id="app-2">
<span v-bind:title="message">
鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
</span>
</div>
複製代碼
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載於 ' + new Date().toLocaleString()
}
})
複製代碼
縮寫：java
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
複製代碼
v-if
控制切換一個元素是否顯示node
<div id="app-3">
<p v-if="seen">如今你看到我了</p>
</div>
複製代碼
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
複製代碼
v-for
綁定數組的數據來渲染一個項目列表webpack
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
複製代碼
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學習 JavaScript' },
{ text: '學習 Vue' },
{ text: '整個牛項目' }
]
}
})
複製代碼
v-on
添加一個事件監聽器，經過它調用在 Vue 實例中定義的方法ios
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉消息</button>
</div>
複製代碼
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
複製代碼
縮寫：git
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
複製代碼
v-model
輕鬆實現表單輸入和應用狀態之間的雙向綁定github
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
複製代碼
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
複製代碼
組件化應用構建
一個組件本質上是一個擁有預約義選項的一個 Vue 實例。
<div id="app-7">
<ol>
<!-- 如今咱們爲每一個 todo-item 提供 todo 對象 todo 對象是變量，即其內容能夠是動態的。 咱們也須要爲每一個組件提供一個「key」，稍後再 做詳細解釋。 -->
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item>
</ol>
</div>
複製代碼
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '隨便其它什麼人吃的東西' }
]
}
})
複製代碼
咱們已經設法將應用分割成了兩個更小的單元。子單元經過 prop 接口與父單元進行了良好的解耦。咱們如今能夠進一步改進 <todo-item> 組件，提供更爲複雜的模板和邏輯，而不會影響到父單元。
Vue 特殊特性
ref
預期： string
ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例
<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>
複製代碼
// 獲取DOM <p>元素
this.$refs.p
複製代碼
vm.$refs
類型： Object
一個對象， 持有註冊過 ref 特性的全部DOM元素和組件實例。
Vue 計算屬性
模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。對於任何複雜邏輯，你都應當使用計算屬性computed。
基礎例子
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
複製代碼
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
複製代碼
這裏咱們聲明瞭一個計算屬性 reversedMessage。咱們提供的函數將用做屬性 vm.reversedMessage 的 getter 函數：
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
複製代碼
計算屬性緩存 vs 方法
你可能已經注意到咱們能夠經過在表達式中調用方法來達到一樣的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p>
複製代碼
// 在組件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
複製代碼
咱們能夠將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是徹底相同的。然而，不一樣的是計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們纔會從新求值。這就意味着只要 message 尚未發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。 相比之下，每當觸發從新渲染時，調用方法將總會再次執行函數。
計算屬性 vs 偵聽屬性
Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變更：偵聽屬性。然而，一般更好的作法是使用計算屬性而不是命令式的 watch 回調。當須要在數據變化時執行異步或開銷較大的操做時，使用偵聽器方式是最有用的。
下面這個例子
<div id="demo">{{ fullName }}</div>
複製代碼
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
複製代碼
上面代碼是命令式且重複的。將它與計算屬性的版本進行比較：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
複製代碼
Vue 組件
組件是可複用的Vue實例，咱們能夠在一個經過 new Vue 建立的 Vue 根實例中，把這個組件做爲自定義元素來使用。
Vue組件三要素
- 每一個組件都帶有一個名字。下例中
button-counter就是組件的名字。
<div id="components-demo">
<button-counter></button-counter>
</div>
複製代碼
- 註冊組件：組件的格式爲
Vue.component('component-name',{});。此處爲全局註冊。
組件與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。
在組件這裏data必須是一個函數，所以每一個實例能夠維護一份被返回對象的獨立的拷貝，以此來實現組件的可複用性。
// 定義一個名爲 button-counter 的新組件
Vue.component('button-counter', {
data: function () { // 組件的data必須爲函數
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' // 組件的html顯示
})
複製代碼
- 使用
new Vue建立 Vue 根實例，必須在組件註冊以後。
new Vue({ el: '#components-demo' }) // 此處掛載點爲組件的父元素
複製代碼
PS：注意二、3步驟不可調換。
經過 Prop 向子組件傳遞數據
Prop 是你能夠在組件上註冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。
一個組件默承認以擁有任意數量的 prop，任何值均可以傳遞給任何 prop。
你會發現咱們可使用 v-bind 來動態傳遞 prop。
<div id="father">
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" // v-bind 動態傳遞prop ></blog-post>
</div>
複製代碼
Vue.component('blog-post', {
props: ['post'], // 註冊prop
template: ` <div class="blog-post"> <h3>{{ post.title}}</h3> <div v-html="post.content"></div> </div> `
})
new Vue({
el: '#father',
data: {
posts: [ // 各prop的屬性，自動在blog-post中可用
{id: 1, title: 'title1', content: 'content1'},
{id: 2, title: 'title2', content: 'content2'}
]
}
})
複製代碼
上面的v-bind:post="post" 是將對象的全部屬性都做爲 prop 傳入，等價於
v-bind:id="post.id"
v-bind:title="post.title"
v-bind:content="post.content"
複製代碼
任何類型的值均可以傳給一個 prop ，例如數字、布爾值、數組、對象等。
Prop類型
能夠是：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
複製代碼
可是，一般你但願每一個 prop 都有指定的值類型。這時，你能夠以對象形式列出 prop，這些屬性的名稱和值分別是 prop 各自的名稱和類型：
props: {
title: String, // prop名稱爲title，類型爲String
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
複製代碼
prop 的單項數據流
全部的 prop 都使得其父子 prop 之間造成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，可是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而致使你的應用的數據流向難以理解。
額外的，每次父級組件發生更新時，子組件中全部的 prop 都將會刷新爲最新的值。這意味着你不該該在一個子組件內部改變 prop。若是你這樣作了，Vue 會在瀏覽器的控制檯中發出警告。
監聽子組件事件
父級組件能夠像處理 native DOM 事件同樣經過 v-on 監聽子組件實例的任意事件，子組件能夠經過調用內建的 $emit 方法 並傳入事件名稱來觸發一個事件。
咱們在每篇博文正文以前添加一個按鈕來放大字號：
<div id="blog-posts-events-demo">
<div v-bind:style="{ fontSize: postFontSize + 'em' }">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
<!--父級組件能夠像處理 native DOM 事件同樣經過 v-on 監聽子組件實例的任意事件-->
v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
</div>
</div>
複製代碼
Vue.component('blog-post', {
props: ['post'],
template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <!--子組件能夠經過調用內建的 $emit 方法 並傳入事件名稱來觸發一個事件--> <button v-on:click="$emit('enlarge-text')"> Enlarge text </button> <div v-html="post.content"></div> </div> `
})
new Vue({
el: '#blog-posts-events-demo',
data: {
posts: [
{id: 1, title: 'title1', content: 'content1'},
{id: 2, title: 'title2', content: 'content2'}
],
postFontSize: 1 // 初始化
}
})
複製代碼
使用事件拋出一個值
有的時候用一個事件來拋出一個特定的值是很是有用的。例如咱們可能想讓 組件決定它的文本要放大多少。這時可使用 $emit 的第二個參數來提供這個值：
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
複製代碼
而後當在父級組件監聽這個事件的時候，咱們能夠經過 $event 訪問到被拋出的這個值：
<blog-post ... v-on:enlarge-text="postFontSize += $event" ></blog-post>
複製代碼
在組件上使用 v-model
自定義事件也能夠用於建立支持 v-model 的自定義輸入組件。
<div id="father">
<custom-input v-model="searchText"></custom-input>
</div>
複製代碼
爲了讓它正常工做，這個組件內的 <input> 必須：
將其 value 特性綁定到一個名叫 value 的 prop 上 在其 input 事件被觸發時，將新的值經過自定義的 input 事件拋出
Vue.component('custom-input', {
props: ['value'],
template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > `
})
new Vue({
el: '#father'
})
複製代碼
組件註冊
全局註冊
以前說的組件三要素就是全局註冊的方式。組件在註冊以後能夠用在任何新建立的Vue根實例（new Vue）的模板中。
好比
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
複製代碼
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
複製代碼
局部註冊
全局註冊每每是不夠理想的，常常會形成用戶下載的js的無謂的增長。
能夠經過一個普通的JS對象來定義組件：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
// 而後在 components 選項中定義你想要使用的組件：
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
複製代碼
<div id="father">
<component-a></component-a>
<component-b></component-b>
</div>
複製代碼
對於components對象中的每一個屬性來講，其屬性名就是自定義元素的名字，屬性值就是這個組件的選項對象。
局部註冊的組件在其子組件中不可用
若是但願 ComponentA 在 ComponentB 中可用，須要有以下改寫：
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
複製代碼
若是經過 Babel 和 webpack 使用ES2015 模塊，那麼代碼看起來更像：
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
複製代碼
注意在 ES2015+ 中，在對象中放一個相似 ComponentA 的變量名實際上是 ComponentA: ComponentA 的縮寫，即這個變量名同時是：
- 用在模板中的自定義元素的名稱
- 包含了這個組件選項的變量名
在模塊系統中局部註冊
若是使用了 webpack 等模塊系統，推薦建立一個 components 目錄，並將每一個組件放置在其各自的文件中。
而後在局部註冊以前導入每一個想使用的文件。例如，在一個假設的 ComponentB.js 或 ComponentB.vue 文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
複製代碼
如今 ComponentA 和 ComponentC 均可以在 ComponentB 的模板中使用了。
基礎組件的自動化全局註冊
基礎組件指相對通用的例如輸入框或者按鈕之類的元素，會在各個組件中被頻繁的用到。
若是你使用了 webpack (或在內部使用了 webpack 的 Vue CLI 3+)，那麼就可使用 require.context 只全局註冊這些很是通用的基礎組件。這裏有一份可讓你在應用入口文件 (好比 src/main.js) 中全局導入基礎組件的示例代碼：
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其組件目錄的相對路徑
'./components',
// 是否查詢其子目錄
false,
// 匹配基礎組件文件名的正則表達式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 獲取組件配置
const componentConfig = requireComponent(fileName)
// 獲取組件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 獲取和目錄深度無關的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// 全局註冊組件
Vue.component(
componentName,
// 若是這個組件選項是經過 `export default` 導出的，
// 那麼就會優先使用 `.default`，
// 不然回退到使用模塊的根。
componentConfig.default || componentConfig
)
})
複製代碼
內在
深刻響應式原理
iView
組件
select下拉框
<Select v-model="allouseModel" style="width:100px">
<Option v-for="item in allouseList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
複製代碼
allouseList : [
{
value: 'allo',
label : '分配率'
},
{
value: 'use',
label : '利用率'
}
],
allouseModel : 'allo',
複製代碼
label 僅在 remote 模式下，初始化時使用。由於僅經過 value 沒法得知選項的 label，需手動設置。
checkbox多選框
組合使用
<template>
<CheckboxGroup v-model="social">
<Checkbox label="twitter">
<Icon type="social-twitter"></Icon>
<span>Twitter</span>
</Checkbox>
<Checkbox label="facebook">
<Icon type="social-facebook"></Icon>
<span>Facebook</span>
</Checkbox>
<Checkbox label="github">
<Icon type="social-github"></Icon>
<span>Github</span>
</Checkbox>
<Checkbox label="snapchat">
<Icon type="social-snapchat"></Icon>
<span>Snapchat</span>
</Checkbox>
</CheckboxGroup>
<CheckboxGroup v-model="fruit">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="蘋果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
</template>
<script> export default { data () { return { social: ['facebook', 'github'], fruit: ['蘋果'] } } } </script>
複製代碼
Menu導航菜單
<template>
<Menu mode="horizontal" :theme="theme1" active-name="1">
<MenuItem name="1">
<Icon type="ios-paper"></Icon>
內容管理
</MenuItem>
<MenuItem name="2">
<Icon type="ios-people"></Icon>
用戶管理
</MenuItem>
<Submenu name="3">
<template slot="title">
<Icon type="stats-bars"></Icon>
統計分析
</template>
<MenuGroup title="使用">
<MenuItem name="3-1">新增和啓動</MenuItem>
<MenuItem name="3-2">活躍分析</MenuItem>
<MenuItem name="3-3">時段分析</MenuItem>
</MenuGroup>
<MenuGroup title="留存">
<MenuItem name="3-4">用戶留存</MenuItem>
<MenuItem name="3-5">流失用戶</MenuItem>
</MenuGroup>
</Submenu>
<MenuItem name="4">
<Icon type="settings"></Icon>
綜合設置
</MenuItem>
</Menu>
<br>
<p>Change theme</p>
<RadioGroup v-model="theme1">
<Radio label="light"></Radio>
<Radio label="dark"></Radio>
<Radio label="primary"></Radio>
</RadioGroup>
</template>
<script> export default { data () { return { theme1: 'light' } } } </script>
複製代碼
Echarts
charts
柱狀圖 bar
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript"> // 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script>
</body>
</html>
複製代碼
餅圖 pie
餅圖只有一維的數值，不須要給類目。不在直角座標系上，也不須要xAxis,yAxis。
myChart.setOption({
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視頻廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
]
}
]
})
複製代碼
個性化樣式
ECharts 中有一些通用的樣式，諸如陰影、透明度、顏色、邊框顏色、邊框寬度等，這些樣式通常都會在系列的 itemStyle 裏設置。例如設置扇形的顏色：
itemStyle: {
// 設置扇形的顏色
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
複製代碼
調色盤
調色盤，能夠在 option 中設置。它給定了一組顏色，圖形、系列會自動從其中選擇顏色。 能夠設置全局的調色盤，也能夠設置系列本身專屬的調色盤。
option = {
// 全局調色盤。
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'bar',
// 此係列本身的調色盤。
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
...
}, {
type: 'pie',
// 此係列本身的調色盤。
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
}
複製代碼
dataset 管理數據
ECharts 4 提供了 數據集（dataset）組件來單獨聲明數據，它帶來了這些效果：
- 可以貼近這樣的數據可視化常見思惟方式：基於數據（dataset 組件來提供數據），指定數據到視覺的映射（由 encode 屬性來指定映射），造成圖表。
- 數據和其餘配置能夠被分離開來，使用者相對便於進行單獨管理，也省去了一些數據處理的步驟。
- 數據能夠被多個系列或者組件複用，對於大數據，沒必要爲每一個系列建立一份。
- 支持更多的數據的經常使用格式，例如二維數組、對象數組等，必定程度上避免使用者爲了數據格式而進行轉換。
option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份數據。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 聲明一個 X 軸，類目軸（category）。默認狀況下，類目軸對應到 dataset 第一列。
xAxis: {type: 'category'},
// 聲明一個 Y 軸，數值軸。
yAxis: {},
// 聲明多個 bar 系列，默認狀況下，每一個系列會自動對應到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
複製代碼
API
tooltip
顯示提示框，有下面兩種使用方式。
- 指定在相對容器的位置處顯示提示框，若是指定的位置沒法顯示則無效
dispatchAction({
type: 'showTip',
// 屏幕上的 x 座標
x: number,
// 屏幕上的 y 座標
y: number,
// 本次顯示 tooltip 的位置。只在本次 action 中生效。
// 缺省則使用 option 中定義的 tooltip 位置。
position: Array.<number>|string|Function
})
複製代碼
- 指定數據圖形，根據 tooltip 的配置項顯示提示框。
dispatchAction({
type: 'showTip',
// 系列的 index，在 tooltip 的 trigger 爲 axis 的時候可選。
seriesIndex?: number,
// 數據的 index，若是不指定也能夠經過 name 屬性根據名稱指定數據
dataIndex?: number,
// 可選，數據名稱，在有 dataIndex 的時候忽略
name?: string,
// 本次顯示 tooltip 的位置。只在本次 action 中生效。
// 缺省則使用 option 中定義的 tooltip 位置。
position: Array.<number>|string|Function,
})
複製代碼
timeline
配置項
series
系列列表，每一個系列經過 type 決定本身的圖標類型。
line 折線/面積圖
pie 餅圖
bar 柱狀/條形圖
encode
能夠定義 data 的哪一個維度被編碼成什麼。
option = {
dataset: {
source: [
// 每一列稱爲一個『維度』。
// 這裏分別是維度 0、一、二、三、4。
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
},
series: {
type: 'xxx',
encode: {
x: [3, 1, 5], // 表示維度 三、一、5 映射到 x 軸。
y: 2, // 表示維度 2 映射到 y 軸。
tooltip: [3, 2, 4] // 表示維度 三、二、4 會在 tooltip 中顯示。
}
}
}
複製代碼
當使用 dimensions 給維度定義名稱後，encode 中可直接引用名稱，例如：
series: {
type: 'xxx',
dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
encode: {
x: 'date',
y: ['open', 'close', 'highest', 'lowest']
}
}
複製代碼
下面是encode 支持的一些屬性：
// 在任何座標系和系列中，都支持：
encode: {
// 使用 「名爲 product 的維度」 和 「名爲 score 的維度」 的值在 tooltip 中顯示
tooltip: ['product', 'score']
// 使用 「維度 1」 和 「維度 3」 的維度名連起來做爲系列名。（有時候名字比較長，這能夠避免在 series.name 重複輸入這些名字）
seriesName: [1, 3],
// 表示使用 「維度2」 中的值做爲 id。這在使用 setOption 動態更新數據時有用處，可使新老數據用 id 對應起來，從而可以產生合適的數據更新動畫。
itemId: 2,
// 指定數據項的名稱使用 「維度3」 在餅圖等圖表中有用，可使這個名字顯示在圖例（legend）中。
itemName: 3
}
// 對於一些沒有座標系的圖表，例如餅圖、漏斗圖等，能夠是：
encode: {
value: 3
}
複製代碼
series[i]-xxx.label
圖形上的文本標籤，可用於說明圖形的一些數據信息，好比值，名稱等
series[i]-line.label.formatter
【string, Function】。
標籤內容格式器，支持字符串模板和回調函數兩種形式，字符串模板與回調函數返回的字符串均支持用 \n 換行。
字符串模板 模板變量有：
- {a}：系列名。
- {b}：數據名。
- {c}：數據值。
- {@xxx}：數據中名爲'xxx'的維度的值，如{@product}表示名爲'product'` 的維度的值。
- {@[n]}：數據中維度n的值，如{@[3]}` 表示維度 3 的值，從 0 開始計數。
series[i]-pie.label.formatter
相較於 line 折線圖，餅圖多了一個模板變量：
- {d}：百分比。
例如：
formatter: '{b}: {@四月} ({d}%)'
複製代碼
Echarts中的事件和行爲
鼠標事件的處理
ECharts 支持常規的鼠標事件類型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。
// 基於準備好的dom，初始化ECharts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
// 處理點擊事件而且跳轉到相應的百度搜索頁面
myChart.on('click', function (params) {
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
複製代碼
全部的鼠標事件包含參數 params，這是一個包含點擊圖形的數據信息的對象，以下格式：
{
// 當前點擊的圖形元素所屬的組件名稱，
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列類型。值可能爲：'line'、'bar'、'pie' 等。當 componentType 爲 'series' 時有意義。
seriesType: string,
// 系列在傳入的 option.series 中的 index。當 componentType 爲 'series' 時有意義。
seriesIndex: number,
// 系列名稱。當 componentType 爲 'series' 時有意義。
seriesName: string,
// 數據名，類目名
name: string,
// 數據在傳入的 data 數組中的 index
dataIndex: number,
// 傳入的原始數據項
data: Object,
// sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
// dataType 的值會是 'node' 或者 'edge'，表示當前點擊在 node 仍是 edge 上。
// 其餘大部分圖表中只有一種 data，dataType 無心義。
dataType: string,
// 傳入的數據值
value: number|Array
// 數據圖形的顏色。當 componentType 爲 'series' 時有意義。
color: string
}
複製代碼
如何區分鼠標點擊到了哪裏：
myChart.on('click', function (params) {
if (params.componentType === 'markPoint') {
// 點擊到了 markPoint 上
if (params.seriesIndex === 5) {
// 點擊到了 index 爲 5 的 series 的 markPoint 上。
}
}
else if (params.componentType === 'series') {
if (params.seriesType === 'graph') {
if (params.dataType === 'edge') {
// 點擊到了 graph 的 edge（邊）上。
}
else {
// 點擊到了 graph 的 node（節點）上。
}
}
}
});
複製代碼
ES6
Axios
Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。
特性
- 從瀏覽器中建立 XMLHttpRequests
- 從 node.js 建立 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求數據和響應數據
- 取消請求
- 自動轉換 JSON 數據
- 客戶端支持防護 XSRF
axios API
能夠經過向 axios 傳遞相關配置來建立請求
// 獲取遠端圖片
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
複製代碼
請求配置
這些是建立請求時能夠用的配置選項。只有 url 是必需的。若是沒有指定 method，請求將默認使用 get 方法。
// `url` 是用於請求的服務器 URL
url: '/user',
// `method` 是建立請求時使用的方法
method: 'get', // default
// `headers` 是即將被髮送的自定義請求頭
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是即將與請求一塊兒發送的 URL 參數
// 必須是一個無格式對象(plain object)或 URLSearchParams 對象
params: {
ID: 12345
},
// `data` 是做爲請求主體被髮送的數據
// 只適用於這些請求方法 'PUT', 'POST', 和 'PATCH'
// 在沒有設置 `transformRequest` 時，必須是如下類型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 瀏覽器專屬：FormData, File, Blob
// - Node 專屬： Stream
data: {
firstName: 'Fred'
}
複製代碼
模塊化
export 與 export default
export 本質上就是規定模塊[js文件]的對外接口[屬性或方法]，一個文件能夠輸出多個
export function output() { }
import {output} from './example'
複製代碼
export default 則是在 export 的基礎上，爲規定模塊提供一個默認的對外接口。一個js文件只能輸出一個。
export default function output() { }
import output from './example'
複製代碼
vue 中使用export data return
export default{
data(){
return {
showLogin:true,
// def_act: '/A_VUE',
msg: 'hello vue',
user:'',
homeContent: false,
}
},
methods:{
}
}
複製代碼
不使用 return 包裹的數據會在項目的全局可見，會形成變量污染
使用 return 包裹後數據中變量只在當前組件中生效，不會影響其餘組件。
Mock.js
Mock.js是一種前端工具，可以生成隨機數據，攔截Ajax請求，使先後端獨立開發，只要定義好接口就能夠並行工做，互不影響。
Mock.mock()
Mock.mock()可根據數據模板生成模擬數據
Mock.mock( rurl, template )
記錄數據模板。當攔截到匹配 rurl 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並做爲響應數據返回。
rurl 可選。
表示須要攔截的 URL，能夠是 URL 字符串或 URL 正則。例如 /\/domain\/list\.json/、'/domian/list.json'。
-
每一个你不满意的现在，都有一个你没有努力的曾经。