-
// 獲取緩存里邊的項目數據
-
var e = wx.getStorageSync('projectList');
-
-
if(!e){
-
// 獲取存放項目
-
var e = this.data.projectList;
-
}
-
// 獲取項目個數
-
var a = e.length;
-
var title = wx.getStorageSync('title');
-
var value = wx.getStorageSync('value');
-
var img_url = wx.getStorageSync('img_url');
-
-
var i = {
-
id: a,
-
title: title,
-
value: value,
-
img_url: img_url,
-
};
-
-
e.push(i);
這里的代碼是以小程序為案例的，所有程序都是一個道理
直接上代碼來解釋，第二次數據會覆蓋第一次的原因就是，每次在觸發這個方法的時候初始化了數據。所以就會覆蓋數據
所以在這個方法里邊只需要先獲取e這個數據，判斷e是否存在值，當有值的時候往里邊push
數據，當沒有數據的時候直接將數據初始化即可
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr"> {{val}} </li> </ul> </div> </body> <script> var vm = new Vue({
data: {
arr: ['apple','pear','orange']
},
methods:{
add: function(){ //[Vue warn]: Duplicate value found in v-for="val in arr": "tomato". //Use track-by="$index" if you are expecting duplicate values. //重復添加會報數據重復提示 this.arr.push('tomato');
}
}
}).$mount('#box'); </script> </html>
當我們點擊【添加】按鈕兩次之后，會出現如下報錯信息
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr" track-by='$index'> {{val}} </li> </ul> </div> </body> <script> var vm = new Vue({
data: {
arr: ['apple','pear','orange']
},
methods:{
add: function(){ //[Vue warn]: Duplicate value found in v-for="val in arr": "tomato". //Use track-by="$index" if you are expecting duplicate values. //重復添加會報數據重復提示 this.arr.push('tomato');
}
}
}).$mount('#box'); </script> </html>
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
JavaScript 中的作用域、預解析以及變量提升
作用域：變量的作用范圍
局部作用域：函數內部
在局部作用域聲明的變量稱為局部變量，局部變量只能在當前函數內部使用
1）函數在執行的時候會在內存中開辟新空間
2）當執行完畢函數之后，會關閉作用域空間(變量被銷毀)
注意：形參也是局部變量
function fn() {
let b = 5
// 局部訪問 變量 b
console.log(b) // 5
}
fn()
// 全局訪問 變量 b
console.log(b) // 訪問不存在的變量，報錯
1
2
3
4
5
6
7
8
在控制臺打印得到如下結果
全局作用域：函數外部
1）在全局作用域聲明的變量是全局變量，全局變量可以在任何地方使用
2）因為全局變量可以任何地方使用，所以要特別關注局部變量
let a = 2
function fn() {
// 局部訪問 變量 a
console.log(a) // 2
}
fn()
// 全局訪問 變量 a
console.log(a) // 2
1
2
3
4
5
6
7
8
在控制臺打印得到如下結果
函數內部之所以能夠訪問到變量 a ，是因為有一個作用鏈，函數內部訪問一個變量會先在自己的作用域內找，找不到會向上級作用域找，找不到就會報錯
例如 如下代碼
(找不到報錯的情況)
function fn() {
function fn1() {
function fn2() {
// 局部訪問 變量 a
console.log(a) // 2
}
fn2()
}
fn1()
}
fn()
1
2
3
4
5
6
7
8
9
10
11
控制臺打印
(全局變量局部訪問的情況)
let a = 'hello javascript'
function fn() {
function fn1() {
function fn2() {
// 局部訪問 變量 a
console.log(a) // hello javascript
}
fn2()
}
fn1()
}
fn()
1
2
3
4
5
6
7
8
9
10
11
12
控制臺打印
塊級作用域：類似局部作用域
1）用 {} 包裹一塊
2）let聲明變量具有塊級作用域，var聲明變量不具有塊級作用域
例如
(以字面量對象為例)
let obj = {
uname: '法外狂徒-張三',
age: 68
}
1
2
3
4
想要訪問這個對象里面的屬性必須通過 obj.屬性，而不能直接訪問
預解析
預解析：在代碼執行之前把變量和函數會提前解析到當前作用域的最前面
任何作用域在執行之前都要預解析 (函數優于變量)
變量：帶有聲明的變量，只定義不賦值
1）變量在聲明之前被訪問，變量的值為 undefined
函數：帶有名字的函數，只定義不調用
1）函數優于變量
console.log(a) // undefined
fn() // hello javascript
function fn() {
console.log('hello javascript')
}
var a = 2
1
2
3
4
5
6
7
代碼是自上而下執行，但是在代碼執行前會先進行代碼的預解析，把變量以及函數 聲明 提升到當前作用域的最前面，如上代碼，console.log(a) 會打印 undefined
但是，注意?。。∽⒁猓。?！
變量必須是 var 聲明的才可以，如果是 let 聲明的變量會報錯
圖 (var 聲明的 a)
圖 (let 聲明的 a)
變量提升
預解析會引起變量的提升
變量不聲明就輸出會報錯
console.log(a) // 報錯
1
控制臺打印
用 var 聲明
console.log(a) // undefined
var a = 'hello javascript'
1
2
3
控制臺打印 undefined ，我們知道變量定義不賦值會輸出 undefined，說明變量已經存在并且提升了，但是只提升了聲明沒有提升賦值，所以打印 undefined ，如果沒有提升的話，就會像上面一樣在執行 console.log(a) 的時候直接報錯
結論：var 存在變量提升
用 let 聲明
console.log(a) // 報錯
let a = 'hello javascript'
1
2
3
結論：let 不存在變量提升
補充：
申明變量：let \ var \ const
1）let 聲明的變量不在window內
2）var 聲明的變量相當于給window添加了個屬性，let不會
3）var 聲明的變量不具有塊級作用域，let具有塊級作用域
4）var 可以重復聲明，let只能聲明一次
5）const 用來定義常量，不可以改值
6）const 定義的常量必須初始化有值，let可以不設置值
建議：常量名字因為是不可以改動的值，所以常量名建議用大寫，一般用于定義固定不變的值
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Map和對象類似都是鍵值對的集合。
對象一般用字符串當鍵。
Map可以用數字、字符串、布爾值、null、undefined、數組、對象、Set、Map等做鍵。
向Map實例中添加新成員，可連續添加。
如果新成員的鍵已存在，那么新成員將會覆蓋以存在的鍵。
通過Map實例的鍵，來訪問其對應的值。
獲取不存在的成員返回undefined。
通過Map實例的鍵，來判斷成員是否存在。
刪除Map實例成員，刪除實例中不存在的成員不報錯。
清空Map實例成員。
遍歷Map實例成員，接收兩個參數，第一個是一個回調，回調接收三個參數：value、key、Map。第二個參數是是this指向。
獲取Map成員個數。
Set必須體現出鍵和值。
Map作為參數，傳入構造函數，相當于Map實例的克隆。
Map對于重復鍵的判斷基本遵循 ===，但在Map中NaN ===NaN。
<p>1</p> <p>2</p> <script> const [p1,p2] = document.querySelectorAll('p'); const m = new Map([ [p1,'red'], [p2,'blue'] ]); m.forEach((color, elem) => { elem.style.color = color }) </script>
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
說明:
使用vagrant和Homestead 在vBox上面跑laravel, 響應速度非常緩慢(大概在10+s),
嘗試過增加虛擬機配置, 但是沒有任何效果, 經驗證也不是數據庫的原因 .
通過網上查詢了解到, 是因為VirtualBox的IO引起的: http://mitchellh.com/comparing-filesystem-performance-in-virtual-machines
解決方法1:
在Homestead.yaml下添加type:nfs, 注意空格, map對應windows下面的物理路徑
解決方法2:
如果上訴方法, 還是不能增加響應速度(我的就是), 則嘗試以下方法
安裝一個vagrant 插件
$ vagrant plugin install vagrant-winnfsd
然后修改 Homestead/scripts/homestead.rb 的代碼, 循環部分替換成如下:
重啟vagrant 之后, 響應速度已經將至 200 ms
----------參考資料
https://laracasts.com/discuss/channels/general-discussion/for-those-who-find-homesteadvagrantvirtualbox-slow-on-windows?page=1
http://mitchellh.com/comparing-filesystem-performance-in-virtual-machines
文章來源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
使用JSON表示一個對象的格式：
{
"屬性名1":"屬性值1",
"屬性名2":"屬性值2",
......
"屬性名":"屬性值n"
}
注意事項
示例
{
"name":"金蘋果",
"info":"講述了種植蘋果的辛酸歷程"
}
JSON中的數組使用 [ ] 表示，并且數組可以跟對象互相嵌套
格式：
[元素1，元素2...]
示例：
數組包含對象
["張三","李四",{
"name":"王五",
"info":"一個在技術上使勁鉆研的人"
}]
對象包含數組：
{
"name":"李小超",
"friend":["張三","李四",
{
"name":"王五",
"info":"一個在技術上使勁鉆研的人"
}
]
"info":"一個非常帥氣的人"
}
對象與對象的嵌套：
{
"name":"李小超",
"project":{
"school":"HPU",
"name":"computer"
}
}
將Java對象轉換為JSON字符串
String json = new Gson().toJSON(要轉換的對象);
代碼示例：
Book b = new Book("金蘋果","講述了種植蘋果的辛酸路程"); String str = new Gson().toJson(b);
將JSON字符串轉換為Java對象
對象 = new Gson().fromJson(JSON字符串,對象類型.class);
代碼示例：
Book b2 = new Gson().fromJson(str, Book.class); System.out.println(b2.getName());
String js = "{\"name\":\"金蘋果\",\"info\":\"講述了種植蘋果的辛酸歷程\",\"page\":[\"鋤禾日當午\",\"汗滴禾下土\"]}"; HashMap data = new Gson().fromJson(js,HashMap.class); System.out.println(data.get("page").getClass()); /*
輸出結果：class java.util.ArrayList
*/
我們在寫JSON字符串的時候，需要注意使用轉義字符轉換雙引號，另外，如果鍵值對的值是JSON數組，那么對應數組在轉換之后的類型是ArrayList
使用fastJSON解析與Gson十分相似，不過前者使用的是靜態方法。
Java對象轉換為JSON字符串
String json=JSON.toJSONString(要轉換的對象);
JSON字符串轉換為Java對象
類型 對象名=JSON.parseObject(JSON字符串, 類型.class);
或者
List<類型> list=JSON.parseArray(JSON字符串,類型.class);
示例：
轉換為Java對象
Book b2 = JSON.parseObject(json1,Book.class);
轉換為List集合
List list = JSON.parseArray(json1,String.class);
在這里進行說明一下，我們觀察JSON.parseArray()的源碼可以看到，這個方法的返回值就是一個List類型的數據，我們向方法中傳遞的第二個參數是List元素所屬的類型。
文章來源：csdn
、
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
**異步（Asynchronous, async）是與同步（Synchronous, sync）**相對的概念。在我們學習的傳統單線程編程中，程序的運行是同步的（步驟在一個控制流序列中按順序執行）。而異步的概念則是不保證同步的概念，也就是說，一個異步過程的執行將不再與原有的序列有順序關系。簡單來理解就是：同步按你的代碼順序執行，異步不按照代碼順序執行，異步的執行效率更高。異步就是從主線程發射一個子線程來完成任務。
回調函數就是一個函數，它是在我們啟動一個異步任務的時候就告訴它：等你完成了這個任務之后要干什么。這樣一來主線程幾乎不用關心異步任務的狀態了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>異步編程</title> </head> <body> <p>等待4秒過后執行</p> <p id="p2">太陽</p> <p id="p3">月亮</p> <script> // 回調函數 function sayHello(){ document.getElementById("p2").innerHTML = "Hello!Sun"; } // 使用setTimeout()可以設置sayHello為一個4秒的過程，第一個參數是回調函數，第二個參數是毫秒數 setTimeout(sayHello,4000); </script> </body> </html>
等待四秒過后：
主線程并未停止，body中的內容正常運行，而當4秒回調過后，子函數運行結果就改變了h2的值。
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
引言
因為項目搬磚需要，筆者從 2019 年 11 月份開始學習 Vue.js，在完整地敲了一遍 vue-admin 框架中的用戶管理 Demo 、斷點跟蹤前端調用流程、并摸清楚了 Vue.js 的開發套路后，總算可以出師了。
寫作本文有兩個原因，一是對這段時間學習 Vue.js 的過程做一個總結；另外就是完成自己 2019 下半年在 GitChat 的寫作目標，8 月份曾在一個知識星球公布了下半年寫兩篇 Chat 的目標，遲遲沒有完成。
以上就是本文產生的背景了，再說回到 Vue.js。筆者年初也弄了一陣兒 Angular.js，雖然都是前端框架，感覺 Vue.js 入門更簡單一些，其數據驅動的設計理念跟 Java 面向對象編程的思維模式相似，所以學起來更輕松。
之所以選擇彈框組件這個話題，是因為筆者參與的新產品中，很多地方都涉及到彈出頁面，所以仔細研究了一下彈框組件的封裝原理，解決了彈出頁面封裝的技術問題后，筆者這半路前端也能夠應付一陣子開發工作了！
環境準備
Vue 開發相關的工具及其關系回顧，這里先回憶一下跟 Vue 項目開發有關的概念：
名詞
解釋
作用
Vue.js
一個前端框架
用于構建用戶界面的漸進式框架
*.vue 文件
一種文件類型
以類 HTML 語法描述一個 Vue 組件
vue-cli
Vue 官方腳手架
對單個 *.vue 文件進行快速原型開發
eslint
前端代碼檢查工具
編寫高質量前端代碼的利器，類似 findbugs
webpack
模塊打包器
類似 maven，將前端項目打包成靜態資源文件
IDEA Vue.js 插件
IDEA 插件
使 IDEA 能夠支持 Vue 項目開發
我們在使用 IDEA 開發 Vue 項目時，只需要安裝 Vue.js 插件就可以了，不需要使用 vue-cli 腳手架；引入 ESLint 是為了編寫高質量的前端代碼，也可以不用，而且 IDEA 的快速修正功能很強大，不需要完全了解 ESLint 規范；至于打包工具 webpack，初學完全可以先忽略它。
GitHub 上有一個 Vue 的半成品項目 vueAdmin-template，可以基于它來學習或者二次開發，本文也是在它基礎上完成一個彈框組件學習案例的。這里使用 IDEA 作為開發工具，相關準備工作如下：
IDEA 安裝 Vue.js 插件；
IDEA 安裝 eslint 插件；
IDEA 添加 .vue 文件模板；
IDEA 導入 vueAdmin-template，項目地址。
常見的幾種彈出框類型
Web 開發過程中常用的彈框，歸納起來，主要有三類：
消息提示框，即 alert，不需要進行操作；
操作確認框，即 confirm，包含“確定”和“取消”按鈕；
頁面彈出框，即 openwindow，彈出一個完整的頁面，用戶輸入信息后，通過“確定”或“取消”提交信息。
第一、二類彈出框，ElementUI 都有封裝，拿來用即可；第三類彈出框，可以結合 el-dialog 組件完成。 在筆者參與的項目中，彈出頁面的特點在于，父組件彈出子組件后，用戶需要在彈出頁面配置信息、點擊“確定”按鈕提交。
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章摘自：https://blog.csdn.net/YPJMFC/article/details/78979319，非常感謝大牛分享。
echarts中關于自定義legend圖例文字
首先看一張echarts餅圖:
這張圖很好做，根本不值得提，但是用過echarts的可能會發現這個圖例有點不一樣，做這個圖例花了我好幾個小時去查，去試。結合一下echarts中legend圖例的特質我們分析一下一些難點：
1.這里的圖例文本包含兩個變量，而formatter提供的變量模板只有name
2.兩個變量的樣式各不相同
3.對齊，換行與居中的應用
一個個看：
1.兩個變量
formatter有兩種形式：
- 模板
- 回調函數
模板
使用字符串模板，模板變量為圖例名稱 {name}
formatter: 'Legend {name}'
這種想要修改name的值，暫時我做不到，歡迎讀者指正
回調函數
使用回調函數
formatter: function (name) {
return 'Legend ' + name;
}
我們在返回時可以對name進行修改，從而返回我們需要的值，初步改動是這樣：
var data = [
{value:40, name:'貨幣'},
{value:20, name:'股票'},
{value:40, name:'債券'}
]
formatter: function(name){
var total = 0;
var target;
for (var i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
target = data[i].value;
}
}
return name + ' ' + ((target/total)*100).toFixed(2) + '%';
}
2.兩種樣式
想自定義圖例文字樣式，就要用到富文本：rich，但是在官方文檔中看到的只有模板形式的富文本樣式配置，由1知用模板很難實現自定義name，所以只能用回調函數形式，采用富文本的形式對name進行改造：
formatter: function(name){
var total = 0;
var target;
for (var i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
target = data[i].value;
}
}
var arr = [
'{a|'+((target/total)*100).toFixed(2)+'%}',
'{b|'+name+'}',
]
return arr.join('\n')
},
textStyle:{
rich:{
a:{
fontSize:20,
verticalAlign:'top',
align:'center',
padding:[0,0,28,0]
},
b:{
fontSize:14,
align:'center',
padding:[0,10,0,0],
lineHeight:25
}
}
}
3.對齊，換行與居中
為了圖例與第一行文字對齊，需要設置兩個樣式的padding，把文字頂到合適的位置，然后為了上下行的間隔，設置了第2行文字的行高，最終呈現了上面圖片的效果。不知道是不是有點地方做煩了，但是能最終實現自己想要的效果，很有成就感。
4.實例
這是完整的組件：
class ConfigChart extends Component {
constructor(props) {
super(props);
this.state = {};
};
getOption = () => {
var data = [
{value:40, name:'貨幣'},
{value:20, name:'股票'},
{value:40, name:'債券'}
]
const option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/> : {c} (ehnegyq%)"
},
// formatter: function(name){
// var total = 0;
// var target;
// for (var i = 0, l = data.length; i < l; i++) {
// total += data[i].value;
// if (data[i].name == name) {
// target = data[i].value;
// }
// }
// return name + ' ' + ((target/total)*100).toFixed(2) + '%';
// },
series: [
{
name: '訪問來源',
type: 'pie',
radius: [50, 80],
center: ['50%', '40%'],
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
data: [
{
value: 40,
name: '貨幣',
itemStyle: { normal: { color: "#5877F0" } }
},
{ value: 20, name: '股票', itemStyle: { normal: { color: "#AA9FFD" } } },
{ value: 40, name: '債券', itemStyle: { normal: { color: "#F96481" } } }
]
}
],
legend: {
x: 'center',
// y: 'bottom',
bottom:5,
itemGap:30,
itemWidth:5,
textStyle:{
fontSize: 12
},
align:'left',
data: [
{
name:'貨幣',
icon:'circle'
},
{
name:'股票',
icon:'circle'
},{
name:'債券',
icon:'circle'
}
],
// formatter:'{a|{name}}\n{name}',
formatter: function(name){
var total = 0;
var target;
for (var i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
target = data[i].value;
}
}
var arr = [
'{a|'+((target/total)*100).toFixed(2)+'%}',
'{b|'+name+'}',
]
// return name + ' ' + ((target/total)*100).toFixed(2) + '%';
return arr.join('\n')
},
textStyle:{
rich:{
a:{
fontSize:20,
verticalAlign:'top',
align:'center',
padding:[0,0,28,0]
},
b:{
fontSize:14,
align:'center',
padding:[0,10,0,0],
lineHeight:25
}
}
}
},
backgroundColor: "#fff"
};
return option;
};
render() {
const _this = this;
const { isShow } = this.props;
return isShow ?
<div className={StyleClass.configChartWrapper}>
<ReactEcharts
option={_this.getOption()}
echarts={echarts}
style={{ height: '265px', width: $.width() }}
className='react_for_echarts' />
</div> : null;
}
}
其實大神上面的數據還是有點問題，按照大神這樣做的話，餅狀圖的百分比和算出來的有一點點出入(算出來的值加起來不夠百分百)，其實就是最后一項的百分比和餅狀圖的不一樣，其他的都一樣，所以，我自己修改了幾個小時，終于把它完善了（主要是綠色的代碼），代碼如下：
this.dateEchart.setOption({
color:['#4BC373','#4178E8','#FF5B57'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>: {c} (jljauxp%)"
},
legend: {
orient: 'vertical',
right:'10%',
top:'40%',
data:['微信支付','支付寶網上支付','銀行支付'],
formatter:(name)=>{
let target,count;
let total=0,num=0;
let l=this.data2.length;
for(var i=0;i<l;i++){
total+=this.data2[i].value;
}
for(i=0;i<l;i++){
if((this.data2[i].name==name)&&(i<l-1)){
target=this.data2[i].value;
count=((target/total)*100).toFixed(2)+'%';
return name+': '+count;
}
if((this.data2[i].name==name)&&(i==l-1)){
for(i=0;i<l-1;i++){
num+=parseFloat((((this.data2[i].value)/total)*100).toFixed(2));
}
let yy=(100-num).toFixed(2);
return name+': '+yy+'%';
}
}
}
},
series: [
{
name:'訪問來源',
type:'pie',
radius: ['40%', '60%'],
center:['40%','50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
},
},
labelLine: {
normal: {
show: false
}
},
data:this.data2
}
]
});
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn