2. 程式人生 > >Asp.net+Vue2構建簡單記賬WebApp之六（vue.js構建記賬統計頁面）

Asp.net+Vue2構建簡單記賬WebApp之六（vue.js構建記賬統計頁面）

阿新 • • 發佈：2019-02-07
import { Toast } from 'mint-ui'; // 按需引入echart模板 let echarts = require('echarts/lib/echarts'); require('echarts/lib/chart/pie'); require('echarts/lib/chart/line'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); export default{ data(){ return{ LineData:[],//曲線圖資料
PieData:[],// 餅圖資料 date:new Date(), // 時間 } }, methods:{ // 獲取曲線圖資料 GetChartLineData(){ this.$http.post('/bill/GetCount', { Date: this.date, Type:0, GroupBy:1, User: '1' }).then(response => { if(response.body.result.result) { this
.LineData = response.body.result.data; }else { Toast(response.body.result.data) } }, response => { Toast("獲取資料出錯"); }); }, // 獲取餅圖資料 GetPieData(){ this.$http.post('/bill/GetCount', { Date:this.date, Type:0
, User: '1', }).then(response => { if(response.body.result.result) { this.PieData = response.body.result.data; }else { Toast(response.body.result.data) } }, response => { Toast("獲取資料出錯"); }); }, // 繪製圖表 DrawPieChart(){ // 基於準備好的dom，初始化echarts例項 let myChart = echarts.init(document.getElementById('ChartPie')); let data = this.PieData; // 繪製圖表 myChart.setOption({ tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series: [ { name: '消費', type: 'pie', radius: '55%', center: ['50%', '50%'], data: data } ] }); }, DrawLineChart(){ // 基於準備好的dom，初始化echarts例項 let myChart = echarts.init(document.getElementById('ChartLine')); let data = this.LineData; let x=[],y=[],count=0; for(let i of data) { x.push(i.name); y.push(i.value); count+=i.value; } // 繪製圖表 myChart.setOption({ title : { text: count, subtext: '單位（元）', x:'right' }, tooltip: { trigger: 'axis' }, calculable: false, grid: { x: 12, y: 10, x2: 12, y2: 30, borderWidth: 0 }, xAxis: [ { splitLine: { show: false }, type: 'category', boundaryGap: false, data: x } ], yAxis: [ { show: false, type: 'value' } ], series: [ { name: '消費', type: 'line', center: ['10%', '10%'], smooth: true, itemStyle: { normal: { areaStyle: { type: 'default' } } }, data: y }, ] }); } }, // 監測變化 watch:{ PieData:function () { this.DrawPieChart(); // 繪製表格 }, LineData:function () { this.DrawLineChart(); // 繪製表格 } }, // 建立後執行 mounted(){ this.GetChartLineData(); this.GetPieData(); } }

相關推薦

Asp.net+Vue2構建簡單記賬WebApp之六（vue.js構建記賬統計頁面）

import { Toast } from 'mint-ui'; // 按需引入echart模板 let echarts = require('echarts/lib/echarts'); require('echarts/lib/chart/pie'); require('echart

Asp.net+Vue2構建簡單記賬WebApp之二（使用ABP迅速搭建.Net後臺）

一、ABP簡介 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 ASP.NET Boilerplate是一個用最佳實踐和流行技術開發現代WEB應用程式的新起點，它旨在成為一個通用的WEB應用程式框架

PS圖層混合演算法之六（差值，溶解， 排除）

差值模式： 檢視每個通道中的顏色資訊，比較底色和繪圖色，用較亮的畫素點的畫素值減去較暗的畫素點的畫素值。與白色混合將使底色反相；與黑色混合則不產生變化。   排除模式可生成和差值模式相似的效果，但比差

羊皮卷->羊皮卷之六（世界上最偉大的推銷員）

羊皮卷之六今天我要學會控制情緒。潮起潮落，冬去春來，夏末秋至，日出日落，月圓月缺，雁來雁往，花飛花謝，草長瓜熟，自然界萬物都在迴圈往復的變化中，我也不例外，情緒會時好時壞。今天我要學會控制情緒。這是大自然的玩笑，很少有人窺破天機。每天我醒來時，不再有舊日的心情。昨日的快樂變成今日的哀愁，今日的悲傷又轉為明日的

Asp.net+Vue2構建簡單記賬WebApp之一（設計）

一、前言 作為一個asp.net 程式設計師，當發現Vue.js的存在時就愛上它，但是在asp.net應用中使用Vue一時讓我無從上手。直到最近有了點心得。就計劃把之前做的一個記賬應用前端改為Vue2實現。 二、 效果如下 這個是之前做一個小應

asp.net mvc 最簡單身份驗證 [Authorize]通過的標準

dmi api 什麽 rgs new auth 單身 mar name [Authorize] public ContentResult Index2() { return Content("驗證通過了");

ASP.NET沒有魔法——ASP.NET MVC 與數據庫之ORM

設計器 不同類 使用 運行程序 relation 編譯 如何 n) and 什麽是ORM 　　對象關系映射（Object Relational Mapping，簡稱ORM，或O/RM，或O/R mapping），是一種程序技術，用於實現面向對象編程語言裏不同類型系統的數據

ASP.NET沒有魔法——ASP.NET MVC 與數據庫之EntityFramework配置與連接字符串

client frame view 必須 多個數據庫 epo get base fault 　　前幾篇文章中介紹了如何使用Entity Framework來操作數據庫，但是對EF的配置、連接字符串的指定仍然存在一些疑問。　　本章將對EF的配置進行介紹。　　EF可以通過兩種方

ASP.NET沒有魔法——ASP.NET MVC 與數據庫之MySQL&EF

dll 程序 connector resolv rdquo ram key log 找到 　　本章將介紹如何通過Entity Framework來使用My SQL，之前介紹EF時介紹了provider這個配置項，而且也介紹了在ASP.NET訪問MySQL數據仍然是通過ADO

ASP.NET沒有魔法——ASP.NET MVC 與數據庫之EF實體類與數據庫結構

類之間的關系 context 模型 rst 例子 style 方法 eid 一個 　　大家都知道在關系型數據庫中每張表的每個字段都會有自己的屬性，如：數據類型、長度、是否為空、主外鍵、索引以及表與表之間的關系。但對於C#編寫的類來說，它的屬性只有一個數據類型和類與類之間的關

基於ASP.NET的comet簡單實現

abc bject 處理 files get googl gif lba dem 前天看到一篇博文《一步一步打造自己的WEBIM》，覺得COMET這個概念很有意思，但博主使用了自己的一套較為復雜的框架，看起來頗為費勁，故而我想通過簡單的“jQuery+兩個類

Asp.net 與 UCenter 用戶同步之實施過程

framework hosts dcl eba exec apt pick summary sts 在寫這篇文章的時候，我還在想，這篇文章也許能給你帶來一些收獲，但或許會令你更加的迷茫，為什麽會這樣？因為：1、UCenter雖然足夠強大，但正為它的強大，它的不少暗箱操作

ASP.NET MＶＣ SignalR 簡單聊天推送筆記

container prompt rtu lis pack 聊天 ntb 反向代理 試用 介紹：（抄襲於網絡） ASP.NET SignalR 是為 ASP.NET 開發人員提供的一個庫，可以簡化開發人員將實時 Web 功能添加到應用程序的過程。實時 Web 功能是指這樣一

微服務介紹及Asp.net Core實戰項目系列之微服務介紹

管理 col 數據強一致性 pan 基於 數據存儲 tlab fdm 人的 0、目錄 整體架構目錄：ASP.NET Core分布式項目實戰-目錄 一、微服務選型 在做微服務架構的技術選型的時候，以“無侵入”和“社區活躍”為主要的考量點，將來升級為原子服務架構、量子

ASP.NET Core 中的物件對映之 AutoMapper

目錄 AutoMapper 簡介 AutoMapper 使用 初始化 Profile設定 扁平化對映 集合對映 投影 條件對映 值轉換 設定轉換前後行為 配置驗證及設定 反向對映 自定義轉換器 自

Asp.net 面向介面可擴充套件框架之業務規則引擎擴充套件元件

原文: Asp.net 面向介面可擴充套件框架之業務規則引擎擴充套件元件 隨著面向介面可擴充套件框架的繼續開發,有些功能開發出現了"瓶頸",有太多的東西要寫死才好做。但寫死的程式碼擴充套件性是非常的不好,迷茫中尋找出入... 進而想到我以前開發的好幾個專案,都已有一定的可配置能力,想想怎麼把這些地方的程式

Asp.net 面向介面可擴充套件框架之資料處理模組及EntityFramework擴充套件和Dapper擴充套件(含乾貨)

原文: Asp.net 面向介面可擴充套件框架之資料處理模組及EntityFramework擴充套件和Dapper擴充套件(含乾貨) 介面資料處理模組是什麼意思呢？實際上很簡單,就是使用面向介面的思想和方式來做資料處理。 還提到EntityFramework和Dapper,EntityFramework和

ASP.NET Core 中簡單Session登入校驗

ASP.NET Core 中簡單Session登入校驗：從Session的配置新增、到請求過濾、再到頁面操作。推薦相關閱讀：ASP.NET 會話狀態概述  ASP.NET Cookie 概述  ASP.NET 狀態管理建議 ASP.NET Core 中的會話和應用狀態 目

asp.net的最簡單的增刪改查的例子

第一，1.設定資料庫可以遠端訪問（以sqlserver為例）開始選單---程式--- Microsoft sql server 2005---配置工具--sqlserver 外圍配置器---服務和連線的外圍配置器開啟 MSSqlServer---DataBase Engine

ASP.NET WEB網站簡單入門（簡單Demo ->釋出）

簡單分幾個階段 一、簡單程式碼實現 1.新建工程 2.開啟設計器（檢視設計器），托出一個label ,寫上Hello 3.點選除錯，即可看到網頁效果 4.重新生成後，釋出到指定