2. 程式人生 > >Vue封裝一個餅圖、儀表盤和狀態圖

Vue封裝一個餅圖、儀表盤和狀態圖

阿新 • • 發佈：2019-01-29
// 引入基本模板 let echarts = require('echarts/lib/echarts') // 引入柱狀圖元件 require('echarts/lib/chart/bar') // 引入提示框和title元件 require('echarts/lib/component/tooltip') require('echarts/lib/component/title') export default { name: 'StatusBar', props: { // subtext: String, // texttitle: String, // axisdata: Array, // seriesdata: Array,
textlink: { type: String, required: false, default: '' }, sublink: { type: String, required: false, default: '' }, xname: { type: String, required: false, default: '' }, yname: { type: String, required: false
, default: '' }, statusdata: Object }, data () { return { sun_link: this.sublink, link: this.textlink, x_name: this.xname, y_name: this.yname, title: '', subtitle: '', axis_data: [], series_data: [] } }, watch: { statusdata (val) { this
.title = val.title this.subtitle = val.subtitle this.axis_data = val.Axis_data this.series_data = val.series_data this.drawBar() } }, mounted () { // this.drawBar() }, methods: { drawBar () { let myCharts = echarts.init(this.$refs.statusbarchart) myCharts.setOption({ title: { text: this.title, left: '35', link: this.link, textStyle: { color: '#B6B6B6' }, subtext: this.subtitle, sublink: this.sub_link, subtextStyle: { color: '#B6B6B6', fontSize: 18, fontWeight: 'bold' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '15%', bottom: '30%', top: '25%' }, legend: { show: false }, xAxis: [ { type: 'category', position: 'bottom', name: this.x_name, nameLocation: 'center', nameGap: '35', data: this.axis_data, axisTick: { show: false }, axisLabel: { textStyle: { color: '#BFC2C8' }, rotate: 30, interval: 0 }, axisLine: { lineStyle: { color: '#BFC2C8' } } } ], yAxis: [ { type: 'value', left: '10', name: this.y_name, nameLocation: 'center', nameGap: '45', axisTick: { show: false }, axisLine: { lineStyle: { color: '#BFC2C8' } }, splitLine: { lineStyle: { color: '#898D95' } }, axisLabel: { textStyle: { color: '#BFC2C8' }, interval: 0, formatter: function (value, index) { if (value >= 1000 && value < 10000000) { value = value / 1000 + 'K' } else if (value >= 1000000 && value < 1000000000) { value = value / 1000000 + 'M' } else if (value >= 1000000000) { value = value / 1000000000 + 'B' } return value } } } ], series: this.series_data }) window.addEventListener('resize', function () { myCharts.resize() }) } } }

相關推薦

Vue封裝一個餅圖、儀表盤和狀態圖

// 引入基本模板 let echarts = require('echarts/lib/echarts') // 引入柱狀圖元件 require('echarts/lib/chart/bar') // 引入提示框和title元件 require('echarts/lib/component/tooltip

關於組態王、梯形圖、Unity和梯形圖 的知識理解

png 設置 ges 第一個 理解 images img 軟件 一個 1.必須在博圖軟件Step7中運行，組態王和unity才能和PLC進行通信 必須在博圖軟件Step7中運行，組態王和unity才能和PLC進行通信 2.組態王和unity不能讀寫PLC的數

Vue + Element-ui實現後臺管理系統(5)---封裝一個Form表單元件和Table表格元件

# 封裝一個Form表單元件和Table元件 有關後臺管理系統之前寫過四遍部落格,看這篇之前最好先看下這四篇部落格。另外這裡只展示關鍵部分程式碼，專案程式碼放在github上： [mall-manage-system](https://github.com/yudiandemingzi/mall-manag

PhoneGap3+版本號的安裝、配置和使用[圖]

結果 apache height avd fig blog 所在 modules mar 如若轉載。請註明博文地址及原作者（RisingWonderland）。 PhoneGap2+版本號最高為2.9.1，從3+版本號開始，PhoneGap官方不再提供下載安裝包

數據庫的數據類型、索引、鎖、事務和視圖

ima -m log_file oat 寬度 默認值 col 說明 prim 數據庫的數據類型、索引、鎖、事務和視圖 數據的類型 1）數據類型： 數據長什麽樣？ 數據需要多少空間來存放？ 系統內置數據類型和用戶定義數據類型 2）MySql 支持多種列

功能架構圖、信息結構圖、產品結構圖的區別和繪制方法

功能結構 信息結構 產品結構 互聯網產品 一、功能架構圖 1. 定義 功能結構圖就是以功能模塊為類別，介紹模塊下其各功能組成的圖表，體現了產品功能的同時，也展示了功能的從屬關系。 2. 作用： 產品設計時，輔助思路梳理，避免功能概念模糊、缺失。 3. 註意點： 繪制功能結構時，盡量避免出現信息

Vue組件的定義、註冊和調用

one src fun asc ads doc html5標簽 字母 javascrip <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>組

自定義元件開發五 陰影、 漸變和點陣圖運算

介紹陰影、漸變和點陣圖運算等技術 陰影只是一個狹義的說法，實際上也包括髮光等效果；Android 也提供了強大的漸變功能，漸變能為物體帶來更真實的質感，比如可以用漸變繪製一顆五子棋或一根金屬圓棒；點陣圖運算就更有趣了，Android 為 Bitmap 的運算提供了多達16 種運算方法，

如何用vue封裝一個防使用者刪除的平鋪頁面的水印元件

需求 為了防止截圖等安全問題，在web專案頁面中生成一個平鋪全屏的水印 要求水印內容為使用者名稱，水印節點使用者不能通過開發者工具等刪除 效果 如上圖 在body節點下插入水印DOM節點，水印節點覆蓋在頁面最上層但不影響頁面正常操作

前端實現餅圖、堆疊柱狀圖、折線圖

我覺得根據框架的API，就能夠修改樣式，得到你想要的結果，靈活運用就好。 這兩天做了’帶圖例還百分比的餅圖‘，‘堆疊狀的柱狀圖’，‘折線圖’。 我使用的是highcharts這個框架，我覺得還是不錯的，有詳細的介紹和api。 另外，我在查資料的過程中，還發現的圖表類的框架有

Vue學習之vue例項中的資料、事件和方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia

UniRx---簡單封裝一個SubjectManager 解耦主題和監聽者

Subject<T> 是UniRx 推薦的 事件實現方式 ( UniRx是AssetStore上的一款免費外掛，但其實他的出身很地道，脫胎於微軟的Rx框架，主要思想是像Linq那樣對訂閱的事件進行操作，並且他還能對操作進行 時間排程，執行緒排程，而UniRx就是Rx的

一、ASP.NET四大“外掛”的總後臺--ASPNETDB (資料庫關係圖、表和檢視 基本表和獨立表)

個性化使用者配置（使用者自定義屬性）表 由此表結構可以看出，所有的使用者自定義屬性最後都是“打包”（序列化）成一個或兩個資料塊， 存放在PropertyValuesString（序列化為string、Xml） 和（或） PropertyValuesBinary（序列化為Binary） 兩個（或其中之一）欄

LaTeX完整例子_參考文獻、圖、表和公式

\documentclass[UTF8,twoside]{ctexart} \usepackage{mathtools} \usepackage[CJKbookmarks=true,colorlinks,linkcolor=blue,anchorcolor=blue,citecolor=green]{hyp

SCI論文投稿中圖、表和公式的位置問題

相信很多向期刊投過論文的小夥伴都有類似的經歷，就是在大部分的sci期刊的”Guide for Authors”中要求的論文中關於，圖，表，和公式的位置放置問題。比如有些期刊要求將圖，表和公式都放在論文的最後。有些期刊又明確說可以放在手稿中。對於新手來說這些東東到

echarts3的簡單實踐（餅圖、柱形圖、折線圖、地圖+散點圖）

echarts3是向下相容echarts2的，所以echarts2切換到echarts3基本無需改程式碼。 餅圖、柱形圖、折線圖：用的echarts2的配置項，但是能正常顯示 程式碼片段： function loadCharts(orgCode){ /

靜態變量和成員變量的區別、final修飾特點、創建對象的內存圖、靜態內存圖

mage 調用 back gif nal 出現 http 消失 區別 靜態變量和成員變量的區別* 靜態變量也叫類變量 成員變量也叫對象變量* A:所屬不同 * 靜態變量屬於類，所以也稱為為類變量 * 成員變量屬於對象，所以也稱為實例變量(對象變量)* B:內存中位置不

基於Ant Design Vue封裝一個表單控制元件

# 開原始碼 [https://github.com/naturefwvue/nf-vue3-ant](https://github.com/naturefwvue/nf-vue3-ant) > 有缺點本來是寫在最後的，但是博文寫的似乎有點太長了，估計大家沒時間往下看，於是就把有缺點寫在前面了，不喜歡可以先

UML圖--行為圖（活動圖和狀態圖）

uml 活動圖 狀態圖 行為圖 活動圖簡介簡單介紹為了完成某個目標需要做的活動以及這些活動的執行順序，著重表現的是系統的行為，而非系統的處理過程組成元素起始點、活動、判斷、同步、結束點、基本流、支流、異常流、組合活動、泳道分類用例活動圖：描述了如何來達到這個目標，業務流程一般包括一個基本業務流

canvas學習（一）：線條，圖像變換和狀態保存

itl height tar 默認 class limit 方法 星空 stop canvas學習（一）：線條，圖像變換和狀態保存 一：繪制一條線段： var canvas = document.getElementById(‘canvas‘) var ctx = can